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本 书 采用 问题 描述 十 解决 方案 的 模式 ,以 HTML5 .CSS3 jQuery ,jQuery UI.SVG 等 新 技术 为 核心 ,列举 了 600 多 
个 实用 性 极 强 的 Web 前 端 开发 技术 , 旨 在 帮助 广大 读者 快速 解决 实际 开发 过 程 中 面临 的 诸多 问题 ,从 而 提高 项 目的 
开发 效率 ,拓展 应 用 领域 。 全 书 内 容 分 为 文字 、 图 像 . 动 画 、 视 频 、 元 素 、 布 局、 选择 器 .存储 、 其 他 9 部 分 ,以 所 见 即 所 
得 .所 学 即 所 用 的 速成 思维 展示 了 过 渡 动 画 、 关 键 帧 动画 、 滤 镜 、 选 择 器 .计数 器 、 伪 元 素 、 盒 子 . 沙 箱 .画布 等 Web 前 端 
技术 的 具体 应 用 ,揭秘 了 百度 地 图 定位 、 响 应 式 页 面 布 局 、 散 列 图 片 布局 、 瀑 布 流 图 片 布局 .旋转 圆 弧 滑 出 菜单 、 批 量 插 


内 容 简 介 


人 与 自动 编号 .盒子 模型 ,图 像 与 文字 特效 .多 饼 图 绘制 等 诸多 炫 酷 创 意 实 例 的 实现 过 程 。 


为 了 突出 实用 性 和 简洁 性 ,本 书 在 演示 或 描述 这 些 实例 时 力求 针对 性 地 解决 问题 ,并 且 所 有 实例 均 配 有 插图 。 本 


书 适合 作为 Web 前 端 开发 人 员 的 案头 参考 书 , 无 论 是 对 于 编程 初学 者 还 是 编程 高 手 ,本 书 都 极 具 参考 和 收藏 价值 。 
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2014 年 10 月 28 日 ,W3C 的 HTML 工作 组 发 布 了 HTML5 的 正式 推荐 标准 ; 2015 年 4 月 9 日 ， 
W3C 的 CSS 工作 组 发 布 了 CSS 基本 用 户 接口 模块 (CSS Basic User Interface Module Level 3 ,CSS3 
UD 的 标准 工作 草案 。 实 际 上 ,HTML5 和 CSS3 都 是 渐进 的 标准 ,HTML5 的 第 一 份 正 式 草案 于 
2008 年 1 月 22 日 公布 ,从 此 Web 前 端 就 出 现 了 HTML5 的 多 种 新 技术 ,并 且 许多 主流 浏览 器 相继 跟 
进 支持 ,呈现 了 HTML5 和 CSS3 的 炫 酷 功 能 。 

W3C CEO Jeff Jaffe 博士 表示 : HTML5 将 推动 Web 进入 新 的 时 代 。 不 久 以 前 ,通过 Web 还 只 
是 看 一 些 基 础 文档 ,而 如 今 Web 是 一 个 极其 丰富 的 平台 ,通过 Web 可 以 做 很 多 事情 。 

CSS(Cascading Style Sheet, 层 从 样 式 表 ) 用 于 对 页 面 的 布局 .字体 颜色、 背景 和 其 他 效果 的 实现 
进行 更 加 精确 的 控制 。CSS3 是 CSS 技术 的 升级 版 本 ,CSS3 开发 是 朝 着 模块 化 方向 发 展 的 ,这 些 模 块 
包括 盒子 模型 ,列表 模块 . 超 链 接 方式 .语言 模块 .背景 和 边框 .文字 特效 .多 栏 布 局 等 。 本 书 未 根据 
HTML5 .CSS3、SVG 的 技术 类 别 进行 篇 章 的 划分 ,而 是 将 它们 融合 在 一 起 ,按照 实例 功能 进行 篇章 的 
划分 。 实 际 上 ,各 种 技术 都 是 为 了 实现 某 一 目标 ,你 中 有 我 ,我 中 有 你 , 难 分 难 解 。 

本 书 采 用 问题 描述 十 解决 方案 的 模式 ,以 HTML5 CSS3 jQuery jQuery UI、SVG 等 新 技术 为 核 
心 ,列举 了 600 多 个 实用 性 极 强 的 Web 前 端 开发 技术 , 旨 在 帮助 广大 读者 快速 解决 实际 开发 过 程 中 
面临 的 诸多 问题 ,从 而 提高 项 目的 开发 效率 ,拓展 应 用 领域 。 全 书 内 容 分 为 文字 、 图 像 动画、 视频 、 元 
素 , 布 局 .选择 器 ,存储 .其 他 9 部 分 ,以 所 见 即 所 得 、 所 学 即 所 用 的 速成 思维 展示 了 过 渡 动 画 、 关 键 帧 
动画 、 滤 镜 、 选 择 器 .计数 器 、 伪 元 素 、 盒 子 . 沙 箱 .画布 等 Web 前 端 技术 的 具体 应 用 ,揭秘 了 百度 地 图 
定位 、 响 应 式 页 面 布局 . 散 列 图 片 布 局 瀑布 流 图 片 布局 、 旋 转 圆 弧 滑 出 菜单 .批量 插入 与 自动 编号 、 盒 
子 模型 .图像 与 文字 特效 ,多 饼 图 绘制 等 诸多 炫 酷 创意 实例 的 实现 过 程 。 

本 书 实例 在 Windows 10 操作 系统 下 使 用 Intellij IDEA 14. 0. 2 开发 工具 编写 ,测试 浏览 器 主要 
采用 Google Chrome 浏览 器 ,如 书 中 无 特别 说 明 , 请 在 以 上 环境 中 学 习 本 书 的 实例 。 如 果 在 Google 
Chrome 浏览 器 中 无 法 正常 测试 ,请 用 火狐 浏览 器 或 下 浏览 器 的 较 新 版 本 进行 测试 。 实 际 上 ,本 书 中 
的 大 多 数 实例 均 可 单 文件 测试 , 即 在 源 代码 文件 夹 中 右 击 HTML 源 文件 ,例如 myHtmlA058. html， 
在 右键 菜单 中 选择 “打开 方式 (H)” 一 Google Chrome 命令 , 即 可 在 谷歌 浏览 器 中 正常 运行 该 实例 。 在 
记事 本 程序 中 可 查看 源 代码 。 

全 书 的 所 有 内 容 和 思想 并 非 一 人 之 力所能及 ,而 是 凝聚 了 众多 热心 人 士 的 智慧 并 经 过 充分 的 提 
炼 和 总 结 而 成 ,在 此 对 他 们 表示 崇高 的 敬意 和 囊 心 的 感谢 ! 本 书 编写 人 员 包 括 罗 帅 、. 罗 斌 、 汪 明 云 . 曹 
勇 . 陈 宁 、 邓 承 惠 、 邓 小 渝 ` 范 刚强 、 何 守 眉 、 洪 亮 . 洪 沛 林 、 江 素 芳 . 蓝 洋 、 雷 国 忠 ` 雷 惠 、 雷 玲 、 雷 平 、 雷 治 
英 、 刘 蕉 德 , 刘 兴 红 、 罗 聘 、 唐 静 、 唐 兴 忠 、. 童 结 嘉 、. 汪 兰 、 王 彬 、 王 伯 芳 、 王 年 素 . 王 正 建 . 吴 多 、 吴 诗 华 、 杨 
开平 . 杨 琴 、 易 伶 , 张 志 红 、 郑 少 文 等 , 终 稿 由 罗 滤 统筹 完成 。 由 于 时 间 关 系 和 作者 水 平原 因 , 本 书 内 容 
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有 可 能 存在 少量 对 HTML5、CSS3、SVG 等 技术 认识 不 全 面 或 偏颇 的 地 方 , 以 及 一 些 朴 漏 和 不 当 之 
处 , 敬 请 读者 批评 指正 。 
读者 可 将 购书 凭证 发 送 至 邮箱 huangzh@tup. tsinghua. edu. cn 索取 本 书 源 代码 。 


罗 是 罗 斌 
2018 年 5 月 于 重庆 渝 北 
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在 画布 上 创建 向 上 的 3D 拉 影 文字 
在 画布 上 创建 向 下 的 3D 拉 影 文字 
在 画布 上 创建 向 左 或 向 右 的 3D 拉 影 文字 
在 画布 上 创建 模糊 阴影 的 文字 
在 画布 上 创建 边缘 羽化 的 文字 
在 画布 上 创建 空心 线条 的 文字 
在 画布 上 绘制 半 透 明 阴 影 文字 …………… 
在 画布 上 绘制 左右 渐变 的 文字 
在 面 布 上 绘制 扁平 或 细 长 的 文字 
在 画布 上 使 用 图 像 填 充 文字 线条 … 
在 画布 上 移动 鼠标 指针 实现 文字 涂鸦 … 
将 画布 上 的 文字 、 图 像 等 保存 到 本 地 … 
使 用 SVG 实现 文字 在 圆 弧 上 显示 
使 用 SVG 实现 文字 绕 三 角形 显示 
使 用 SVG 实现 文字 沿 曲 线 显示 … 
使 用 SVG 实现 文字 沿 跑道 线 显示 … 
在 SVG 中 对 线条 进行 加 粗 或 瘦身 … 
使 用 SVG 描 边 创建 空心 线条 文字 
使 用 SVG 描 边 创建 渐变 空心 文字 
使 用 SVG 滤 镜 创建 扩散 阴影 文字 … 
使 用 SVG 滤 镜 创建 木雕 和 蚀刻 文字 … 
使 用 SVG 的 动画 变换 实现 文字 旋转 … 
在 SVG 中 逐 字 旋转 一 行 的 每 个 文字 

在 SVG 中 压 扁 单行 文本 的 每 个 文字 … 
在 SVG 中 实现 单行 文本 的 字 间 距 不 等 
在 SVG 中 错落 显示 单行 文本 的 每 个 文字 
以 阴影 模糊 效果 显示 当前 选择 文本 
以 霓虹灯 发 散 效果 显示 当前 选择 文本 
以 多 级 辉 光 效 果 显 示 当 前 选择 文本 
以 下 沉 凹 坑 效 果 显 示 当 前 选择 文本 
















































< 人 > HTML5+CSS3 炫 酷 应 用 实例 集锦 





033 
034 
035 
036 
037 
038 
039 
040 
041 
042 
043 
044 
045 
046 
047 
048 
049 
050 
051 
052 
053 
054 
055 
056 
057 
058 
059 
060 
061 


第 2 部 分 


062 
063 
064 
065 
066 
067 
068 
069 
070 
071 
072 


以 术 类 只 刘 效 果品 示 当 前 选拔 交 术 2seasveeesosneeee snes pon heeronnniininnrinnnn 
以 内 凹 蔡 入 效果 显示 当前 选择 文本 … 

以 线条 描 边 效果 显示 当前 选择 文本 
以 浮雕 镶 底 效果 显示 当前 选择 文本 … 
以 渐变 倒影 效果 显示 当前 选择 文本 … 
以 透明 阴影 效果 显示 当前 选择 文本 … 
设置 文字 边框 创建 詹 空 风格 的 文字 … 
使 用 多 级 阴影 创建 3D 效果 的 文字 
裁剪 圆 形 并 使 文字 环绕 圆 形 边缘 显示 
裁剪 多 边 形 并 使 文字 环绕 其 边缘 显示 … 
通过 组 合 属性 值 实现 加 长 阴影 文字 ……… 
创建 渐变 背景 绘制 上 下 渐变 的 文字 … 
创建 透明 层 绘制 上 下 渐变 的 文字 … 



















将 图 片 颜色 和 文本 颜色 混合 释 加 显示 .46 
使 用 自 定义 字体 显示 手写 文字 …… ee 
设置 边框 线 高 仿 字库 中 的 带 圈 文 字 … 
使 用 自 定义 字体 模拟 LED 文字 风格 … 


在 二 维 平面 中 旋转 单行 的 白色 阴影 文 3 
以 不 同 颜色 显示 汉字 的 上 、 下 两 部 分 
以 不 同 颜色 显示 汉字 的 左 、 右 两 部 分 
模拟 古诗 的 风格 从 上 到 下 显示 文本 aie 
绘制 不 规则 图 形 实现 不 规则 文字 布局 ……………… 
在 段落 文本 的 右上 角 放 置 文字 环绕 图 片 ， 
在 段落 文本 的 左上 角 放 置 文字 环绕 图 片 
在 段落 文本 的 左下 角 放 置 文字 环绕 图 片 … 

对 所 有 段落 的 第 一 个 字 设置 加 大 、 下 沉 效果 ……… 
仅 对 第 一 个 段落 的 首 字 设 置 加 大 、 下 沉 效果 ……… 
在 段落 的 第 一 个 字 的 外 围 设置 阴影 效果 …… 

在 段落 的 第 一 行 字 的 外 围 设置 阴影 效果 …………… 


通过 逐 点 处 理 像素 实现 图 像 底 片 效果 … 
采用 平均 值 法 将 图 像 从 彩色 变 为 灰 度 
使 用 拉 普 拉 斯 模板 实现 锐 化 处 理 图 像 
对 彩色 图 像 进行 灰白 浮雕 的 特效 处 理 
对 彩色 图 像 进行 模糊 化 的 特效 处 理 ……… 
使 用 随机 数 对 图 像 进行 油画 特效 处 理 … 
使 用 随机 数 对 图 像 进行 雾 化 特效 处 理 
选择 不 同 的 组 合 模式 全 加 显示 两 幅 图 像 
选择 不 同 的 混合 模式 全 加 显示 两 幅 图 像 
在 图 像 中 抠 取 某 部 分 并 对 其 进行 局 部 放大 ………… 本 
通过 毕 制 玉 儿 是 的 形状 来 我 前 轩 全 PD 




























采用 均匀 压缩 法 创建 椭圆 并 裁剪 图 像 rg Sn 
通过 绘制 多 个 圆 形 实现 太极 图 案 的 绘制 ， 
在 自 定义 画布 上 模拟 刊 刮 奖 的 刮 奖 特 效 
绘制 局 部 图 像 模拟 水 平 或 垂直 展开 图 像 
绘制 局 部 图 像 模 拟 向 左 、 右 两 端 展开 图 像 
绘制 局 部 图 像 模 拟 以 百叶 窗 风格 展开 图 像 
绘制 局 部 图 像 模 拟 向 上 、 下 两 端 展开 图 像 
对 图 像 进行 水 平 拉 伸 放 大 或 垂直 拉 伸 … 
重新 映射 画布 并 按照 指定 角度 旋转 图 像 
对 彩色 图 像 进行 水 平 镜 像 的 特效 处 理 ……………… 
给 图 像 添加 半 透 明 放 射 圆 形 面 畦 特效 … 

设置 填充 样式 以 平 铺 的 风格 显示 图 像 
将 画布 的 内 容 保存 为 png 格式 的 文件 … 
将 画布 的 内 容 保存 为 jpeg 格式 的 文件 … 
读 取 并 显示 沙 箱 系统 中 的 图 像 文 件 










































以 二 进 制 形 式 读 取 并 显示 本 地 图 像 文件 …… 03 
从 本 地 计算 机 中 选择 图 像 文件 并 全 屏 显 示 04 
将 本 地 图 像 文件 或 文本 文件 拖 放 到 网 页 中 … 05 
通过 超 链 接 的 download 属性 下 载 图 片 … 06 
定制 个 性 化 的 虚线 作为 图 像 的 边框 线 ssn 07 
以 拖 动 图 像 边框 线 的 方式 实现 图 像 缩 放 ………………… 108 
以 拖 动 方式 将 图 像 移动 到 页 面 中 的 任意 位 置 10 
以 拖 归 方 式 自动 调整 九宫 格 中 的 图 像 … 10 
以 固定 长 宽 比例 使 用 鼠标 拖 中 缩放 图 像 112 
在 拖 忠 缩放 图 像 时 限制 拖 忠 的 缩放 范围 nn 113 
在 一 组 图 像 中 获取 使 用 鼠标 选择 的 图 像 …………………………… 114 
在 移动 鼠标 时 反 色 显示 鼠标 指针 周围 的 图 像 16 
在 移动 鼠标 时 模糊 显示 鼠标 指针 周围 的 图 像 玉 
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在 SVG 中 合并 使 用 滤 镜 创建 的 多 个 图 层 
使 用 SVG 的 feTurbulence 滤 镜 创建 图 像 … 
在 一 个 元 素 中 设置 线性 渐变 背景 颜色 
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使 用 关键 帧 动画 实现 雨滴 从 白云 中 下 落 … i 363 
使 用 关键 帧 动画 高 仿 风力 发 电机 的 桨 叶 转 动 的 特效 … 365 
使 用 关键 帧 动画 模拟 彩虹 和 阴影 的 联动 … 366 
使 用 关键 帧 动画 模拟 夜空 中 闪烁 的 星星 … ees 368 
使 用 关键 帧 动画 模拟 夜空 中 下 落 的 流星 雨 pp 369 
使 用 关键 帧 动画 实现 水 波 波纹 扩散 的 效果 370 
使 用 关键 帧 动画 模拟 座 椅 在 地 板 上 滑动 3 
使 用 关键 帧 动画 模拟 内 、 外 圆 环 转动 特效 372 
使 用 关键 帧 动画 实现 带 阴 影 渐 变 进度 条 … ee 373 
使 用 关键 帧 动画 实现 当前 按钮 标题 的 闪烁 显示 pp 374 
使 用 关键 帧 动画 实现 圆 环 转圈 加 载 的 特效 … 

使 用 关键 帧 动画 实现 环绕 矩形 转动 特效 … 

使 用 关键 帧 动画 实现 凸轮 滑动 闪烁 特效 … 





使 用 关键 帧 动画 模拟 立方 体 的 3D 旋转 特效 …… a 
使 用 关键 帧 动画 模拟 多 个 立方 体 的 旋转 Ne 379 
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使 用 关键 帧 动画 模拟 小 圆 点 加 载 的 状态 381 
使 用 关键 帧 动画 实现 以 多 色 圆 环 模拟 加 载 进 度 …………… en i 
使 用 关键 帧 动画 模拟 足球 射门 的 动作 变化 … 

使 用 关键 帧 动画 模拟 雷达 的 动态 扫描 效果 
使 用 关键 帧 动画 模拟 党 虹 灯 文字 的 办 炼 
使 用 关键 帧 动画 实现 3D 效果 的 走马 灯 文 字 … 
使 用 关键 帧 动画 模拟 阴影 跟随 灯光 移动 
使 用 关键 帧 动画 模拟 多 层 波浪 波动 的 效果 
使 用 关键 帧 动画 模拟 生物 在 水 中 的 摆动 
使 用 关键 帧 动画 模拟 碎片 拼接 图 像 特效 
使 用 关键 帧 动画 模拟 地 球 在 太空 中 自转 
使 用 关键 帧 动画 模拟 文字 弹跳 滑 人 页 面 
通过 关键 帧 动画 使 字符 串 呈 现 波浪 抖动 ， 



























使 用 requestAnimFrame() 方 法 动态 绘制 火苗 pp 398 
使 用 requestAnimFrame() 方 法 动态 绘制 桃 心 …………………… … 400 
通过 答 阵 变换 绘制 动态 走动 的 时 钟 …………………… … 401 


通过 绘制 圆 弧 模 拟 风车 叶轮 的 转动 特效 
通过 旋转 绘图 对 象 模拟 高 速 旋 转 的 车 轮 … 
通过 定时 器 改变 HSLA 值 模拟 渐变 的 圆 环 
使 用 蒙 版 高 仿 电波 逐 级 扩散 的 动态 特效 … 
以 动画 形式 模拟 订单 提交 前 的 等 待 状态 
以 文本 缩 进 形式 模拟 等 待 的 变 长 省 略 号 
使 用 收缩 ,扩展 的 形式 平滑 切换 两 个 场景 
以 类 似 翻 书 的 风格 旋转 切换 两 个 场景 … 


… 410 
411 
413 








创建 浙 变色 文字 的 光影 流动 特效 ……… 415 
不 间断 水 平 深 动 显示 序列 中 的 广告 图 片 … … 416 
使 用 计时 器 实现 电话 在 桌面 上 震动 的 特效 … … 418 











使 虚线 边框 线 实现 跑马 灯 滚动 效果 ……… 419 
使 用 定时 器 高 仿 改变 进程 的 图 文 进 度 条 421 
通过 2D 旋转 方式 模拟 走动 的 时 钟表 盘 … 422 
在 单行 菜单 中 以 下 拉 方 式 滑 出 焦点 菜单 … … 425 
在 延迟 指定 时 间 后 执行 显示 或 隐藏 元 素 … 426 





427 
428 
429 


使 用 gif 格式 的 图 像 实现 边框 线 跑 马 灯 效果 
在 页 面 中 嵌入 播放 swf 等 格式 的 动画 文件 
使 用 SVG 矢量 图 形 模拟 水 波 特效 文字 …… 









在 SVG 中 实现 文字 沿 三 角形 的 边线 跑 动 … … 430 
在 SVG 中 实现 文字 沿 螺旋 线 跑 动 消失 ……… … 431 





使 用 SVG 的 animateTransform 旋转 图 像 

使 用 SVG 的 animate 组 合 多 种 动画 特效 … 
使 用 SVG 的 animateMotion 模拟 过 山 车 … 
使 用 SVG 的 animateMotion 模拟 老鼠 逃跑 … deanna aa 
为 超 链 接 提 示 框 实现 爆炸 式 的 关闭 风格 pp 437 
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以 卷 帘 式 风格 关闭 和 显示 超 链接 提示 框 eeeeee 438 
以 滑 和 信 、 滑 出 效果 显示 和 关闭 超 链接 提示 框 ee 

以 扩张 的 效果 显示 和 关闭 超 链接 提示 框 
以 淡 入 、 淡 出 效果 显示 和 关闭 超 链接 提示 框 … 
以 膨胀 的 效果 显示 和 关闭 超 链 接 提示 杠 
以 闪烁 的 效果 显示 和 关闭 超 链 接 提示 杠 
以 缩放 的 效果 显示 和 关闭 超 链 接 提示 杠 
以 弹跳 的 效果 显示 和 关闭 超 链接 提示 框 
以 高 亮 的 效果 显示 和 关闭 超 链 接 提示 杠 ee 
以 震动 的 效果 显示 和 关闭 超 链接 提示 框 ee 
以 抽 屋 滑动 的 效果 显示 和 关闭 超 链 接 提示 入 
在 显示 日 期 选择 器 时 附加 弹跳 动画 效果 55 


通过 拖 动 滑 块 方式 改变 视频 的 播放 进度 … 
在 播放 视频 .音频 时 同步 显示 关联 字幕 
以 一 定 的 角度 旋转 正在 播放 的 视频 窗口 
在 垂直 方向 上 翻转 正在 播放 的 视频 图 像 … 
在 水 平方 向 上 镜像 正在 播放 的 视频 图 像 … 
在 垂直 方向 上 压缩 视频 产生 宽屏 幕 效 果 
访问 摄像 头 并 单 击 截取 视频 中 的 图 像 
使 用 article 元 素 嵌 入 文件 来 播放 视频 
在 页 面 中 播放 mp4 等 格式 的 多 媒体 文件 
使 用 滤 镜 改变 视频 图 像 的 颜色 透明 度 … 
通过 滤 镜 使 视频 图 像 产 生 怀 旧 的 风格 … 
通过 色相 旋转 使 视频 图 像 显 示 重 组 色彩 … ni 
通过 设置 饱和 度 改变 (淡化 ) 视 频 图 像 的 颜色 …………………… 
反 转 颜色 使 视频 图 像 产生 底片 的 特效 
改变 对 比 度 突出 显示 视频 图 像 的 颜色 … 
改变 明亮 度 提高 视频 图 像 的 呈现 颜色 … 
改变 模糊 度 使 视频 图 像 呈 现 虚 化 特效 
改变 灰 度 使 视频 图 像 呈现 黑白 效果 ……… 
全 屏 播放 视频 或 退出 全 屏 正常 播放 视频 … 
以 折 生 或 展开 风格 显示 标题 或 者 详细 内 容 pe 476 
以 分 组 形式 显示 下 拉 列 表 框 中 的 选项 Pr edi 

为 下 拉 列 表 框 中 的 选项 添加 关联 辅助 信息 
使 用 png 图 像 自 定义 下 拉 列 表 框 的 向 下 箭头 
模拟 下 拉 列 表 框 的 风格 创建 下 拉 式 菜单 … 
以 拖 电 方式 将 菜单 项 插入 新 的 位 置 和 an 
以 拖 电 方式 增加 和 移 除 两 个 列表 的 选项 RN 481 
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以 拖 放风 格 实现 在 元 素 之 间 传 递 数据 
创建 两 个 滑 块 控件 从 两 端 改 变数 值 范围 … 








创建 上 限 固定 ,下限 可 调节 的 范围 滑 块 控件 … ig8 
创建 下 限 固定 .上 限 可 调节 的 范围 滑 块 控件 … 489 
以 拖 动 range 滑 块 方式 改变 字体 的 大 小 a 
创建 图 形 和 文字 结合 的 进度 条 显示 进程 … ed 





使 用 meter 模拟 progress 的 进度 显示 … 
在 进度 条 上 显示 进度 完成 的 百分比 值 ne 
使 用 随机 色 设 置 不 确定 进度 条 的 背景 颜色 ………… 











494 
通过 设置 按钮 的 阴影 属性 创建 浙 变 色 按钮 ……………… 495 
通过 设置 按钮 的 阴影 属性 创建 中 心 扩散 按钮 ……………… 495 





使 用 盒子 阴影 创建 金属 质感 的 立体 按钮 … 
将 默认 的 3D 风格 按钮 重 置 为 扁平 化 按钮 
使 用 radio 单 选 按钮 隐藏 或 者 显示 内 容 
使 用 appearance 属性 将 超 链 接 显示 为 按钮 … 
在 日 期 选择 器 中 实现 年 份 和 周 数 的 选择 
在 日 期 选择 器 中 实现 年 份 和 月 数 的 选择 … 
在 日 期 选择 器 中 实现 年 .月 .日 信息 的 选择 
在 日 期 选择 器 中 显示 年 份 下 拉 列 表 …… 
在 日 期 选择 器 中 显示 月 份 下 拉 列 表 





… 500 













创建 可 显示 和 选择 多 月 份 的 日 期 选择 器 …… 505 
自动 校 验 在 范围 内 设置 的 年 月 .日 信息 506 
自动 校 验 用 户 设置 的 小 时 数 和 分 钟 数 … 507 
自 定义 在 日 期 选择 器 中 选择 的 日 期 格式 508 
在 日 期 选择 器 中 设置 可 选择 的 日 期 范围 509 
在 日 期 选择 器 中 禁止 选择 周末 两 天 日 期 … … 510 


判断 选择 的 日 期 在 一 年 中 处 于 第 几 周 … 5 
实现 在 颜色 选择 器 中 选择 颜色 设置 背景 … 
使 用 radio 单 选 按钮 实现 纯 CSS 选项 卡 
创建 标签 在 左 侧 排 列 的 纵向 风格 选项 卡 
创建 在 标签 右 侧 包含 “关闭 ”按钮 的 选项 卡 


创建 通过 底部 的 标签 进行 导航 的 选项 卡 …… 


513 








… 517 





























实现 鼠标 指针 悬浮 在 选项 卡 标签 上 时 切换 对 应 内 容 520 
以 拖 暇 方式 在 选项 卡 中 增加 、 移 除 选项 … 521 
使 用 方向 键 在 表格 的 输入 框 间 跳 转 528 
使 用 固定 算法 等 距 分 配 表格 的 列 宽 525 
使 用 省 略 号 代替 固定 表格 列 宽 的 长 字符 526 


在 表格 的 标题 及 单元 格 上 添加 阴影 效果 … 
使 用 JSON 传递 的 天 气 数据 自动 填充 表格 
以 模 态 方式 显示 对 话 框 并 获取 其 返回 值 本 
创建 包含 “确认 ”和 “取消 ”按钮 的 模式 对 话 框 pp 531 
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创建 可 自 定义 标 题 栏 的 "关闭 " 按 钮 的 对 话 框 | 532 
为 超 链接 创建 自 定义 风格 的 工具 提示 框 Sd ee 

使 用 阴影 滤 镜 创建 带 指示 箭头 的 提示 框 
通过 图 形 拼接 的 方式 创建 气泡 式 提示 框 
使 用 透明 的 线性 渐变 创建 切 角 提示 框 
使 用 透明 的 径 向 渐变 创建 内 贺 角 提示 框 … 
通过 蚕 加 的 方式 创建 箭头 风格 的 提示 框 
使 用 attr() 方 法 将 属性 值 传递 给 提示 框 … 
通过 可 选 数据 列表 在 文本 框 中 插入 内 容 …… 





















使 用 数据 源 实现 文本 框 的 自动 完成 功能 See 
为 自动 完成 文本 框 的 下 拉 列 表 框 添加 滚动 条 ………………… 543 
对 自动 完成 文本 框 的 下 拉 选 项 进行 分 类 … 544 
启用 或 禁用 文本 框 的 自动 完成 功能 

禁止 用 户 在 文本 框 中 粘贴 剪 切 板 的 内 容 … ee 546 
允许 或 禁止 对 文本 框 中 的 单词 进行 拼写 检查 ………………… 547 
设置 pattern 属性 规范 文本 框 中 数据 的 输入 ………………………… 548 


在 文本 框 中 设置 灰色 的 输入 提示 信息 
在 提交 表单 时 自动 检查 无 内 容 的 文本 框 
在 提交 表单 时 校 验 文本 框 中 的 电子 邮箱 
在 提交 表单 时 校 验 文本 框 中 的 网 址 格式 … 
在 提交 表单 时 校 验 文本 框 中 的 数字 范围 
在 文本 框 获得 焦点 时 显示 发 光 的 边框 线 … 
通过 autofocus 属性 设置 当前 文本 框 … 
通过 label 的 control 属性 访问 文本 框 
使 段落 文本 实现 类 似 文本 框 的 编辑 功能 
在 单个 段落 中 使 用 省 略 号 代替 超 长 文本 
在 可 滚动 段落 底部 添加 渐变 透明 遮 单 层 
使 用 textarea 的 拖 电 标 志 实现 CSS 交互 
获取 在 textarea 中 使 用 鼠标 选择 的 文本 … 

通过 禁止 选择 文本 来 实现 禁止 复制 内 容 ， 

通过 设置 oncopy() 的 返回 值 禁止 复制 内 容 … 
允许 或 禁止 超 长 的 数字 或 者 单词 跨行 显示 … 
设置 元 素 中 所 有 单词 的 首 字母 是 否 大 写 
设置 段落 中 的 部 分 文字 是 否 带 下 画 线 … 
对 段落 中 的 部 分 文字 添加 自 定 义 的 下 画 线 



























创建 背景 符号 对 文本 自 定义 下 画 线 566 
使 用 自 定义 的 波浪 线 设置 文本 的 下 画 线 … 567 
通过 background-image 创建 下 画 线 …… 568 
以 红色 波浪 线 代 替 显 示 超 链接 的 下 画 线 … 569 
为 指定 的 超 链 接 同时 设置 下 画 线 和 删除 线 570 


通过 start 自 定义 有 序列 表 的 开始 编号 SO masshaidsapss 
通过 reversed 实现 有 序列 表 的 倒序 编号 65ers 571 











通过 计数 器 对 目录 的 章节 进行 自动 编号 teenieisentrorininer ni 572 
通过 计数 器 自动 统计 所 选择 复 选 框 的 数量 ……………… i Ns 

在 同 级 子 元 素 前 面 插入 自 增 的 数字 编号 … 

在 同 级 子 元 素 前 面 插入 自 增 的 字母 编号 
在 同 级 子 元 素 前 面 插 人 自 增 的 罗马 数字 
在 父子 关系 的 结构 中 对 子 元 素 典 套 编号 
仿照 图 书目 录 对 多 级 结构 元 素 嵌 套 编号 
在 字符 串 两 边 添加 典 套 的 对 称 文字 符号 
使 用 图 像 蔡 换 无 序列 表 的 列表 项 标记 

在 多 个 条 目 中 获取 使 用 鼠标 选择 的 条 目 
使 用 伪 元 素 重 置 默认 的 颜色 选择 器 按钮 
使 用 伪 元 素 定制 日 期 选择 器 的 部 分 样式 … 
使 用 伪 元 素 重 置 文件 上 传 按钮 的 样式 … 
使 用 伪 元 素 去 掉 数 字 选 择 器 的 上 、 下 按钮 
使 用 伪 元 素 重 置 range 元 素 的 滑 块 、 滑 槽 
使 用 伪 元 素 重 置 progress 元 素 的 样式 

使 用 伪 元 素 自 定义 滚动 条 的 轨道 等 样式 
使 用 伪 元 素 定制 默认 滚动 条 的 显示 样式 … 
使 用 伪 元 素 定 制 密 钥 对 生成 器 字段 的 样式 
使 用 伪 元 素 自 定 义 meter 度量 衡 的 样式 … 
使 用 伪 元 素 重 置 placeholder 占 位 符 ……… 
使 用 伪 元 素 隐 藏 搜索 框 右 侧 的 取消 按钮 … 
使 用 伪 元 素 使 range 滑 槽 呈现 渐变 色 

使 用 伪 元 素 自 定义 渐变 色 风 格 的 滚动 条 
使 用 伪 元 素 实现 莹 形 滑 块 的 range 元 素 
通过 for 属性 自 定义 默认 的 复 选 框图 标 
通过 设置 五 星 字 符 的 颜色 实现 星 级 评分 
实现 以 不 同 的 颜色 代表 不 同 的 星 级 评分 
自 定义 光标 模拟 粉笔 在 黑板 上 涂鸦 … 
允许 用 户 使 用 拖 动 方式 重 置 元 素 的 尺寸 
创建 距离 活动 结束 的 剩余 时 间 倒 计时 牌 


动态 重 置 盒 布 局 中 各 列 内容 的 顺序 … 
动态 重 置 盒 布局 中 各 列 内 容 的 方向 
使 单行 文本 在 垂直 方向 上 位 于 盒子 的 正中 … 
在 图 像 (盒子 ) 的 上 端 、 下 端 居 中 显示 文本 … 
动态 重 兽 弹性 盒 中 子 元 素 的 排列 方式 … 
动态 重 兽 弹性 盒 中 子 元 素 的 对 齐 方式 … 
设置 弹性 盒 元 素 沿 水 平方 向 等 距 对 齐 … 
根据 收缩 因子 分 配 弹 性 盒 的 子 元 素 空 间 pe 
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第 7 部 分 


使 用 弹性 盒 控制 文本 始终 显示 在 正中 间 
指定 子 元 素 分 配 弹性 盒 的 纵向 剩余 空间 … 
指定 子 元 素 分 配 弹性 盒 的 横向 剩余 空间 
允许 弹性 盒 的 子 元 素 具 有 自动 换行 功能 … 
纵向 拉 伸 对 齐 弹 性 盒 中 的 各 个 子 元 素 
根据 比例 分 配 弹性 盒 的 子 元 素 剩余 空间 rs 
保持 子 元 素 在 水 平方 向 上 始终 位 于 容器 的 正中 … 

















通过 object-position 属性 控制 子 元 素 在 容器 中 的 位 置 … 631 
在 水 平方 向 上 居中 显示 容器 中 的 子 元 素 … ea 632 
自 定义 子 元 素 在 父 容器 中 的 自 适 应 模式 633 
使 用 cale() 实 现 元 素 与 容器 的 同步 变化 … 





使 用 column-rule 属性 设置 列 分 隔 样 式 …… 
保持 子 元 素 在 水 平和 垂直 方向 上 始终 位 于 正中 
在 垂直 方向 上 居中 显示 在 一 行文 本 中 插入 的 图 像 
等 间距 排列 一 行 中 的 各 个 图 像 (元素 ) 

调整 多 个 元 素 在 垂直 方向 上 的 间隔 距离 
自 定 义 子 元 素 在 水 平方 向 上 的 排列 方向 … 
允许 或 禁止 与 相 邻 同 级 元 素 的 float 关系 
使 用 多 列 布局 实现 元 素 内 容 的 分 多 列 显 示 
自 定义 多 列 布局 的 列 与 列 之 间 的 分 隔 样 式 ee 
使 用 盒 布 局 解决 多 列 底部 不 能 对 齐 的 问题 pp a 
在 自 适应 多 列 布局 中 决定 是 否 开 启 新 列 …… 647 
在 自 适应 多 列 布局 中 决定 是 否 强制 开启 新 列 
使 用 随机 数 模 拟 照片 墙 的 多 图 散 列 布局 … 
使 用 随机 数 模拟 瀑布 流风 格 的 多 图 布局 ee i 
通过 调整 列 宽 将 横向 文字 变 为 纵向 文字 es 652 

















641 






650 








使 用 first-line 选择 器 定制 文本 的 首 行 样式 pp 654 
使 用 first-letter 选择 器 定制 文本 的 首 字样 式 pp 655 


使 用 before 选择 器 在 元 素 之 前 插入 内 容 …… 
使 用 before 选择 器 在 页 面 顶端 添加 阴影 
使 用 before 选择 器 创建 图 文 并 列 的 按钮 … 
使 用 after 选择 器 创建 箭头 风格 的 提示 框 … 
使 用 focus 选择 器 设置 焦点 文本 框 的 边框 线 … 
使 用 selection 选择 器 突出 显示 选中 文本 … 
使 用 hover 选择 器 定制 选中 元 素 的 样式 …… 
使 用 empty 选择 器 定制 元 素 内 容 空白 时 的 样式 
使 用 not 选择 器 自 定义 子 结构 元 素 的 样式 
使 用 only-child 选择 器 定制 唯一 子 元 素 I ee 
使 用 iste 这 议 摊 案 定 制 开 靖 也 元 染 0 6 
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第 9 部 分 


使 用 last-child 选择 器 定制 末尾 子 元 素 pp 665 
使 用 nth-child 选择 器 定制 指定 序号 元 素 和 

使 用 nth-last-child 选择 器 定制 倒数 元 素 … 
使 用 target 选择 器 定制 目标 元 素 的 样式 
使 用 属性 选择 器 筛选 超 链接 并 追加 内 容 
使 用 属性 选择 器 筛选 超 链接 并 插入 元 素 
使 用 属性 选择 器 筛选 超 链接 并 禁止 插入 
使 用 属性 选择 器 筛选 数据 实现 列表 过 滤 … 

















使 用 兄弟 选择 器 定制 同 级 指定 元 素 的 样式 pp 673 
使 用 选择 器 定制 元 素 的 奇数 子 元 素 的 样式 pp 674 
使 用 选择 器 定制 元 素 的 偶数 子 元 素 的 样式 pp 675 
使 用 选择 器 定制 元 素 的 倍数 子 元 素 的 样式 … 676 





使 用 选择 器 实现 表格 隔行 错 色 显示 …………… 
使 用 选择 器 实现 下 拉 列 表 框 的 选项 隔行 错 色 显示 
使 用 选择 器 定制 超 范围 文本 框 的 显示 样式 … 
















使 用 选择 器 实现 内 圆 弧 化 的 渐变 曲线 图 形 …………… 679 
使 用 选择 器 绘制 扇形 样式 的 多 级 彩虹 680 
使 用 选择 器 将 按钮 拆 分 成 左 、 右 两 部 分 681 





存储 83 
使 用 localStorage 读 取 或 保存 本 地 数据 …………………… 683 
使 用 localStorage 修改 和 保存 表格 数据 ………………………ee 
在 本 地 保存 文件 时 申请 和 查询 磁盘 配额 
在 本 地 计算 机 中 创建 文件 并 读 / 写 文件 内 容 
将 本 地 计算 机 中 的 多 个 文件 复制 到 沙 箱 系 统 














删除 受 浏览 器 保护 的 沙 箱 系统 中 的 指定 文件 ………………… 693 
在 本 地 沙 箱 文件 系统 中 创建 目录 及 其 文件 ………………… 695 





在 沙 箱 系统 中 使 用 递归 函数 创建 多 级 目录 
获取 沙 箱根 目录 下 的 子 目 录 及 其 文件 … 
在 沙 箱 文件 系统 中 删除 目录 及 其 文件 … 
在 沙 箱 系统 中 实现 目录 之 间 的 文件 复制 … 全 eh a 
在 裕 箱 文件 系统 中 重 命 名 指定 的 普 件 eee 706 








使 用 @media 查询 创建 响应 式 页 面 布局 709 
使 用 @media 查询 创建 响应 式 表格 布局 … Ka 
使 用 png 图 像 重 置 默认 的 鼠标 指针 形状 713 





在 全 屏 显示 模式 下 锁定 和 解锁 鼠标 指针 
全 屏 显 示 页 面 或 使 页 面 退 出 全 屏 模 式 … 
创建 自 定义 右键 菜单 代替 默认 右键 菜单 … 
通过 上 下 文 菜单 返回 值 禁 止 使 用 右键 菜单 resinlsaass 
全 用 字符 编 公 解决 中 文字 符 的 对 齐 问题 Ys 9 
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实现 十 六 进 制 编码 和 中 文字 符 的 相互 转换 ee 719 
使 用 meta 元 信息 实现 页 面 的 定时 跳 转 与 刷新 ………… 01 
实现 单 击 网 页 的 任意 位 置 立即 触发 广告 … 
通过 使 用 滤 镜 特效 实现 灰色 主题 的 网 页 
使 用 MutationObserver 监视 DOM 变化 











允许 或 禁止 背景 跟随 浏览 器 的 滚动 条 滚动 … 6 
在 百度 地 图 中 根据 经 度 和 纬度 指示 位 置 .. 726 
在 关闭 页 面前 弹出 消息 框 提示 用 户 确认 .. 728 





001 在 画布 上 创建 向 上 的 3D 拉 影 文字 


此 实例 主要 通过 设置 阴影 属性 值 实现 在 画布 上 创建 向 上 3D 拉 影 的 特效 文字 
示 该 页 面 时 , 单 
字 “ 炫 酷 实 例 集锦 ”, 如 图 001-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 








百 - Do x 
国 lecalhost63342/myWor x 
© DB localhost63342/myWork/myHtml 安 三 


在 国 布 上 创建 向 上 3D 拉 影 的 特 部 文字 | 











图 001-1 


<! doctype html >< html >< head >< meta charset = UTF -8> 
<script src = "js/jquery — 3.1.1.min. js"></script >< script language = "javascript"> 
$ (document). ready(function() { 
$ ("#myBtn"). click(function() { // 在 画布 上 创建 向 上 3D 拉 影 的 特效 文字 
var myCanvas = document. getElementById( "myCanvas" ); 
Var myContext = myCanvas. getContext( '2d' ); 
myContext. font = '40pt 宋体 '; 
var myHeight = 0; 
myContext. fillStyle = "black"; 
myContext. fillRect(0, myHeight, 410, 130); 
for (var i=0; i<10; i++) { 
myContext. shadowColor = "rgba(255, 255, 255," + ((10— i)/10) + ")"; 
// 特 效 文 字 一 
myContext. shadowOffsetX = ix2; 
myContext. shadowOffsetY= ix*2; 
// 特 效 文字 二 
//myContext. shadowOffsetX = — i*2; 


文字 


当 在 浏览 器 中 显 


在 画布 上 创建 向 上 3D 拉 影 的 特效 文字 ”按钮 ,将 在 下 面 显示 向 上 3D 拉 影 的 特效 文 
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//myContext. shadowOffsetY = — i*2; 
myContext. shadowBlur = i* 2; 
myContext. fillStyle = "rgba(127, 127, 127, 1)"; 
myContext.fillText(" 炫 酷 实 例 集锦 "，40，80 + myHeight); 
} ;1); 
</script ></head> 

<body><p>< input type = "button” value = "在 画布 上 创建 向 上 3D 拉 影 的 特效 文字 " id = "myBtn" style = 

"width: 410px"></p> 

<canvas id= "myCanvas" width= "410" height = "130"></canvas ></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,shadowColor 表示 设置 画布 的 阴影 
颜色 ; shadowOffsetX 表示 阴影 相对 于 文字 的 水 平 距离 .0 表示 两 者 水 平 位 置 重合 ; shadowOffsetY 
表示 阴影 相对 于 文字 的 垂直 距离 ,0 表示 两 者 垂直 位 置 重合 ; shadowBlur 表示 阴影 模糊 效果 , 值 越 大 
模糊 越 厉害 。fillText() 方 法 用 于 在 画布 上 绘制 填 色 的 文字 .文字 的 默认 颜色 是 黑色 ,该 方法 的 语法 声 
明 如 下 。 


fillText (text, x, y, maxWidth); 


其 中 ,参数 text 用 于 规定 在 画布 上 输出 的 文字 ; 参数 x 表示 开始 绘制 文字 的 x 坐标 位 置 ( 相 对 于 






画布 ); 参数 y 表示 开始 绘制 文字 的 y 坐标 位 置 (相对 于 画布 ); 参数 maxWidth 是 可 选 参数 ,表示 多 
许 的 最 大 文字 宽度 ,以 像素 计算 。 


此 实例 的 源 文 件 名 是 myHtmlA058. html。 


002 在 画布 上 创建 向 下 的 3D 拉 影 文字 


此 实例 主要 通过 设置 阴影 属性 值 实现 在 画布 上 创建 向 下 3D 拉 影 的 特效 文字 。 当 在 浏览 器 中 显 
示 该 页 面 时 , 单 击 "在 画布 上 创建 向 下 3D 拉 影 的 特效 文字 "按钮 将 在 下 面 显示 向 下 3D 拉 影 的 特效 文 
字 “ 炫 酷 实 例 集锦 ”, 如 图 002-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 








国 ,ccalhost63342/mywcv x 


© DB localhost63342/myWork/myHtm 安 


在 画布 上 创建 向 下 3D 拉 影 的 特效 文字 














图 002-1 


<!doctype html >< html >< head >< meta charset = UIF - 8> 
< script src="js/jquery -3.1.1.min.js"></script >< script language = " javascript"> 
$ (document). ready(function() { 
$ ("#myBtn"). click(function() { // 在 画布 上 创建 向 下 3D 拉 影 的 特效 文字 
var myCanvas = document. getElementById( "myCanvas" ); 
Var myContext = myCanvas. getContext( '2d' ); 
myContext. font = '40pt 宋体 '; 


第 1 部 分 x 《> 





var myHeight = 0; 
myContext. fillStyle = "black"; 
myContext. fillRect(0, myHeight, 410, 130); 
for (var i=0; i<10; i++) { 
myContext. shadowColor = "rgba(255, 255, 255,"+((10—i)/10) + ")"; 
myContext. shadowOffsetX = 0; 
myContext. shadowOff setY 
myContext. shadowBlur = i x 2; 
myContext. fillStyle= "rgba(127, 127, 127, 1)"; 
myContext. fillText(" 炫 酷 实例 集锦 "，40,，80 + myHeight); 
} 721); 
</script ></head > 
<body><p>< input type = "button”" value = "在 画布 上 创建 向 下 3D 拉 影 的 特效 文字 "id = "myBtn" style = 
"width:410px"></p> 
<canvas id= "myCanvas" width= "410" height = "120"> </canvas ></body></html> 





ix2; 


上 面 有 底 纹 的 代码 是 此 实例 的 代码 。 在 该 部 分 代码 中 ,shadowColor 表示 设置 画布 的 阴影 
adowOffsetY 表示 阴影 相对 于 文字 的 垂直 距离 .0 表示 两 者 垂直 位 置 重合 , 当 shadowOffsetY 
值 为 正 数 时 产生 的 阴影 文字 向 上 , 当 shadowOffsetY 值 为 负数 时 产生 的 阴影 文字 向 下 ; shadowBlur 
i 影 模 糊 效果 , 值 越 大 模糊 越 厉害 

实例 的 源 文件 名 是 myHtmlA059. html 


003 在 画布 上 创建 向 左 或 向 右 的 3D 拉 影 文 


此 实例 主要 通过 设置 阴影 属性 值 实现 在 画布 上 创建 向 左 或 向 右 的 3D 拉 影 的 特效 文字 。 当 在 浏 
览 器 中 显示 该 页 面 时 , 单 击 “ 在 画布 上 创建 向 左 3D 拉 影 的 特效 文字 ”按钮 将 在 下 面 显示 向 左 3D 拉 影 
的 特效 文字 " 炫 醋 实例 集锦 ”, 如 图 003-1 所 示 ; 单 击 “ 在 画布 上 创建 向 右 3D 拉 影 的 特效 文字 ”按钮 将 在 
下 面 显示 向 右 3D 拉 影 的 特效 文字 ”* 炫 酷 实例 集锦 ”, 如 图 003-2 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 








百 - oo x 面 = 0o x 
国 localhost63342/myWor x 国 localhost63342/myWor x 
c localhost63342/myWorky/myHtn 安 三 C localhost63342/myWork/myHtn 它 三 
在 较 布 上 创建 向 左 3D 拉 妹 的 桂 站 文字 在 罗布 上 创建 向 左 3D 拉 影 的 特效 文字 
在 画布 上 创建 向 右 3D 拉 影 的 检 薄 文字 在 画布 上 创建 向 右 3D 拉 彩 的 怕 浆 文字 




















图 003-1 图 003-2 


<!doctype html >< html ><head ><meta charset = UTF - 8> 
< script src="js/jquery -3.1.1.min.js"></script >< script language = " javascript"> 
$ (document). ready(function() { 
function myEffect(myDir) { 
var myCanvas = document. getElementById( "myCanvas" ); 
Var myContext = myCanvas. getContext( '2d' ); 
myContext. font = '40pt 宋体 '; 
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var myHeight = 0; 
myContext. fillStyle = "black"; 
myContext. fillRect(0, myHeight, 410, 130); 
for (var i=0; i<10; it++) { 
myContext. shadowColor = "rgba(255, 255, 255,"+((10—i)/10) + ")"; 
if(myDir == "Left"){ 
myContext. shadowOffsetX= ix 2; 
}else{ 
myContext. shadowOffsetX=— ix 2; 
} 
myContext. shadowOffsetY= 0; 
myContext. shadowBlur = i* 2; 
myContext. fillStyle= "rgba(127, 127, 127, 1)"; 
myContext.fillText(" 炫 酷 实 例 集锦 "，40，80 + myHeight); 
I 
$ ("#myBtnLeft").click(function() { // 在 画布 上 创建 向 左 3D 拉 影 的 特效 文字 
myEffect("Left"); 
}); 
$ ("#myBtnRight"). click(function() { // 在 画布 上 创建 向 右 3D 拉 影 的 特效 文字 
myEffect("Right" ); 
1)2}); 
</script ></head > 
<body><p>< input type= "button" value= "在 画布 上 创建 向 左 3D 拉 影 的 特效 文字 ”id = "myBtnLeft”style = 
"width:410px"></p> 
<p>< input type ="button”value = "在 画布 上 创建 向 右 3D 拉 影 的 特效 文字 ”id = "myBtnRight”style = 
"width:410px"></p> 
<canvas jd = "myCanvas" width = "410" height = "120"></canvas ></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,shadowColor 表示 设置 画布 的 阴影 
颜色 ; shadowOffsetX 表示 阴影 相对 于 文字 的 水 平 距离 .0 表示 两 者 水 平 位 置 重合 , 当 shadowOffsetX 
值 为 正 数 时 产生 的 阴影 文字 向 左 , 当 shadowOffsetX 值 为 负数 时 产生 的 阴影 文字 向 右 ; shadowBlur 
表示 阴影 模糊 效果 , 值 越 大 模糊 越 厉 害 

此 实例 的 源 文件 名 是 myHtmlA060. html 


004 在 画布 上 创建 模糊 阴影 的 文字 


此 实例 主要 通过 设置 阴影 属性 值 实现 在 画布 上 创建 具有 模糊 阴影 的 特效 文字 。 当 在 浏览 器 中 显 
TE 单 击 “ 在 画布 上 创建 模糊 阴影 的 特效 文字 ”按钮 将 在 下 面 显示 具有 模糊 阴影 的 特效 文字 
炫 酷 实 例 集锦 ”, 如 图 004-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 


西 一 下 x 
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图 004-1 


第 1 部 分 文字 





<!doctype html >< html >< head >< meta charset = UIF -8> 
< script src="js/jquery— 3.1.1.min.js"></script >< script language= "javascript"> 
$ (document). ready(function() { 
$ ("#myBtn").click(function() { // 在 画布 上 创建 模糊 阴影 的 特效 文字 
var myCanvas = document. getElementById( "myCanvas" ); 
var myContext = myCanvas. getContext( '2d' ); 
myContext. font = '40pt 宋体 '; 
var myHeight = 0; 
myContext. fillStyle = "black"; 
myContext. fillRect(0, myHeight, 410, 130); 
myContext. shadowColor = "white"; 
myContext. shadowOff setX = 0; 
myContext. shadowOff setY = 0; 
myContext. shadowBlur = 20; 
myContext. fillText(" 炫 酷 实 例 集锦 "，40，80); 
myContext. strokeStyle = "rgba(0, 255, 0, 1)"; 
myContext. lineWidth = 1; 
myContext. strokeText(" 炫 酷 实 例 集锦 "，40，80); 
D2;}); 
</script ></head > 
<body><p><input type= "button" value = "在 画布 上 创建 模糊 阴影 的 特效 文字 " id= "myBtn" style = "width: 
410px"></p> 
<canvas id= "myCanvas" width= "410”height = "120"></canvas ></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,shadowColor 表示 设置 画布 的 阴影 
颜色 ; shadowOffsetX 表示 阴影 相对 于 文字 的 水 平 距离 ; shadowOffsetY 表示 阴影 相对 于 文字 的 垂直 
距离 ; shadowBlur 表示 阴影 模糊 效果 , 值 越 大 模糊 越 厉害 。fillText() 方 法 用 于 在 画布 上 绘制 填 色 的 
文字 。strokeText() 方 法 用 于 在 画布 上 绘制 文本 (没有 填 色 ) ,该 方法 的 语法 声明 如 下 。 

strokeText (text, x,y, maxWidth); 

其 中 ,参数 text 规定 在 画布 上 输出 的 文本 ; 参数 x 表示 开始 绘制 文本 的 x 坐标 位 置 (相对 于 面 
布 ); 参数 y 表示 开始 绘制 文本 的 y 坐标 位 置 ( 相 对 于 画布 ); 参数 maxWidth 是 可 选 参 数 ,表示 允许 
的 最 大 文本 宽度 ,以 像素 计算 。 

此 实例 的 源 文 件 名 是 myHtmlA061. html。 


005 ”在 画布 上 创建 边缘 羽化 的 文字 


此 实例 主要 通过 设置 shadowColor、 3 - 百 - oo x 
shadowOffsetX、shadowOffsetY、shadowBlur 等 阴 er 

影 属 性 值 基 于 3D 拉 影 效果 在 4 个 方向 上 重复 ,从 
而 实现 在 画布 上 创建 字体 边缘 羽化 的 特效 文字 。 在 本 有 上 人 于 雹 全 胃 化 的 村 红字 - 
当 在 浏览 器 中 显示 该 页 面 时 , 单 击 “ 在 画布 上 创建 
边缘 羽化 的 特效 文字 ”按钮 将 在 下 面 显示 具有 边缘 
羽化 的 特效 文字 “ 炫 酷 实 例 集锦 ”, 如 图 005-1 所 
示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 005-1 
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<!doctype html >< html >< head>< meta charset = UTF -8> 
<script src = "js/jquery 一 3.1.1.min. js"></script>< script language= "javascript"> 
$ (document) .ready(function() { 
$(" 井 myBtn").click(function() { // 在 画布 上 创建 边缘 羽化 的 特效 文字 
var myCanvas = document. getElementById( "myCanvas" ); 
var myContext = myCanvas. getContext( '2d' ); 
myContext. font = '40pt 宋体 '; 
var myHeight = 0; 
myContext. fillStyle = "green" ; 
myContext. fillRect(0, myHeight, myCanvas.width, 130); 
for(var i=0; i<10; it+){ 
// 设 置 画布 的 阴影 颜色 
myContext. shadowColor = "rgba(255, 255, 255,"+((10—i)/10) + ")"; 
// 设 置 阴 影 相 对 于 文字 的 水 平 距离 
myContext. shadowOffsetX= 0; 
// 设 置 阴影 相对 于 文字 的 垂直 距离 
myContext. shadowOffsetY=— ix*2; 
// 设 置 阴影 模 糊 效 果 , 值 越 大 模糊 越 历 害 
myContext. shadowBlur = i* 2; 
// 设 置 文字 颜色 
myContext.fillStyle= "rgba(127, 127, 127, 1)"; 
myContext.fillText(" 炫 酷 实 例 集锦 "，40，80 + myHeight); 
} 
for(var i=0; i<10; i++){ 
myContext. shadowColor = "rgba(255, 255, 255," + ((10—i)/10) + ")"; 
myContext. shadowOffsetX = 0; 
myContext. shadowOffsetY= ix27 
myContext. shadowBlur = i x* 2; 
myContext. fillStyle = "rgba(127, 127, 127, 1)"; 
myContext.fillText(" 炫 酷 实例 集锦 "，40，80 + myHeight); 
} 
for(var i=0; i<10; i++){ 
myContext. shadowColor = "rgba(255, 255, 255,"+((10—i)/10) + ")"; 
myContext. shadowOffsetX= ix27 
myContext. shadowOffsetY = 0; 
myContext. shadowBlur = ix* 2; 
myContext. fillStyle= "rgba(127, 127, 127, 1)"; 
myContext.fillText(" 炫 酷 实 例 集锦 "，40，80 + myHeight); 
} 
for(var i=0; i<10; i++){ 
myContext. shadowColor = "rgba(255, 255, 255," + ((10— i)/10) + ")"; 
myContext. shadowOffsetX=— ix2; 
myContext. shadowOffsetY = 0; 
myContext. shadowBlur = ix* 2; 
myContext. fillStyle= "rgba(127, 127, 127, 1)"; 
myContext.fillText(" 炫 酷 实 例 集锦 "，40，80 + myHeight); 
} D7}); 
</script ></head> 
<body><p><input type="button” value= "在 画布 上 创建 边缘 羽化 的 特效 文字 ”id = "myBtn" style = "width: 
410px"></p> 
<canvas jd = "myCanvas" width= "410" height = "120"></canvas ></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 此 实例 的 源 文件 名 是 myHtmlA062. html。 
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006 ”在 画布 上 创建 空心 线条 的 文字 


此 实例 主要 通过 设置 strokeStyle 和 fillStyle 属性 实现 在 画布 上 创建 空心 线条 的 特效 文字 。 当 在 
浏览 器 中 显示 该 页 面 时 , 单 击 “ 在 画布 上 创建 空心 线条 的 特效 文字 "按钮 将 在 下 面 显示 具有 空心 线条 
的 特效 文字 “ 炫 酷 实例 集锦 ”, 如 图 006-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 

百 sh 0 x 
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[ 在 画布 上 创建 空心 线条 的 特效 文字 ] 


炫 酷 实 例 集锦 








图 006-1 


<!doctype html ><html ><head >< meta charset = UTF -8> 
<script src= "js/jquery -3.1.1.min. js"></script >< script language = "javascript"> 
$ (document). ready(function() { 
$ ("#myBtn"). click(function() { // 在 画布 上 创建 空心 线条 的 特效 文字 
var myCanvas = document. getElementById("myCanvas" ); 
var myContext = myCanvas. getContext( '2d' ); 
myContext. font = '40pt 宋体 '; 
var myHeight = 0; 
myContext. fillStyle = "white"; // 设 置 背景 颜色 
myContext. fillRect(0, myHeight, myCanvas. width，130);// 绘 制 背 景 矩 形 
myContext. lineWidth = 3; 


myContext. strokeStyle = 'green'; // 设 置 描 边 颜色 

myContext. strokeText( ' 炫 酷 实 例 集锦 '，40,80); // 绘 制 描 边 文本 

myContext. fillStyle ='white'; // 设 置 填充 颜色 

myContext. fillText( ' 炫 酷 实例 集锦 '，40，80); // 绘 制 填充 文本 

D7}); 

</script ></head> 
<body><p><input type = "button" value= "在 画布 上 创建 空心 线条 的 特效 文字 "id = "myBtn" style = "width: 
410px"></p> 


<canvas jd = "myCanvas" width = "410" height = "120"> </canvas ></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,fillStyle 属性 用 于 设置 或 返回 填充 绘 
画 的 颜色 渐变 或 模式 ; strokeStyle 属性 用 于 设置 或 返回 笔触 的 颜色 渐变 或 模式 ;strokeText() 方 
法 用 于 在 画布 上 绘制 文本 (没有 填 色 ); fillText() 方 法 用 于 在 画布 上 绘制 填 色 的 文本 。 

此 实例 的 源 文件 名 是 myHtmlA063. html。 


007 ”在 画布 上 绘制 半 透 明 阴 影 文字 


此 实例 主要 通过 设置 shadowColor 等 阴影 属性 值 实现 在 画布 上 绘制 半 透 明 的 立体 阴影 文字 。 当 
在 浏览 器 中 显示 该 页 面 时 , 单 击 * 绘 制 半 透明 的 阴影 字体 "按钮 将 在 下 面 显 示 半 透明 立体 阴影 效果 的 








HTML5+CSS3 炫 酷 应 用 实例 集锦 


文字 * 炫 酷 实 例 集锦 ”, 如 图 007-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
盏 一 口 x 
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图 007-1 


<!doctype html ><html >< head ><meta charset = UIF -8> 
< script src = "js/jquery - 3.1.1.min. js"></script>< script language= "javascript"> 
$ (document). ready(function(){ 
$("#myBtn").click( function() { // 绘 制 半 透 明 的 阴影 字体 
var myCanvas = document. getElementById("myCanvas") ;7 
var myContext = myCanvas. getContext("2d"); 
myContext. shadowOff setX = 2; 
myContext. shadowOff setY = 2; 
myContext. shadowBlur = 2; 
//0.5 表示 半 透 明 , 可 能 值 在 0 到 1 之 间 
myContext. shadowColor = "rgba(0, 0, 0, 0.5)"; 
myContext. fillStyle = "#000"; 
myContext. font = "60px 宋体 "; 
myContext. fillText(" 炫 酷 实 例 集锦 "，20,，50); 
D2;}); 
</script ></head> 
<body ><p>< input type = "button" value = "绘制 半 透 明 的 阴影 字体 " id = "myBtn" style= "width:400px"></p 
> 
<canvas id = "myCanvas" width= "410" height = "410"> </canvas ></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,shadowColor 表示 设置 画布 的 阴影 
颜色 ; shadowOffsetX 表示 阴影 相对 于 文字 的 水 平 距离 ; shadowOffsetY 表示 阴影 相对 于 文字 的 垂直 
距离 ; shadowBlur 表示 阴影 模糊 效果 , 值 越 大 模糊 越 厉害 ; fillStyle 属性 用 于 设置 或 获取 填充 绘画 的 
颜色 ,渐变 或 模式 ; font 属性 用 于 设置 或 获取 画布 上 文本 内 容 的 当前 字体 属性 ; fillText() 方 法 用 于 
在 画布 上 绘制 填 色 的 文字 ,文字 的 默认 颜色 是 黑色 。 

此 实例 的 源 文件 名 是 myHtmlA069. html。 


008 ”在 画布 上 绘制 左右 渐变 的 文字 


此 实例 主要 通过 使 用 createLinearGradient() 方 法 创建 线性 渐变 对 象 ,从 而 实现 在 画布 上 绘制 从 
左 至 右 的 线性 渐变 文字 。 当 在 浏览 器 中 显示 该 页 面 时 . 单 击 “ 绘 制 从 左 至 右 的 线性 渐变 文字 ”按钮 将 
在 下 面 显 示 从 左 至 右 的 线性 渐变 文字 “ 炫 酷 实例 集锦 ”, 如 图 008-1 所 示 。 有 关 此 实例 的 主要 代码 
如 下 。 
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炫 酷 实 例 集锦 


图 008-1 








<!doctype html >< html >< head >< meta charset = UTF -8> 
< script src= "js/jquery -3.1.1.min. js"></script>< script language = "javascript"> 
$ (document). ready(function() { 
$("#myBtn").click(function() { // 绘 制 从 左 至 右 的 线性 渐变 文字 
var myCanvas = document. getElementById( "myCanvas" ); 
Var myContext = myCanvas. getContext("2d"); 
myContext. shadowOff setX = 2; 
myContext. shadowOff setY = 2; 
myContext. shadowBlur = 2; 
//0.5 表示 半 透 明 , 可 能 值 在 0 到 1 之 间 
myContext. shadowColor = "rgba(0, 0, 0, 0.5)"; 
Var myGradient = myContext. createLinearGradient(0, 0,400,0); 
// 设 置 线性 渐变 的 开始 颜色 为 红色 
myGradient. addColorStop(0, "red" ); 
// 设 置 线 性 渐变 的 结束 颜色 为 绿色 
myGradient. addColorStop( 1, "green" ); 
myContext. fillStyle = myGradient; 
myContext. font = "60px 宋体 "; 
myContext. fillText(" 炫 酷 实 例 集锦 "，20,，50); 
D7}); 
</script ></head> 
<body><p>< input type = "button”value = "绘制 从 左 至 右 的 线性 渐变 文字 "id = "myBtn" style = "width: 
400px"></p> 
<canvas id= "myCanvas" width = "410" height = "410"> </canvas ></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , createLinearGradient( ) 方 法 用 于 创 
建 线性 的 渐变 对 象 ,渐变 对 象 可 用 于 填充 矩形 . 圆 形 .线条 文本 等 ,该 方法 的 语法 声明 如 下 。 


createLinearGradient(x0,Y0,xl,Y1) 


其 中 ,参数 x0 表示 渐变 开始 点 的 x 坐标 ; 参数 y0 表示 渐变 开始 点 的 y 坐标 ; 参数 xl 表示 渐变 
结束 点 的 x 坐标 ; 参数 yl 表示 渐变 结束 点 的 y 坐标 。 

当 使 用 createLinearGradient() 方 法 成 功 创建 一 个 线性 渐变 对 象 后 ,通常 需要 用 addColorStop() 
方法 设置 渐变 过 程 需要 使 用 的 颜色 ,addColorStop( Re 

addColorStop(stop,color) 
其 中 ,参数 stop 是 0.0 一 1.0 的 值 .表示 渐变 中 开始 与 结束 之 间 的 位 置 ; 参数 color 表示 在 结束 位 
置 显示 的 CSS 颜色 值 。 

使 用 createLinearGradient() 方 法 创建 的 线性 渐变 对 象 可 以 直接 赋值 给 画布 的 fillStyle 属性 ,从 
而 使 画布 的 呈现 内 容 出 现 渐变 效果 。fillStyle 属性 设置 或 获取 用 于 填充 绘画 的 颜色 、 渐 变 或 模式 , 它 
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支持 3 种 属性 值 , 即 color( 指 示 绘图 填充 色 的 CSS 颜色 值 ,默认 值 是 并 000000) gradient( 用 于 填充 绘 
图 的 线性 或 放射 性 渐变 对 象 ) .pattern( 用 于 填充 绘图 的 pattern 对 象 ) 。 


此 实例 的 源 文件 名 是 myHtmlA070. html。 


009 在 画布 上 绘制 遍 平 或 细 长 的 文字 


此 实例 主要 通过 使 用 scale() 方 法 对 画布 进行 水 平 拉 伸 或 垂直 拉 伸 ,从 而 实现 绘制 扁平 文字 或 细 
长 文字 。 当 在 浏览 器 中 显示 该 页 面 时 , 单 击 “ 绘 制 扁平 文字 "按钮 将 在 下 面 显示 经 过 水 平 拉 伸 放 大 的 
扁平 文字 ,如 图 009-1 所 示 ; 单 击 “ 绘 制 细 长 文字 ”按钮 将 在 下 面 显示 经 过 垂直 拉 伸 放大 的 细 长 文字 ， 





如 图 009-2 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 009-2 


<!doctype html >< html >< head >< meta charset = UIF -8> 
<script src = "js/jquery - 3.1.1.min. js"></script>< script language = "javascript"> 


$ (document). ready(function() { 


$ ("#myBtnHorizontal").click(function() { 


var myContext = myCanvas. getContext("2d"); 
myContext. clearRect(0, 0,400,200); 
myContext. save( ); 

myContext. font = "30px 宋体 "; 

// 按 照 2 倍 在 水 平方 向 上 拉 伸 

myContext. scale(2,1); 


myContext. fillText(" 炫 酷 实 例 集锦 "，10,，30); 


myContext. restore( ); 


D; 
$ ("#myBtnVertical").click(function() { 


Var myContext = myCanvas. getContext( "2d" ); 
myContext. clearRect (0, 0,400, 200); 
myContext. save( ); 

myContext. font = "30px 宋体 "; 

// 按 照 4 倍 在 垂直 方向 上 拉 伸 

myContext. scale(1,4); 


// 绘 制 扁平 文字 
var myCanvas = document. getElementById( "myCanvas" ); 


// 绘 制 细 长 文字 
Var myCanvas = document. getElementById( "myCanvas" ); 


myContext. fillText("HTML5 炫 酷 实 例 集锦 "，30，30) ; 


myContext. restore( ) 
D2;}); 
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</script ></head> 


<body ><p>< input type = "button" value = "绘制 扁平 文字 ”id = "myBtnHorizontal”" style= "width: 190px"> 
< input type = "button" value= "绘制 细 长 文字 ”id = "myBtnVertical”" style= "width: 190px"></p> 
<canvas jd = "myCanvas" width = "410" height = "310"> </canvas ></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,save() 方 法 用 于 保存 当前 环境 的 状 
态 ; restore() 方 法 用 于 恢复 之 前 保存 过 的 路 径 状 态 和 属性 ; scale() 方 法 用 于 缩放 当前 绘图 ,使 其 更 大 
或 更 小 ,如 果 对 绘图 进行 缩放 ,之 后 所 有 的 绘图 也 会 被 缩放 ,定位 也 会 被 缩放 ,例如 scale(2,2) ,表示 绘 
图 将 定位 于 距离 画布 左上 角 2 信 远 的 位 置 ,scale(2.1) 表 示 水 平方 向 拉 伸 2 倍 、 垂 直方 向 不 变 ,scale 
(1,4) 表 示 水 平方 向 不 变 、 垂 直方 向 拉 伸 4 倍 ; fillText() 方 法 用 于 在 画布 上 绘制 填 色 的 文本 。 

此 实例 的 源 文件 名 是 myHtmlA072. html。 


010 在 画布 上 使 用 图 像 填 充 文字 线条 


此 实例 主要 通过 使 用 createPattern( ) 方 法 设置 填充 的 图 像 , 从 而 实现 在 画布 上 使 用 图 像 填充 显 
示 文字 的 线条 。 当 在 浏览 器 中 显示 该 页 面 时 , 单 击 “ 使 用 图 像 填 充 显示 文字 的 线条 ”按钮 将 在 下 面 显 
示 用 图 像 填 充 线条 的 文字 “ 炫 酷 实例 集锦 ”, 如 图 010-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 010-1 





<!doctype html >< html >< head >< meta charset = UTF -8> 
<script src = "js/jquery- 3.1.1.min. js"></script>< script language = "javascript"> 
$ (document). ready(function() { 
$ ("#myBtn"). click(function() { // 使 用 图 像 填充 显示 文字 的 线条 
var myCanvas = document. getElementById( "myCanvas" ); 
Var myContext = myCanvas. getContext("2d"); 
var myImage = new Inage( ); 
myImage. src = " img/a048. jpg"; 
myImage. onload = function() { 
myContext. shadowOff setX = 2; 
myContext. shadowOffsetY = 2; 
myContext. shadowBlur = 2; 
myContext. shadowColor = "rgba(0, 0, 0, 0.5)"; 
// 设 置 图 像 平 铺 模式 
var myPattern = myContext. createPattern(myImage, "repeat"); 
// 设 置 图 像 显 示范 
myContext. rect(0, 0, 400, 200); 
// 设 置 填充 样式 
myContext. fillStyle = myPattern; 
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myContext. font = "60px 宋体 "; 
myContext .fillText(" 炫 酷 实 例 集锦 "，20,50); 
3721)71); 
</script ></head> 


<body ><p>< input type = "button” value = "使 用 图 像 填充 显示 文字 的 线条 " id = "myBtn" style = "width: 
400px"></p> 


<canvas id= "myCanvas" width= "410" height = "410"></canvas ></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,createPattern( ) 方 法 用 于 在 指定 的 方 
向 内 重复 指定 的 元 素 ,这 些 元 素 可 以 是 图 片 ,视频 或 者 其 他 canvas 元 素 , 被 重复 的 元 素 可 用 于 绘制 / 填 
充 和 矩形 、 圆 形 或 线条 等 。 由 于 使 用 createPattern( ) 方 法 创建 的 模式 对 象 可 以 直接 赋值 给 画布 的 
fillStyle 属性 ,因而 可 以 使 画布 的 呈现 内 容 出 现 填充 应 有 的 效果 。 

此 实例 的 源 文件 名 是 myHtmlAo71. html。 


011 在 画布 上 移动 鼠标 指针 实现 文字 涂鸦 


此 实例 主要 为 画布 添加 mousedown、mousemove、mouseup 等 事件 响应 方法 ,并 使 用 HTML5 的 
直线 绘制 方法 ,从 而 实现 在 自 定义 画布 上 通过 移动 鼠标 指针 进行 文字 涂鸦 。 当 在 Google Chrome 浏 
览 器 中 显示 该 页 面 时 ,在 灰色 的 自 定义 画布 上 即 可 移动 鼠标 指针 进行 文字 涂鸦 ,如 图 011-1 所 示 。 有 
关 此 实例 的 主要 代码 如 下 。 
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<!doctype html ><html ><head><meta charset = "UTF - 8"> 
<script src = "js/jquery- 3.1.1.min. js"></script>< script type = "text/javascript"> 
$ (function() { 
myContext = document. getElementById( 'myCanvas' ). getContext ("2d"); 
Var myClickX = new Array(); 
Var myClickY = new Array(); 
var myClickDrag = new Array(); 
var myPaint; 
function addClick(x, y, dragging) { // 记 录 鼠 标 指针 位 置 
myClickX. push(x) 7 
myClickY. push(y); 
myClickDrag. push( dragging); 
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' 
function redraw() { // 将 记录 的 鼠标 指针 位 置 连 线 
myContext. strokeStyle = "green" ; 
myContext. lineJoin = "round"; 
myContext. lineWidth = 5; 
for (var i=0; i<myClickX. length; i++) { 
myContext. beginPath( ); 
if (myClickDrag[i] && i) { 
myContext. moveTo(myClickX[ i— 1]，myClickY[i- 1]); 
} else{ 
myContext. moveTo(myClickX[ i] — 1, myClickY[i]); 
i 
myContext. lineTo(myClickX[ i], myClickY[ i]); 
myContext. closePath( ); 
myContext. stroke( ); 
5 
$ ('#myCanvas'). mousedown( function(e) { // 重 新 开始 绘制 
myPaint = true; 
addClick(e. pageX — this. offsetLeft, e.pageY— this. offsetTop); 
redraw( ); 
DD); 
$ ('#myCanvas'). mousemovel( function(e) { // 继 续 绘 制 
if (myPaint) { 
addClick(e. pageX - this. offsetLeft，e. pageY - this. offsetTop, true); 
redraw( ); 
} 1); 
$ ('#myCanvas'). mouseup(function(e) { // 绘 制 结束 
myPaint = false; 
D2)); 
</script > 
< style type= "text/css"> 
#myCanvas { background - color: lightgrey; border- radius: 5px; } 
</style></head> 
<body >< canvas id = "myCanvas" width= "400" height = "250"></canvas ></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , $(' # myCanvas' ). mousedown 
(function(e){)) 方 法 用 于 响应 鼠标 按 下 事件 ,$ ('# myCanvas' ). mousemove(function(e) { )) 方 法 
用 于 响应 鼠标 移动 事件 , $ ('# myCanvas'). mouseup(function(e){)) 方 法 用 于 响应 鼠标 抬 起 (按键 释 
放 ) 事 件 ; myContext. beginPath () 用 于 开始 一 条 路 径 或 重 置 当前 的 路 径 ; myContext. moveTo 
(myClickX[i] 一 1，myClickY[ij) 用 于 把 路 径 移 动 到 画布 中 的 指定 点 ,不 创建 线条 ; myContext. 
lineTo(myClickX[i]，myClickY[i]) 用 于 添加 一 个 新 点 ,然后 创建 从 该 点 到 画布 中 最 后 指定 点 的 线条 
(该 方法 并 不 会 创建 线条 ); myContext. closePath() 创 建 从 当前 点 到 开始 点 的 路 径 ; myContext. 
stroke() 实 际 地 绘制 出 通过 moveTo() 和 lineTo() 方 法 定义 的 路 径 , 上 默认 的 填充 颜色 是 黑色 ,此 实例 
自 定义 填充 颜色 为 绿色 。 

此 实例 的 源 文件 名 是 myHtmlA117. html。 


012 ”将 画布 上 的 文字 、 图 像 等 保存 到 本 地 


此 实例 主要 通过 使 用 toDataURLO 方 法 实现 把 画布 上 显示 的 图 像 、 文 字 等 所 有 内 容 以 文件 的 形 
式 保存 到 本 地 计算 机 中 。 当 在 浏览 器 中 显示 该 页 面 时 . 单 击 “ 在 画布 上 显示 图 像 和 文字 ”按钮 将 在 画 
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布 上 显示 一 幅 图 像 和 一 行文 字 ; 单 击 “将 图 像 和 文字 保存 到 本 地 ”按钮 , 则 浏览 器 执行 下 载 动作 ， 
图 012-1 所 示 , 图 像 文件 将 被 保存 到 本 地 计算 机 的 下 载 文件 夹 中 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 012-1 


<!doctype html ><html >< head >< meta charset = UIF -8> 
<script src ="js/jquery -3.1.1.min.js"></script >< script language = "javascript"> 
$ (document). ready(function() { 
$ ("#myBtnShow").click(function() { // 在 画布 上 显示 图 像 和 文字 
var myCanvas = document. getElementById( "myCanvas" ); 
var myContext = myCanvas. getContext( '2d' ); 
var myImage = new Image(); 
myImage. src = ' img/a040. jpg'; 
myImage. onload = function() { // 绘 制图 像 
myContext. drawJImage(myImage,0，0,myCanvas. width, myCanvas. height); 
myContext.font ='16pt 宋体 '; 
myContext. lineWidth = 3; 
myContext. strokeStyle = 'green'; 
myContext. strokeText( ' 希 拉 里 .克林顿 '，140，50) ; 
myContext.fillStyle = 'white' 7 
myContext.fillText(' 希 拉 里 .克林顿 '，140，50) 
}11); 
$("#myBtnSave").click(function( ){ // 将 图 像 和 文字 保存 到 本 地 
Var myCanvas = document. getElementById( "myCanvas" ); 
var myImage = myCanvas. toDataURL( "image/png" ). 
replace( "image/png", "image/octet — stream"); 
window. location. href = myImage; });}); 
</script ></head> 
<body><p>< input type = "button" value = "在 画布 上 显示 图 像 和 文字 ”id = "myBtnShow" style= 
"width:410px"></p> 
<Pp>< input type = "button" value = "将 图 像 和 文字 保存 到 本 地 ”id = "myBtnSave" style = "width:410px"></p> 
<canvas jid = "myCanvas" style= "width:410px;height:200px" ></canvas ></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,toDataURL() 方 法 用 于 把 画布 上 显 
示 的 图 像 文字 等 所 有 内 容 保存 为 图 像 。 
此 实例 的 源 文件 名 是 myHtmlA065. html。 
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013 ”使 用 SVG 实现 文字 在 圆 弧 上 显示 


此 实例 主要 使 用 SVG 设置 不 同样 式 的 路 径 并 在 路 径 上 创建 渐变 色 文 字 , 从 而 实现 在 直线 上 和 在 
半圆 弧 上 显示 渐变 色 文字 的 效果 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 , 单 击 * 以 弯曲 路 径 显 
示 文 字 ” 按 钮 ,文字 在 圆 弧 上 的 显示 效果 如 图 013-1 所 示 ; 单 击 * 以 水 平 路 径 显示 文字 ”按钮 ,文字 在 直 
线 上 的 显示 效果 如 图 013-2 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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<! doctype html >< html>< head >< meta charset = "UTF - 8"> 
<script src = "js/jquery- 3.1.1.min. js"></script>< script type = "text/javascript"> 
$ (function(){ 
$ ("#myBtnCurve"). click(function(){ // 以 弯曲 路 径 显示 文字 
$ ("svg. texts text. text ~ 1").css("display", "initial"); 
$ ("svg. texts text. text ~ 2").css("display", "none"); 
D); 
$ ("myBtnHorizontal").click(function(){ ”// 以 水 平 路 径 显示 文 字 
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$ ("svg. texts text. text — 1").css("display", "none”); 
$ ("svg. texts text. text ~ 2").css("display", "initial"); 
Ds; 
$ ("#myBtnCurve"). click(); 
1D); 
</script > 
<style type= "text/css"> 
.svg — defs { position: absolute;} 
.texts { text ~ align: center; width: 500px; height: 300px;} 
.text—1{ fill: url(#p- stripes);font - size: 48px;font — weight: bold;} 
.text -2 { fill: url(#p- stripes);font - size: 38px;font — weight: bold;} 
button{ width:200px;} 
</style></head> 
<body>< div align = "center"> 
<p><button id= "myBtnCurve"> 以 弯曲 路 径 显示 文字 </button> 
<button id= "myBtnHorizontal"> 以 水 平 路 径 显示 文字 </button></p> 
<svgclass="svg— defs"><g><defs> 
<path id= "MyPath1” d= "M 110 300 A100,110 0 0,1 505,300" 
transform= "scale(0.8)"/> 
<path id= "MyPath2" d= "M 50 100 A100,0 0 0,1 600, 100" 
transform= "scale(0.8)"/> 
< linearGradient id = "MyGradient" x1l ="0" yl ="0" x2= "100%" y2="0%"> 
< stop offset ="0%" stop— color = "crimson" /> 
< stop offset = "10%" stop— color = "red" /> 
orangered" /> 
< stop offset = "30%" stop— color = "orange" /> 
< stop offset = "40%" stop— color = "gold" /> 
< stop offset = "50 %" stop- color = "yellowgreen" /> 





< stop offset = "20%" stop— color 


< stop offset = "60 %" stop— color = "green" /> 
< stop offset = "70%" stop- color = "steelblue" /> 
< stop offset = "80 %" stop— color = "mediumpurple" /> 
< stop offset = "90 %" stop— color = "purple" /></linearGradient > 
<pattern id="p— stripes" patternUnits = "userSpaceOnUse" width = "200" height = "200" viewbox= "0 0 
200 200"> 
<rect width="200" height = "200" fill = "url(#MyGradient)"/></pattern> </defs> </g></svg> 
<svg class = "texts"> 
<text class = "text - 1" transform = "translate(0)"> 
< textPath xlink:href =" 间 MyPath1"> HTML5 + CSS3 炫 酷 实例 集锦 </textPath></text > 
<text class = "text ~ 2" transform= "translate(0)"> 
< textPath xlink:href =" # MyPath2"> HTML5 + CSS3 炫 酷 实例 集锦 </textPath></text > </svg></div></body> 
</html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,标签 < svg ></svg > 中 的 代码 是 符合 
SVG 规范 的 代码 。SVG 是 可 缩放 矢量 图 形 (Scalable Vector Graphics) ,基于 可 扩展 标记 语言 ,是 用 
于 描述 二 维 矢量 图 形 的 一 种 图 形 格式 . 它 由 万 维 网 联盟 制定 .是 一 个 开放 标准 。< path id 一 
"MyPathl" d=="M 110 300 A100,110 0 0.1 505,300" transform 一 "scale(0. 8)"/> 用 于 创建 半圆 弧 的 
路 径 ,d 属性 值 用 于 定义 路 径 上 的 关键 点 坐标 . scale (0. 8) 表示 将 原始 路 径 缩 小 至 80%。 
<linearGradient ></linearGradient > 用 于 设置 各 种 颜色 在 路 径 上 的 分 布 位 置 , offset 值 以 百分比 
表示 。 

此 实例 的 源 文件 名 是 myHtmlA182. html。 
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014 使 用 SVG 实现 文字 绕 三 角形 显示 


此 实例 主要 使 用 SVG 设置 路 径 为 三 角形 并 在 路 径 上 创建 渐变 色 文字 ,从 而 实现 文字 围绕 三 角形 
周边 显示 的 效果 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,文字 围绕 三 角形 周边 显示 的 效果 如 


图 014-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
< style type= "text/css"> 
.svg - defs { position: absolute;} 
.texts { text — align: center; width: 430px; height: 300px;} 
/* 设 置 文字 的 基本 样式 * / 
.myText { fill: url(#p- stripes);font - size:29px;font - weight: bold;} 
</style></head> 
<body>< div align = "center"> 
<svgclass="svg— defs"><g><defs> 
忆 ~- 设置 路 径 是 一 个 三 角形 --> 


<path id= "MYPathl" d= "M 250 20 L 70 370 L 450 370 Z" transform= "scale(0.8)"/> 


< 一 设置 文字 在 三 角形 路 径 上 的 渐变 颜色 -一 > 
< linearGradient id = "MyGradient" x1 ="0" yl ="0" x2= "100%" y2="0%"> 
< stop offset ="0%" stop- color = "crimson" /> 
< stop offset ="10%" stop- color = "red" /> 
< stop offset = "20%" stop- color = "orangered" /> 
< stop offset = "30%" stop— color = "orange" /> 
< stop offset = "40%" stop— color = "gold" /> 
< stop offset = "50%" stop— color = "yellowgreen" /> 
< stop offset ="60%" stop— color = "green" /> 
< stop offset = "70%" stop— color = "steelblue" /> 
< stop offset = "80 %" stop— color = "mediumpurple" /> 
< stop offset = "90 %" stop— color = "purple" /></linearGradient > 


<pattern id="p- stripes" patternUnits = "userSpaceOnUse" width = "200" height = "200" viewbox= "0 0 


200 200"> 
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<rect width= "200" height = "200" fill = "url(#MyGradient)"/> 
</pattern></defs> </g></svg> 
<svgclass="texts"> 





< text class= "myText" transform= "translate(0)"> 


< textPath xlink:href =" 井 MYPathl"> 关 关中 鸠 ,在 河 之 洲 。 窃 穹 淑女 , 君子 好 逮 。 参 差 荷 菜 , 左右 流 之 。 
</textPath></text> 


</svg></div></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,< path id 一 " MyPath1”d 一 "M 250 
20 L 70 370 L 450 370 Z” transform 王 "scale(0. 8)"/> 用 于 设置 SVG 的 路 径 是 三 角形 ,其 中 250 20 
表示 三 角形 的 上 顶点 ,70 370 表示 三 角形 的 左下 顶点 ,450 370 表示 三 角形 的 右 下 顶点 。M、L、Z 实 际 
上 是 方法 (命令 ) 的 缩写 。 下 面 的 命令 可 用 于 路 径 数 据 : 

M= moveto 

L= lineto 

H= horizontal lineto 

V= vertical lineto 

C= curveto 

S= smooth curveto 

Q= quadratic Bezier curve 

T= smooth quadratic Bezier curveto 

A=elliptical Arc 

Z= closepath 


以 上 所 有 命令 均 允 许 写成 小 写字 母 , 大 写 表示 绝对 定位 ,小写 表示 相对 定位 。 
此 实例 的 源 文 件 名 是 myHtmlA187. html。 


015 ”使 用 SVG 实现 文字 沿 曲线 显示 


此 实例 主要 使 用 SVG 设置 路 径 为 三 次 贝 塞 尔 曲线 ,并 在 路 径 上 创建 渐变 色 文字 ,从 而 实现 文字 
沿 着 三 次 贝 塞 尔 曲 线 显示 的 效果 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,文字 沿 着 三 次 贝 塞 
尔 曲 线 显 示 的 效果 如 图 015-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 015-1 
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<!doctype html ><html >< head >< meta charset = "UTF — 8"> 
<style type= "text/css"> 
.svg - defs { position: absolute;} 
.texts { text ~ align: center; width: 460px; height:250px;} 
/* 设 置 文 字 的 基本 样式 */ 
.myText { fill: url(#p- stripes);font - size:18px; font - weight: bold;} 
</style></head> 
<body>< div align = "center">< svg class = "svg defs"><g><defs> 
< -- 设 置 路 径 是 三 次 贝 塞 尔 曲 线 --> 
<path id= "MyPath1" d= "M100,200 C100,100 250,100 250, 200 S400, 300 400, 200 ”transform = 
"scale(1.2)"/> 
<! -设置 文字 在 三 次 贝 塞 尔 曲 线路 径 上 的 渐变 颜色 --> 
< linearGradient id = "MyGradient" xl= "0" yl ="0" x2= "100%" y2="0%"> 
< stop offset = "0%" stop- color = "crimson" /> 
< stop offset = "10%" stop— color = "red" /> 
< stop offset = "20 %" stop- color = "orangered" /> 
< stop offset = "30%" stop— color = "orange" /> 
< stop offset = "40%" stop— color = "gold" /> 
< stop offset = "50 %" stop— color = "yellowgreen" /> 
< stop offset = "60 %" stop— color = "green" /> 
< stop offset = "70%" stop- color = "steelblue" /> 
< stop offset = "80 %" stop— color = "mediumpurple" /> 
< stop offset = "90%" stop— color = "purple" /></linearGradient > 
<pattern id = "p- stripes" patternUnits = "userSpaceOnUse" width = "200" height = "200" viewbox= "0 0 
200 200"> 
<rect width= "200" height = "200" fill = "url(#MyGradient)"/></pattern></defs> </g></svg> 
<svg class = "texts"> 
<text class = "myText" transform= "translate( ~ 60, ~ 100)"> 
< textPath xlink:href = "MyPath1"> 关 关 瞧 坞 ,在 河 之 洲 。 窍 完 淑 女 , 君子 好 迷 。 参 差 戎 菜 ,左右 流 之 。 
</textPath ></text></svg></div></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,< path id 一" MyPath1”d 一 
"M100,200 C100,100 250,100 250,200 S400,300 400,200 ”transform 一"scale(1.2)"/> 中 的 d 属性 
值 用 于 设置 三 次 贝 塞 尔 曲线 的 控制 点 ; < text class 一 "myText"”transform 一 "translate( 一 60, 一 100)"> 中 
的 transform 属性 值 表示 根据 translate( 一 60, 一 100) 的 参数 值 平移 < text > 标签 。 

此 实例 的 源 文件 名 是 myHtmlA188. html。 


016 使 用 SVG 实现 文字 沿 跑 道 线 显示 


此 实例 主要 使 用 SVG 设置 路 径 为 体育 场 跑道 线 , 并 在 路 径 上 创建 渐变 色 文 字 , 从 而 实现 文字 沿 
着 体育 场 跑道 线 显示 的 效果 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,文字 沿 着 体育 场 跑 道 线 
显示 的 效果 如 图 016-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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<!doctype html >< html ><head ><meta charset = "UTF - 8"> 
<style type= "text/css"> 
.myText { fill: url(#p- stripes); font — size: 20px; font - weight: bold;} 
</style></head> 
<body>< div align = "center"> 
<svgwidth="100%" height ="100% ">< defs> 
<! -设置 路 径 的 形状 (体育 场 跑道 线 ) --> 
<path id= "MyPath1l" d= "M50,90 C0, 90 0,30 50, 30 L150,30 C200,30 200,90 150,90 z" transform = "scale 
C2) 
<! 一 设置 文字 在 路 径 上 的 渐变 颜色 -一 > 
< linearGradient id = "MyGradient" xl="0" yl ="0" x2="100%" y2= "0%"> 
<stop offset ="0%" stop- color = "crimson"/> 
<stop offset ="10%" stop— color = "red"/> 
< stop offset ="20%" stop— color = "orangered"/> 
< stop offset ="30%" stop— color = "orange"/> 
<stop offset ="40%" stop— color = "gold"/> 
<stop offset ="50%" stop— color = "yellowgreen"/> 
<stop offset ="60%" stop— color = "green"/> 
<stop offset ="70%" stop— color = "steelblue"/> 
<stop offset ="80%" stop— color = "mediumpurple"/> 
< stop offset ="90%" stop— color = "purple"/> </linearGradient > 
<pattern id= "p- stripes" patternUnits = "userSpaceOnUse" width="200" height ="200" viewbox = "0 0 
200 200"> 
<rect width= "200" height = "200" fill = "url(#MyGradient)"/></pattern></defs> 
<g><text class= "myText" transform= "translate(10, ~ 30), scale(0.9)"> 
< textPath xlink:href ="# 井 MYPathl"> 关 关 只 鸠 ,在 河 之 洲 。 窃 穹 淑女 ,君子 好 迷 。 参 差 荐 菜 ,左右 流 之 。 窃 
帘 淑 女 , 瘤 嘛 求 之 。</textPath></text ></g></svg></div> 
</body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,< path id=="MyPathl" d= 二 "M50,90 
C0,90 0,30 50,30 L150,30 C200,30 200,90 150.90 z”transform 一 "scale(2)"/> 中 的 d 属性 值 用 于 
设置 体育 场 跑 道 线 的 控制 点 ,transform 三 "scale(2)" 表 示 将 体育 场 跑 道 线 放 大 两 售 ; < text class 一 
"myText” transform 一 "translate(10 ,一 30) ,scale(0. 9)"> 中 的 transform 属性 值 表示 根据 translate 
(10, 一 30) ,scale(0.9) 的 参数 值 平移 和 缩小 < text > 标签 ; fill: url( # p-stripes) 表 示 文 字 的 颜色 使 用 
SVG 创建 的 渐变 色 填充 。 

此 实例 的 源 文件 名 是 myHtmlA216. html。 


017 在 SVG 中 对 线条 进行 加 粗 或 瘦身 


此 实例 主要 在 SVG 中 设置 feMorphology 滤 镜 的 operator 属性 值 , 从 而 实现 对 文本 的 线条 进行 
增 肥 和 瘦身 处 理 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 将 显示 原始 的 文本 , 单 击 “使 用 瘦身 的 
线条 显示 文本 ”按钮 , 则 文本 线条 经 过 瘦身 处 理 之 后 的 效果 如 图 017-1 所 示 ; 单 击 * 使 用 增 肥 的 线条 显 
示 文 本 ”按钮 , 则 文本 线条 经 过 增 肥 处 理 之 后 的 效果 如 图 017-2 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 





<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<script src = "js/jquery- 3.1.1.min. js"></script>< script type = "text/javascript"> 
$ (function() { 
$ ("#myBtn1"). click(function() { // 使 用 瘦身 的 线条 显示 文本 
$("g").attr("filter", "url(#myErode)"); 
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D; 
$ ("#myBtn2").click(function() { // 使 用 增 肥 的 线条 显示 文本 
$("g").attr("filter", "url(#myDilate)"); });}); 
</script > 


<style type= "text/css"> 
svg {margin - top: 20px; position: absolute; left: calc(50% — 200px);} 
div { margin— top: 2px;margin — left: 2px;} 
button {width: 195px;} 
.myText { font — size: 64px; font — weight: bold; } 
</style></head> 
<body>< div align = "center"> 
<button id= "myBtn1"> 使 用 瘦身 的 线条 显示 文本 </button> 
<button id= "myBtn2"> 使 用 增 肥 的 线条 显示 文本 </button></div> 
<div><svg width= "400" height = "275">< defs > 
<filter id = "myErode">< feMorphology operator = "erode" in = "SourceGraphic”radius = 
"1.95" /></filter> 
<filter id= "myDilate">< feMorphology operator = "dilate" in = "SourceGraphic" radius = 
"2.9" /></filter ></defs> 
<g><text x= "0" y= "60" class = "myText"> 炫 酷 实例 集锦 </text ></g></svg></div> </body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,feMorphology 滤 镜 用 于 对 源 图 形 执 
行 fattening( 增 肥 ) 或 者 thinning( 瘦 身 ) , 当 设置 feMorphology 滤 镜 的 operator 属性 值 为 erode( 侵 蚀 ) 
时 ,该 滤 镜 产生 的 是 瘦身 特效 ; 当 设 置 feMorphology 滤 镜 的 operator 属性 值 为 dilate( 膨 胀 ) 时 ,该 滤 
镜 产生 的 是 增 肥 特效 ,瘦身 和 增 肥 特 效 的 数值 由 feMorphology 滤 镜 的 radius 值 确定 。 
此 实例 的 源 文件 名 是 myHtmlA234. html。 
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018 使 用 SVG 描 边 创建 空心 线条 文字 


此 实例 主要 通过 使 用 SVG 的 与 描 边 相关 的 属性 创建 空心 线条 文字 。 当 在 Google Chrome 浏览 
器 中 显示 该 页 面 时 将 显示 默认 的 实心 文字 , 单 击 * 显 示 空 心 文字 ?按钮 则 显示 设置 描 边 属 性 之 后 创建 
的 空心 线条 文字 ,如 图 018-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 


<!doctype html >< html >< head >< meta charset = "UTF — 8"> 
<script src = "js/jquery - 3.1.1.min. js"></script>< script type = "text/javascript"> 
$ (function() { 
$ ("#myBtn1").click(function() { // 显 示 实 心 文字 
Si act Dt ELL 
$ ("text").attr("stroke”, ""); 
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DD); 
$ ("#myBtn2"). click( function() { // 显 示 空 心 文字 
$ ("text").attr("fill", "white"); 
$ ("text").attr("stroke", "green"); 
$ ("text").attr("stroke— dasharray”, "2"); });}); 
</script> 
<style type= "text/css"> 
.mySVG { width: 410px; height: 410px;} 
text{font - fanmily: simsun, Tahoma, Helvetica, Arial, SimHei, sans — serif; 
font - size: 100px; font - weight: bold;} 
button { width: 195px;} 
</style></head> 
<body>< div align = "center"> 
<button id= "myBtnl"> 显 示 实 心 文字 </button > 
<button id= "myBtn2"> 显 示 空 心 文字 </button ></div> 
<div align = "center">< svg class = "mySVG"> 
<text x= "1l" y="120" > 实例 集锦 </text ></svg></div ></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,stroke-dasharray、fill、stroke 几 个 属 
性 用 于 设置 描 边 样 式 。 在 SVG 中 ,与 描 边 相关 的 属性 如 下 : 

(1) stroke 属 性。 该 属性 用 于 定义 一 条 线 文本 或 元 素 的 轮廓 颜色 。 

(2) stroke-width 属性 。 该 属性 用 于 定义 一 条 线 ,文本 或 元 素 的 轮廓 厚度 。 

(3) stroke-linecap 属性 。 该 属性 用 于 描 边 端 点 表现 形式 ,例如 圆 角 .方形 等 。 

(4) stroke-dasharray 属性 。 该 属性 用 于 创建 虚线 。 

在 stroke-dasharray 属性 中 使 用 一 个 参数 绘制 虚线 时 表示 一 段 虚线 长 度 和 每 段 虚线 之 间 的 间距 ， 
例如 stroke-dasharray 二 '10'; 在 stroke-dasharray 属性 中 使 用 两 个 参数 绘制 虚线 时 ,一 个 参数 表示 长 
度 ,一 个 参数 表示 间距 ,例如 stroke-dasharray 二 '10, 10'; 在 使 用 4 个 参数 绘制 虚线 时 则 是 两 个 参数 
情形 的 全 加 ,例如 stroke-dasharray 一 '10， 10, 5, 5'。 

另外 还 有 其 他 的 描 边 属性 ,例如 stroke-dashoffset、stroke-linejoin、stroke-opacity 等 。 

此 实例 的 源 文件 名 是 myHtmlA220. html。 


x 
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019 使 用 SVG 描 边 创 建 渐变 空心 文字 


此 实例 主要 在 SVG 中 设置 stroke 属性 为 渐变 色 , 从 而 创建 渐变 色 的 空心 文字 。 当 在 Google 
Chrome 浏览 器 中 显示 该 页 面 时 将 显示 默认 的 实心 文字 , 单 击 * 显 示 渐 变色 空心 文字 ?按钮 则 创建 渐变 
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色 空 心 文字 ,效果 如 图 019-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<script src = "js/jquery- 3.1.1.min. js"></script>< script type = "text/javascript"> 
$ (function() { 
$("#myBtn1"). click(function() { // 显 示 实 心 文字 
(ban ete ED 
$ ("text").attr("stroke”, ""); 
1D); 
$ ("#myBtn2").click(function() { // 显 示 渐 变色 空心 文字 
$ ("text").attr("fill", "white"); 
$ ("text").attr("stroke"”, "url(#myGradient)"); });}); 
</script> 
<style type= "text/css"> 
.mySVG { width: 410px; height: 410px; } 
text{font - family: simsun, Tahoma, Helvetica, Arial, SimHei, sans — serif; 
font — size: 64px;font - weight: bold;} 
button { width: 195px;} 
</style></head> 
<body>< div align = "center"> 
<button id = "myBtnl"> 显 示 实 心 文字 </button > 
<button id = "myBtn2"> 显 示 渐 变色 空心 文字 </button ></div> 
<div align = "center">< svg class = "mySVG">< defs > 
< linearGradient id = "myGradient" xl ="0%" yl="0%" x2="100%" y2= "0%"> 
<stop offset ="0%" stop- color= "red" /> 
< stop offset ="100%" stop— color = "green" /></linearGradient ></defs> 
<text x= "10" y= "100"> 炫 酷 实 例 集锦 </text ></svg></div></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,stroke 属性 用 于 定义 文本 或 元 素 的 
轮廓 颜色 , 即 通 常 所 说 的 描 边 ,如 果 设 置 该 属性 值 为 渐变 色 , 则 文本 或 元 素 的 轮廓 也 呈现 渐变 色 。 
此 实例 的 源 文件 名 是 myHtmlA221. html。 


020 ”使 用 SVG 滤 镜 创建 扩散 阴影 文字 


此 实例 主要 通过 使 用 SVG 的 feGaussianBlur、feOffset、feFlood、feComposite 等 滤 镜 创 建 具有 模 
糊 扩散 阴影 效果 的 文字 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,使 用 这 些 滤 镜 创建 的 特效 文 
字 效 果 如 图 020-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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<!doctype html >< html>< head><meta charset = "UTF - 8"> 
< style type = "text/css"> 
svg { margin - top: 10px; position: absolute; left: calc(50% - 200px); } 
</style></head> 
<body>< svg width="100 %" height ="100% "><defs> 
<filter id = "myFilter" filterUnits = "objectBoundingBox" x ="— 10%" y="- 10%" width="150%" 
height = "150% "> 
<! 一 产生 模糊 扩散 特效 -一 > 
< feGaussianBlur in = "SourceAlpha" stdDeviation = "3" result = "blurredhlpha"/> 
<! 一 产生 阴影 偏 移 特效 --> 
< feOffset in = "blurredAlpha" dx= "4" dy= "4" result= "offsetBlurredhlpha"/> 
< feFlood result = "flooded" style = "flood - color:darkgreen; flood - opacity:0.85"/> 
<! -- < feComposite in= "flooded" operator = "atop" in2 = "offsetBlurredAlpha" result = "coloredShadow"/> ——> 
<! 一 设置 in 和 in2 的 组 合 模式 -一 > 
< feComposite in = "flooded" operator = "in" in2 = "offsetBlurredAlpha" result = "coloredShadow"/> 
< feComposite in = "SourceGraphic" in2 = "coloredShadow" operator = "over"/> 
</filter></defs> 
<text x= "0px" y= "65px" style= "fill:rgb(0,0,0); font- size:50px;" filter = "url(#myEilter)"> 炫 本 
应 用 实例 集锦 </text ></svg></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,< filter > </filter > 标签 中 的 
feGaussianBlur feOffset、 feFlood、 feComposite、 feComposite 滤 镜 必须 按照 此 顺序 创建 ,因为 
feGaussianBlur 滤 镜 创建 的 result 一 "blurredAlpha" 将 被 作为 feOffset 滤 镜 的 输入 项 in 一 
"blurredAlpha" ,以 此 类 推 。< feGaussianBlur in 一 ”SourceAlpha ”stdDeviation 一 "3 ” result 一 
"blurredAlpha"/> 中 的 stdDeviation 一 "3" 表 示 模 糊 半 径 , 此 值 越 大 模糊 范围 越 大 。< feOffset in 一 
"blurredAlpha" dx 一 "4" dy 一 "4" result 一 "offsetBlurredAlpha"/> 中 的 dx、dy 表示 阴影 偏 移 值 , 可 以 
为 负数 ,例如 < feOffset in 一 "blurredAlpha” dx 一 "一 4” dy 一 "一 4” result 一 "offsetBlurredAlpha"/>。 

此 实例 的 源 文件 名 是 myHtmlA194. html。 


021 使 用 SVG 滤 镜 创建 木雕 和 蚀刻 文字 


此 实例 主要 通过 使 用 SVG 的 feDiffuseLighting、feDistantLight ,feOffset 等 滤 镜 创建 具有 木雕 和 
蚀刻 效果 的 特效 文字 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 . 单 击 * 使 用 feDiffuseLighting 滤 
镜 创建 特效 文字 一 ”按钮 则 创建 木雕 文字 ,效果 如 图 021-1 所 示 ; 单 击 * 使 用 feDiffuseLighting 滤 镜 创 
建 特效 文字 二 ”按钮 则 创建 蚀刻 文字 ,效果 如 图 021-2 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<script src="js/jquery -3.1.1.min.js"></script >< script type = "text/javascript"> 
$ (function() { 
// 使 用 feDiffuseLighting 滤 镜 创建 特效 文字 一 
$ ("#myBtn1").click(function() { 
$ ("svg defs filter feDiffuseLighting").attr("diffuseConstant", "0.5"); 
DD); 
// 使 用 feDiffuseLighting 滤 镜 创建 特效 文字 二 
$("#myBtn2").click(function() { 
$ ("svg defs filter feDiffuseLighting").attr("diffuseConstant", "5"); 
D2}); 
</script> 
< style type= "text/css"> 
svg { margin— top: 10px;position: absolute; 
left: calc(50 % - 200px);} 
button { width: 195px;} 
</style></head> 
<body>< div align = "center"> 
<button id= "myBtn1"> 使 用 feDiffuseLighting 滤 镜 创建 特效 文字 一 </button > 
<button id = "myBtn2"> 使 用 feDiffuseLighting 滤 镜 创建 特效 文字 二 </button ></div> 
<svg width= "100% "height= "100% "><defs><filter id= "myFilter" x="0" y="0"> 
< feOffset dx = "2" dy= "5" width= "400px"/> 
< feDiffuseLighting surfaceScale= "5"” diffuseConstant = "0.5" style= "1ighting- color:white;"> 
< feDistantLight azimuth= "135" elevation = "60"/> 
</feDiffuseLighting></filter></defs> 
<text x= "0px" y= "65px" style= "font - size:66pxi" filter ="url( #myFilter)"> 炫 酷 实 例 集锦 </text > 
</svg> 
</body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , feDiffuseLighting 滤 镜 主要 通过 
alpha 通道 实现 轮廓 的 凹凸 效果 ,此 实例 通过 调整 其 diffuseConstant 属性 值 即 得 两 种 风格 各 异 的 文字 
特效 ; feDistantLight 滤 镜 主要 用 于 控制 光源 角度 , 即 通 过 azimuth 和 elevation 属性 值 调整 光源 在 
XYZ 坐标 系 中 的 角度 。 

此 实例 的 源 文件 名 是 myHtmlA196. html。 


022 ”使 用 SVG 的 动画 变换 实现 文字 旋转 


此 实例 主要 在 SVG 的 < text > 标签 中 欢 入 < animateTransform > 标签 ,从 而 实现 < text > 标签 代表 
的 文字 根据 < animateTransform > 标签 指定 的 属性 值 进行 旋转 的 效果 。 当 在 Google Chrome 浏览 器 








HTML5+CSS3 炫 酷 应 用 实例 集锦 


中 显示 该 页 面 时 ,“HTML5 十 CSS3 炫 酷 实 例 集锦 ”自动 围绕 中 心 旋转 ,如 图 022-1 所 示 。 有 关 此 实例 
的 主要 代码 如 下 。 
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图 022-1 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<style type= "text/css"> 
.mySVG { width: 400px; height: 400px;} 
text {font - family: simsun, Tahoma, Helvetica, Arial, SimHei, sans— serif; 
font - size: 24px;font - weight: bold;} 
</style></head> 
<body>< div align = "center">< svg class = "mySVG"> 
<text x="65" y="150"> HTML5 + CSS3 炫 酷 实例 集锦 < animateTransform dur = "2s" attributeName = 
"transform" repeatCount = "indefinite" type = "rotate" from= "0,200, 160" to = "360, 200,160"/> </text > 
</svg></div></body ></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,< animateTransform dur 二 "2s" 
attributeName= "transform" repeatCount= "indefinite" type="rotate" from="0, 200,160" to 一 
"360,200,160"/> 表 示 在 两 秒 的 时 间 内 以 (200,160) 点 为 中 心 旋转 360" ,上 且 永 不 停歇 。 如 果 需 要 将 文 
字 放 大 两 倍 , 则 应 该 将 上 述 代码 修改 为 < animateTransform dur 王 "2s” attributeName 一 "transform” 
repeatCount= "indefinite" type 一 "scale" from="1" to 一 "2"/>。 


此 实例 的 源 文件 名 是 myHtmlA223. html。 


023 在 SVG 中 逐 字 旋转 一 行 的 每 个 文字 


此 实例 主要 在 SVG 中 设置 < text > 标签 的 rotate 属性 ,从 而 实现 < text > 标签 中 的 每 个 汉字 都 以 
不 同 的 角度 进行 旋转 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 .“ 炫 酷 实 例 集锦 ”中 的 每 个 字 旋 
转 之 后 的 效果 如 图 023-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 





<!doctype html >< html >< head>< meta charset = "UTF - 8"> 
< style type = "text/css"> 
.mySVG { width: 400px;height: 400px;} 
.myText { font - size: 48px;font - weight: bold;Letter - spacing:30px; } 





</style></head> 


第 1 部 分 x 《> 
<body >< div>< svg class = "mySVG"> 


<text x= "0" y= "60" rotate= "30,60,90,120, 150, 180" class = "myText"> 炫 酪 实例 集锦 </text ></svg></ 
div></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,< text x 一 "0"y 一 "60" rotate 一 "30， 
60,90,120,150,180” class 一 "myText"> 炫 酷 实 例 集锦 </text > 中 的 rotate 属性 值 " 30,60,90,120， 
150,180" 表 示 6 个 角度 ,分 别 用 于 旋转 “ 炫 酷 实例 集锦 ”这 6 个 汉字 。 如 果 汉 字 的 数量 多 于 角度 的 数 
量 , 则 以 最 后 一 个 角度 作为 剩余 汉字 的 旋转 角度 ,例如 < text x 二 "0" y= 二 "60" rotate 一 "30,60,90， 
120,150,180" class 二 "myText"> 炫 酷 实 例 集锦 老虎 实 作 </text > 中 的 “老虎 实 作 ”无 法 对 应 rotate 属 
性 值 , 则 以 rotate 属性 值 的 最 后 一 个 角度 180 作为 其 旋转 角度 。 

此 实例 的 源 文件 名 是 myHtmlA226. html。 
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图 023-1 


024 在 SVG 中 压 扁 单行 文本 的 每 个 文字 


此 实例 主要 在 SVG 中 设置 < text > 标签 的 textLength 和 lengthAdjust 属性 ,从 而 实现 < text > 标 
签 中 的 每 个 汉字 都 水 平 拉 伸 , 以 扁平 的 风格 显示 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ， 炫 
蕴 实 例 集锦 ”中 的 每 个 字 以 扁平 风格 显示 ,效果 如 图 024-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 024-1 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
< style type= "text/css"> 
.mySVG { width: 1200px; height: 200px; } 
.myText { font ~ size: 56px; font ~ weight: bold; letter— spacing: 15px;} 
</style></head> 
<body>< div>< svg class = "mySVG"> 
<text x="0" y= "90" textLength = "1150" lengthAdjust = "spacingAndGlyphs" class = "myText"> 
炫 酷 实例 集锦 </text ></svg></div></body></html > 
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上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,< text x 一 "0”y 王 "90”textLength 一 
"1150" lengthAdjust= "spacingAndGlyphs" class= "myText"> 炫 酷 实例 集锦 </text > 表示 在 宽度 为 
1150px 的 范围 内 以 矢量 图 形 的 方式 平均 排列 “ 炫 酷 实例 集锦 ”, 由 于 * 炫 酷 实例 集锦 ”的 默认 宽度 远 远 
小 于 1150px, 因 此 一 旦 执行 拉 伸 操作 , 则 出 现 扁平 化 的 效果 。 

此 实例 的 源 文件 名 是 myHtmlA229. html。 


025 在 SVG 中 实现 单行 文本 的 字 间 距 不 等 


此 实例 主要 在 SVG 中 设置 < text > 标签 的 dx 属性 ,从 而 实现 < text > 标签 中 的 每 个 汉字 都 有 不 同 
的 字 间 距 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,“ 炫 酷 实例 集锦 ”中 每 个 字 的 间距 都 不 相同 ， 
效果 如 图 025-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 025-1 





<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
< style type = "text/css"> 
.mySVG { width: 450px; height: 400px;} 
.myText { font - size: 56px; font - weight: bold;} 
</style></head> 
<body>< div>< svg class = "mySVG"> 
<text x= "0" y= "100" dx = "0,5,15,20,25,30" class = "myText"> 炫 酷 实 例 集 锦 </text> 
</svg></div></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,< text x 二 "0" y 二 "100" dx 一 "0,5， 
15,20,25,30" class 一 "myText"> 炫 酷 实例 集锦 </text > 中 的 dx 属性 值 "0,5,15,20,25,30" 表 示 6 个 
间距 ,分 别 用 于 对 应 * 炫 酷 实例 集锦 ?的 每 个 汉字 ,类 似 于 每 个 汉字 的 margin-left。 

此 实例 的 源 文件 名 是 myHtmlA227. html。 


026 在 SVG 中 错落 显示 单行 文本 的 每 个 文字 


此 实例 主要 在 SVG 中 设置 < text > 标签 的 y 属性 ,从 而 实现 < text > 标签 中 的 每 个 汉字 都 有 不 同 
的 垂直 坐标 ,以 高 低 不 同 的 错落 风格 显示 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,“ 炫 酷 实例 
集锦 ”中 的 每 个 字 错 落 显 示 效 果 如 图 026-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 





<!doctype html >< html >< head><meta charset = "UTF - 8"> 
< style type= "text/css"> 
.mySVG { width: 450px; height: 200px;} 
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/* 设 置 字体 的 基本 样式 */ 
.myText { font - size: 56px; font ~ weight: bold;letter - spacing: 15px;} 
</style></head> 
<body><div>< svg class = "mySVG"><text x= "0" y= "60, 99,70, 55,70, 90" class = "myText" > 炫 酷 实例 集锦 
</text ></svg></div></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,< text x 二 "0" y 二 "60,99,70,55， 
70,90" class 二 "myText" > 炫 酷 实例 集锦 </text > 中 的 y 属性 值 "60,99,70,55,70,90" 表 示 6 个 垂直 
坐标 ,分 别 用 于 对 应 “ 炫 酷 实例 集锦 ”这 6 个 汉字 ,类 似 于 每 个 汉字 的 y 值 。 如 果 汉 字 的 数量 多 于 垂直 
坐标 的 数量 , 则 以 最 后 一 个 垂直 坐标 作为 剩余 汉字 的 垂直 坐标 ,例如 < text x 二 "0" y 二 "60,99,70,55。 
70,90" class 一 "myText"”> 炫 酷 实例 集锦 老虎 实 作 </text > 中 的 “老虎 实 作 ” 无 法 对 应 y 属性 值 , 则 以 y 
属性 值 的 最 后 一 个 垂直 坐标 90 作为 其 垂直 坐标 。 

此 实例 的 源 文件 名 是 myHtmlA228. html。 
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027 ”以 阴影 模糊 效果 显示 当前 选择 文本 


此 实例 主要 设置 text-shadow 属性 值 ,从 而 实现 以 阴影 模糊 效果 显示 当前 选择 的 文本 。 当 在 
Google Chrome 浏览 器 中 显示 该 页 面 时 ,如 果 将 鼠标 指针 悬浮 在 第 二 本 书 名 上 , 则 该 书 名 将 以 阴影 模 
糊 的 特效 显示 ,如 图 027-1 所 示 ; 如 果 将 鼠标 指针 悬浮 在 第 一 本 或 第 三 本 书 名 上 , 则 该 书 名 也 将 以 阴 
影 模糊 的 特效 显示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 027-1 


<!doctype html >< html >< head >< meta charset = "UTF — 8"> 
< style type= "text/css"> 
/* 当 鼠 标 指针 巧 停 在 书 名 上 时 显示 阴影 特效 文字 * / 
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p:hover {text — shadow: 5px 5px 5px gray; color: navy; 
font - size: 40px; font - weight: bold; font - family: 宋体 ;} 
p{padding - left: 8px;padding - top: 8px;padding - bottom: 8px; 
width: 380px; margin: 10px; background - color: lightcyan; border - radius: 5px;} 
</style></head> 
<body ><p> 开 发 经 验 与 技巧 宝典 </p><p> 炫 酷 应 用 实例 集锦 </p >< p> 编程 技巧 精 选集 </p> 
</body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,textrshadow 属性 用 于 给 文字 加 上 阴 
影 和 模糊 效果 , 它 是 使 用 CSS3 属性 增加 文字 的 质感 而 不 使 用 任何 图 片 。 该 属性 是 以 逗号 分 隔 的 阴影 
列表 ,每 个 阴影 由 两 个 或 3 个 长 度 值 和 一 个 可 选 的 颜色 值 进行 规定 ,省略 的 长 度 是 0。textrshadow 属 
性 的 设置 语法 如 下 。 


text - shadow: h— shadow v- shadow blur color; 

其 中 ,h-shadow 表示 水 平 阴影 的 位 置 ,允许 为 负 值 ; v-shadow 表示 垂直 阴影 的 位 置 ,允许 为 负 
值 ; blur 可 选 ,表示 模糊 的 距离 ; color 可 选 ,表示 阴影 的 颜色 。 

此 实例 的 源 文件 名 是 myHtmlB034. html。 


028 ”以 霓虹灯 发 散 效果 显示 当前 选择 文本 


此 实例 主要 设置 text-shadow 属性 值 ,从 而 实现 以 霓虹灯 发 散 效果 显示 当前 选择 的 文本 。 当 在 
Google Chrome 浏览 器 中 显示 该 页 面 时 ,如 果 将 鼠标 指针 悬浮 在 第 二 本 书 名 上 , 则 该 书 名 将 以 霓虹灯 
发 散 的 特效 显示 ,如 图 028-1 所 示 ; 如 果 将 鼠标 指针 悬浮 在 第 一 本 或 第 三 本 书 名 上 , 则 该 书 名 也 将 以 
霓虹灯 发 散 的 特效 显示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 028-1 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<style type = "text/css"> 
/* 当 鼠 标 指针 悬 停 在 书 名 上 时 显示 霓虹灯 效果 的 文字 * / 
p:hover { text- shadow: 0 0 5px # FF0000; color: black; 
font — size: 40px; font — weight: bold; font - family: 宋体 ;} 
p {padding - left: 8px;padding - top: 8px;padding— bottom: 8px; 
width: 380px; margin: 10px; 
background — color: lightcyan;border - radius: 5px;} 
</style></head> 
<body ><p> 开 发 经 验 与 技巧 宝典 <Yp><p> 炫 酷 应 用 实例 集锦 </p >< p> 编程 技巧 精 选集 </p> 
</body></html> 
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上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 .text-shadow 属性 用 于 给 文字 加 上 阴 
影 和 模糊 效果 。text-shadow 属性 的 设置 语法 如 下 。 


text — shadow: h— shadow v — shadow blur color; 


当 需 要 使 文字 产生 霓虹灯 发 散 效果 时 应 结合 字体 的 大 小 设置 blur 值 。 
此 实例 的 源 文件 名 是 myHtmlB035. html。 


029 ”以 多 级 辉 光 效果 显示 当前 选择 文本 


此 实例 主要 设置 text-shadow 的 多 级 属性 值 , 从 而 实现 以 多 级 辉 光 效 果 显示 当前 选择 的 文本 。 当 
在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,如 果 将 鼠标 指针 悬浮 在 第 二 本 书 名 上 , 则 该 书 名 将 以 多 级 
辉 光 的 特效 显示 ,如 图 029-1 所 示 ; 如 果 将 鼠标 指针 悬浮 在 第 一 本 或 第 三 本 书 名 上 , 则 该 书 名 也 将 以 
多 级 辉 光 的 特效 显示 。 有 关 此 实例 的 主要 代码 如 下 。 
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<!doctype html >< html >< head ><meta charset = "UTF - 8"> 
< style type = "text/css"> 

/* 当 鼠 标 指针 悬 停 在 书 名 上 时 显示 多 级 辉 光 效 果 的 文字 * / 

Pp:hover { text - shadow: 0 0 5px #FFF, 0 0 10px #FFF, 0 0 15px #FFF，0 0 30px 井 EFEF0ODE，0 0 45px # 
FF00DE; color: black; font: bold 40px/100% "微软 雅 黑 "，"Lucida Grande"，" Lucida Sans"，Helveticay 
Arial, Sans;} 

p { padding- left: 8px;padding - top: 8px;padding - bottom: 8px;width: 380px; margin: 10px;background 
— color: lightcyan;border - radius: 5px;} 
</style></head> 
<body ><p> 开 发 经 验 与 技巧 宝典 </p><p> 炫 酷 应 用 实例 集锦 </p >< p> 编程 技巧 精 选集 </p> 
</body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,text-shadow 属性 用 于 给 文字 加 上 阴 
影 和 模糊 效果 。text-shadow 属性 的 设置 语法 如 下 。 


text - shadow: h— shadow v ~ shadow blur color; 
其 中 ,blur 表示 模糊 的 距离 。 通 常 ,设置 比较 大 的 模糊 距离 可 以 增加 辉 光 效果 ,当然 也 可 以 像 实 


例 这 样 同时 增加 几 个 不 同 的 距离 值 ,从 而 创造 多 种 不 同 的 阴影 效果 。 
此 实例 的 源 文件 名 是 myHtmlB036. html。 
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030 以 下 沉 凹 坑 效果 显示 当前 选择 文本 


此 实例 主要 在 text-shadow 属性 值 中 仅 设 置 垂 直方 向 上 的 阴影 值 , 从 而 实现 以 下 沉 凹 坑 效果 显示 
当前 选择 的 文本 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,如 果 将 鼠标 指针 悬浮 在 第 二 本 书 名 
上 , 则 该 书 名 将 以 下 沉 凹 坑 的 特效 显示 ,如 图 030-1 所 示 ; 如 果 将 鼠标 指针 悬浮 在 第 一 本 或 第 三 本 书 
名 上 , 则 该 书 名 也 将 以 下 沉 凹 坑 的 特效 显示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 030-1 


<!doctype html >< html >< head >< meta charset = "UTF — 8"> 
< style type= "text/css"> 
/* 当 鼠标 指针 悬 停 在 书 名 上 时 显示 下 沉 凹 坑 效 果 的 文字 * / 
p:hover { text - shadow: 0 1px 1px #FFF; color: black; 
font: bold 40px/100 当 “微软 雅 黑 "，"Lucida Grande"，"Lucida Sans", Helvetica, Arial, Sans;} 
p {padding - left: 8px;padding - top: 8px;padding — bottom: 12px; 
width: 380px; margin: 10px;background— color: gray; border - radius: 5px;} 
</style></head> 
<body><p> 开 发 经 验 与 技巧 宝典 </p><p> 炫 酷 应 用 实例 集锦 </p><p> 编 程 技巧 精 选集 </p> 
</body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,textshadow 属性 用 于 给 文字 加 上 阴 
影 和 模糊 效果 。text-shadow 属性 的 设置 语法 如 下 。 


text - shadow: h - shadow v— shadow blur color; 


其 中 ,h-shadow 表示 水 平 阴 影 的 位 置 , 允许 为 负 值 ; v-shadow 表示 垂直 阴影 的 位 置 , 允 许 为 负 
值 。 在 此 实例 (text-shadow: 0 1px 1px 并 FFF) 中 ,水 平方 向 的 阴影 值 为 0, 垂直 方向 的 阴影 值 为 0, 因 
此 产生 了 这 种 特殊 的 下 沉 凹 坑 的 阴影 效果 。 用 户 也 可 以 设置 垂直 方向 的 阴影 值 为 0, 例 如 “text- 
shadow: lpx 0 1px #FFF”, 从 而 产生 另外 的 阴影 效果 。 

此 实例 的 源 文件 名 是 myHtmlB037. html。 


031 以 雕刻 凸 出 效果 显示 当前 选择 文本 


此 实例 主要 在 text-shadow 属性 值 中 设置 垂直 方向 和 水 平方 向 的 阴影 值 为 负 值 ,从 而 实现 以 雕刻 
凸 出 效果 显示 当前 选择 的 文本 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,如 果 将 鼠标 指针 悬浮 
在 第 二 本 书 名 上 , 则 该 书 名 将 以 雕刻 凸 出 的 特效 显示 ,如 图 031-1 所 示 ; 如 果 将 鼠标 指针 悬浮 在 第 一 
本 或 第 三 本 书 名 上 , 则 该 书 名 也 将 以 雕刻 凸 出 的 特效 显示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 031-1 


<! doctype html >< html >< head >< meta charset = "UTF - 8"> 
<style type= "text/css"> 
/* 当 鼠标 指针 悬 停 在 书 名 上 时 显示 雕刻 凸 出 效果 的 文字 * / 
p:hover {text- shadow: — lpx -1px0 #FFF,1px 1px 0 #333,1px lpx 0 #444; 
color:black; font: bold 40px/100#% "微软 雅 黑 "，"Lucida Grande"，"Lucida Sans",Helvetica, 
Arial, Sans;} 
p {padding - left: 8px;padding - top: 8px;padding - bottom: 12px;width: 380px; 
margin: 10px;background - color: gray;border - radius: 5px;} 
</style></head> 


<body ><p> 开 发 经 验 与 技巧 宝典 </p><p> 炫 酷 应 用 实例 集锦 </p >< p> 编程 技巧 精 选集 </p> 
</body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,text-shadow 属性 用 于 给 文字 加 上 阴 
影 和 模糊 效果 。text-shadow 属性 的 设置 语法 如 下 。 


text - shadow: h— shadow v— shadow blur color; 


其 中 ,h-shadow 表示 水 平 阴 影 的 位 置 , 允许 为 负 值 ; v-shadow 表示 垂直 阴影 的 位 置 ,允许 为 负 
值 。 在 此 实例 (text-shadow: 一 lpx 一 lpx 0 ##FFF.1lpx lpx 0 #333,1px 1px0 #444) 中 ,第 一 级 的 
水 平方 向 的 阴影 值 为 一 1 ,垂直 方向 的 阴影 值 为 一 1; 第 二 ,三 级 的 水 平方 向 的 阴影 值 为 1, 垂直 方向 的 
阴影 值 为 1, 因 此 产生 了 这 种 特殊 的 雕刻 凸 出 的 阴影 效果 。 

此 实例 的 源 文件 名 是 myHtmlB038. html。 


032 ”以 模糊 发 散 效果 显示 当前 选择 文本 


此 实例 主要 在 text-shadow 属性 值 中 仅 设置 模糊 距离 值 blur, 并 设置 color 属性 值 为 
transparent, 从 而 实现 以 模糊 发 散 效果 显示 当前 选择 的 文本 。 当 在 Google Chrome 浏览 器 中 显示 该 
页 面 时 ,如 果 将 鼠标 指针 悬浮 在 第 二 本 书 名 上 , 则 该 书 名 将 以 模糊 发 散 的 特效 显示 ,如 图 032-1 所 示 ; 
如 果 将 鼠标 指针 悬浮 在 第 一 本 或 第 三 本 书 名 上 , 则 该 书 名 也 将 以 模糊 发 散 的 特效 显示 。 有 关 此 实例 
的 主要 代码 如 下 。 








<!doctype html >< html >< head >< meta charset = "UTF — 8"> 
< style type = "text/css"> 
/x* 当 鼠 标 指针 悬 停 在 书 名 上 时 显示 模糊 发 散 效果 的 文字 * / 
p:hover {text - shadow: 0 0 5px #F96; color: transparent; 
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font: bold 40px/100% "微软 雅 黑 "，"Lucida Grande"，"Lucida Sans"”, Helvetica, Arial, Sans;} 
p {padding - left: 8px; padding - top: 8px; padding - bottom: 12px; width: 380px; 
margin: 10px; background— color: gray;border — radius: Spx;} 
</style></head> 
<body ><p> 开 发 经 验 与 技巧 宝典 </p><p> 炫 酷 应 用 实例 集锦 </p >< p> 编程 技巧 精 选集 </p> 
</body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 .text-shadow 属性 用 于 给 文字 加 上 阴 
影 和 模糊 效果 。text-shadow 属性 的 设置 语法 如 下 。 


text — shadow: h— shadow v — shadow blur color; 


其 中 ,blur 可 选 ,表示 模糊 的 距离 ; color 可 选 ,表示 阴影 的 颜色 。 在 使 用 text-shadow 制作 模糊 
发 散文 字 效 果 时 需要 注意 设置 文本 的 前 景色 color 为 transparent, 模 糊 距离 值 blur 越 大 ,其 效果 越 模 
糊 ; 其 二 不 设置 水 平方 向 和 垂直 方向 的 偏 移 值 。 

此 实例 的 源 文件 名 是 myHtmlB039. html。 
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图 032-1 


033 ”以 模糊 雕刻 效果 显示 当前 选择 文本 


此 实例 主要 在 text-shadow 属性 值 中 设置 多 级 阴影 值 和 模糊 值 ,并 设置 color 属性 值 为 
transparent, 从 而 实现 以 模糊 雕刻 效果 显示 当前 选择 的 文本 。 当 在 Google Chrome 浏览 器 中 显示 该 
页 面 时 ,如 果 将 鼠标 指针 悬浮 在 第 二 本 书 名 上 . 则 该 书 名 将 以 模糊 雕刻 的 特效 显示 .如 图 033-1 所 示 ; 
如 果 将 鼠标 指针 悬浮 在 第 一 本 或 第 三 本 书 名 上 . 则 该 书 名 也 将 以 模糊 雕刻 的 特效 显示 。 有 关 此 实例 
的 主要 代码 如 下 。 








<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<style type = "text/css"> 
/* 当 鼠 标 指针 县 停 在 书 名 上 时 显示 模糊 雕刻 效果 的 文字 * / 
p:hover { text — shadow:0 0 6px #F96, — 1px - lpx #FFF, lpx 一 1px #444; 
color: transparent; font: bold 40px/100% "微软 雅 黑 "，"Lucida Grande"，" Lucida Sans", 
Helvetica, Arial, Sans;} 
p {padding - left: 8px; padding— top: 8px; padding — bottom: 12px; width: 380px; 
margin: 10px;background - color: gray;border - radius: 5px;} 
</style></head> 
<body ><p> 开 发 经 验 与 技巧 宝典 </p><p> 炫 酷 应 用 实例 集锦 </p >< p> 编程 技巧 精 选集 </p> 
</body></html > 
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图 033-1 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,text-shadow 属性 用 于 给 文字 加 上 阴 
影 和 模糊 效果 。text-shadow 属性 的 设置 语法 如 下 。 


text - shadow: h - shadow v— shadow blur color; 


其 中 ,blur 可 选 , 表 示 模 糊 的 距离 ; color 可 选 , 表 示 阴 影 的 颜色 。 在 使 用 text-shadow 制作 模糊 
雕刻 文字 效果 时 需要 注意 设置 文本 的 前 景色 color 为 transparent, 模 糊 距离 值 blur 越 大 ,其 效果 越 模 
糊 ; 其 二 设置 水 平方 向 和 垂直 方向 的 偏 移 值 以 产生 雕刻 效果 。 

此 实例 的 源 文 件 名 是 myHtmlB040. html。 


034 以 内 凹 谋 和 人 效果 显示 当前 选择 文本 


此 实例 主要 在 text-shadow 属性 值 中 设置 阴影 值 和 模糊 值 , 并 设置 color 属性 值 .background 属 
性 值 以 及 阴影 颜色 值 , 从 而 实现 以 内 凹 嵌入 效果 显示 当前 选择 的 文本 。 当 在 Google Chrome 浏览 器 
中 显示 该 页 面 时 , 如 果 将 鼠标 指针 悬浮 在 第 二 本 书 名 上 , 则 该 书 名 将 以 内 凹 嵌入 的 特效 显示 ,如 
图 034-1 所 示 ; 如 果 将 鼠标 指针 悬浮 在 第 一 本 或 第 三 本 书 名 上 , 则 该 书 名 也 将 以 内 凹 嵌入 的 特效 显 
示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 034-1 


<!doctype html ><html ><head><meta charset = "UTF - 8"> 
<style type= "text/css"> 
/x* 当 鼠 标 指针 悬 停 在 书 名 上 时 显示 内 止 嵌 入 效果 的 文字 * / 
p:hover { text - shadow: 1px 1px 0 #E4F1FF; color: #566F89; font: bold 40px/100% "微软 雅 黑 "，"Lucida 
Grande", "Lucida Sans", Helvetica, Arial, Sans;} 
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p {padding - left: 8px; padding - top: 8px; padding - bottom: 12px; width: 380px; 
margin: 10px; background: lightblue; border ~ radius: 5px;} 
</style></head> 
<body ><p> 开 发 经 验 与 技巧 宝典 </p><p> 炫 酷 应 用 实例 集锦 </p >< p> 编程 技巧 精 选集 </p> 
</body></html > 





上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,text-shadow 属性 用 于 给 文字 加 上 阴 
影 和 模糊 效果 。text-shadow 属性 的 设置 语法 如 下 。 


text — shadow: h— shadow v— shadow blur color; 


其 中 ,blur 可 选 , 表 示 模 糊 的 距离 ;color 可 选 , 表 示 阴 影 的 颜色 。 在 使 用 text-shadow 制作 内 凹 
嵌入 文字 效果 时 需要 注意 设置 文本 的 前 景色 color、 背 景色 background 以 及 阴影 色 color, 这 3 种 颜色 
需要 合理 搭配 ,模糊 距离 值 blur 通常 为 0; 其 二 设置 水 平方 向 的 偏 移 值 和 垂直 方向 的 偏 移 值 以 产生 嵌 
和 效果。 这 种 效果 应 该 文字 的 前 景色 比 背 景色 暗 ,阴影 颜色 稍微 比 背景 色 亮 ,这 一 点 很 重要 ,如 果 阴 
影 色 太 亮 看 起 来 会 怪 ,如 果 太 暗 将 没有 效果 显示 。 

此 实例 的 源 文件 名 是 myHtmlB041. html。 


035 ”以 线条 描 边 效果 显示 当前 选择 文本 


此 实例 主要 在 text-shadow 属性 中 设置 阴影 值 和 阴影 颜色 值 ,从 而 在 文字 线条 的 外 围 实现 线条 描 
边 的 效果 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,如 果 将 鼠标 指针 悬浮 在 第 二 本 书 名 上 , 则 该 
书 名 将 以 线条 描 边 的 特效 显示 ,如 图 035-1 所 示 ; 如 果 将 鼠标 指针 悬浮 在 第 一 本 或 第 三 本 书 名 上 , 则 
该 书 名 也 将 以 线条 描 边 的 特效 显示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 035-1 





<!doctype html >< html ><head >< meta charset = "UTF - 8"> 
< style type= "text/css"> 
/x* 当 鼠 标 指针 悬 停 在 书 名 上 时 显示 线条 描 边 的 特效 文字 * / 
P:hover {text - shadow: 1px 1px 0px lightgray, - 1px 一 1px 0px lightgray;color: snow; 
font: bold 40px/100% "微软 雅 黑 "，"Lucida Grande"，"Lucida Sans", Helvetica, Arial, Sans;} 
Pp { padding - left: 8px;padding - top: 8px;padding - bottom: 12px7 
width: 380px;margin: 10px; background: lightpink;border - radius: 5px;} 
</style></head> 
<body><p> 开 发 经 验 与 技巧 宝典 </p><p> 炫 酷 应 用 实例 集锦 </p ><p> 编 程 技巧 精 选 集 </p> 
</body> </html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,text-shadow 属性 用 于 给 文字 加 上 阴 
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影 和 模糊 效果 。text-shadow 属性 的 设置 语法 如 下 。 


text — shadow: h— shadow v — shadow blur color; 











其 中 ,h-shadow 表示 水 平 了 明 影 的 位 置 , 允许 为 负 值 ; v-shadow 表示 垂直 阴影 的 位 置 ,允许 为 负 
值 ; blur 可 选 ,表示 模糊 的 距离 ; color 可 选 , 表 示 阴 影 的 颜色 。 此 实例 在 使 用 text-shadow 属性 实现 
线条 描 边 的 文字 特效 时 主要 运用 两 个 阴影 ,第 一 个 是 向 左上 投影 (1px 1px 0px lightgray) ,第 二 个 是 
向 右 下 投影 (一 lpx 一 lpx 0px lightgray) ,用户 还 需 注意 制作 文字 描 边 的 阴影 效果 不 使 用 模糊 距 
离 值 。 

此 实例 的 源 文件 名 是 myHtmlB042. html。 


036 ”以 浮雕 镶嵌 效果 显示 当前 选择 文本 


此 实例 主要 在 text-shadow 属性 中 设置 多 个 阴影 ,从 而 实现 以 浮雕 镶嵌 效果 显示 当前 选择 的 文 
本 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,如 果 将 鼠标 指针 悬浮 在 * 火 树 银 花 合 "上 , 则 出 现 如 
图 036-1 所 示 的 效果 ; 如 果 将 鼠标 指针 悬浮 在 “ 星 桥 铁 锁 开 ”或 *“ 灯 树 千 光 照 ?* 上 ,也 会 出 现 类 似 的 效 
果 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 036-1 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
< style type= "text/css"> 
/* 当 鼠标 指针 晤 停 时 显示 浮雕 灸 庶 效 果 的 文字 * / 
p:hover {color: #FFF; font— size: 80px; 
text - shadow: 0 1px 0 #CCC, 0 2px 0 井 C9C9C9,，0 3px 0 ##BBB, 0 4px 0 ##B9B9B9, 0 5px 0 #AAA, 0 
6px 1px rgba(0,0,0,0.1)，0 0 5px rgba(0,0,0,0.1),0 lpx 3px rgba(0,0,0,0.3),0 3px 5px rgba(0, 
0,0,0.2),0 5px 10px rgba(0,0,0,0.25);} 
p { padding - left: 8px; padding - top: 8px; padding — bottom: 8px; width: 400px; margin: 10px; 
background - color: lightseagreen; border — radius: Spx;} 
</style></head> 
<body ><p> 火 树 银 花 合 </p><p> 星 桥 铁 锁 开 </p><p> 灯 树 千 光 照 </p></body ></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,text-shadow 属性 用 于 给 文字 加 上 阴 
影 和 模糊 效果 。text-shadow 属性 的 设置 语法 如 下 。 


text - shadow: h— shadow v — shadow blur color; 


其 中 ,bh-shadow 表示 水 平 阴 影 的 位 置 ,允许 为 负 值 ; v-shadow 表示 垂直 阴影 的 位 置 , 允 许 为 负 
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值 ; blur 可 选 , 表 示 模 糊 的 距离 ;color 可 选 ,表示 阴 影 的 颜色 。 此 实例 中 的 浮雕 镶 典 文字 特效 主要 是 
通过 该 属性 以 多 个 阴影 三 加 ,并 且 通 过 设置 透明 度 产 生 的 。 
此 实例 的 源 文件 名 是 myHtmlB110. html。 


037 ”以 渐变 倒影 效果 显示 当前 选择 文本 


此 实例 主要 设置 -webkit-box-reflect 属性 ,从 而 实现 以 渐变 倒影 效果 显示 当前 选择 的 文本 。 当 在 
Google Chrome 浏览 器 中 显示 该 页 面 时 ,如 果 将 鼠标 指针 悬浮 在 文本 上 ., 则 将 出 现 该 文本 的 倒影 ,如 
图 037-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 037-1 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<style> 
/* 绘 制 渐变 色 文字 * / 
div { font -size: 80px; font - weight: bold; cursor:pointer; 
background - image: - webkit - gradient(linear, left top, left bottom, from 
(lightgreen), to(blue)); - webkit - background - clip: text; 
— webkit — text ~ fill - color: transparent;} 
/* 在 鼠标 指针 悬浮 时 产生 倒影 * / 
div:hover{/* 倒影 有 线性 渐变 效果 * / 
— webkit - box- reflect:below 0px linear - gradient(transparent 0 % ,white); 
/* 倒影 无 渐变 效果 * / 
/* — webkit - box- reflect:below Opx; * /} 
</style></head> 
<body>< div> 炫 酷 实例 集锦 </div></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , div: hover {-webkit-box-reflect: 
below 0px linear-gradient(transparent 0% ,white);} 用 于 实现 当 鼠 标 指 针 悬 浮 在 文本 上 时 ,在 文本 下 
方 的 0px 间隔 距离 处 添加 渐变 的 倒影 文本 。 此 外 ,如 果 设 置 -webkit-box-reflect 的 属性 值 分 别 为 
above left right, 则 可 以 在 文本 的 上 方 ,左边 ,右边 产生 倒影 

此 实例 的 源 文件 名 是 myHtmlB191. html。 


038 ”以 透明 阴影 效果 显示 当前 选择 文本 


此 实例 主要 设置 text-shadow 属性 并 对 文本 使 用 完全 透明 的 颜色 ,从 而 实现 以 透明 阴影 效果 显示 
当前 选择 的 文本 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 .“ 春 花 秋月 何 时 了 ”将 以 透明 阴影 效 
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果 显 示 , 如 图 038-1 所 示 ; 如 果 将 鼠标 指针 悬浮 在 这 行 透明 文本 上 . 则 文本 将 以 正常 状态 显示 。 有 关 
此 实例 的 主要 代码 如 下 。 
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图 038-1 


<! doctype html >< html >< head >< meta charset = "UTF - 8"> 


<style> 
Pp { font- size: 60px; font ~ weight: bold; 
text — shadow: 0 0 15px #000; /* 添加 文字 阴影 * / 
color: rgba(0, 0, 0, 0); /* 设置 颜色 为 透明 色 * /} 
p:hover { text - shadow: none; /* 取消 文字 阴影 * / 
color: #000; /* 设置 颜色 为 黑色 * /} 
</style></head> 


<body ><p> 春 花 秋 月 何 时 了 </p></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,text-shadow: 0 0 15px #000 用 于 给 
文字 加 上 阴影 效果 , 它 是 使 用 CSS3 属性 增加 文字 的 质感 而 不 使 用 任何 图 片 。color: rgba(0, 0, 0, 0) 用 
于 设置 文字 颜色 为 透明 色 ,在 默认 情况 下 , 它 使 文本 不 可 见 ,但 在 此 实例 中 由 于 文字 有 阴影 ,用 户 正好 
可 以 看 见 文字 阴影 的 那 种 模糊 状态 。 

此 实例 的 源 文件 名 是 myHtmlB226. html。 


039 ”设置 文字 边框 创建 炙 空 风格 的 文字 


此 实例 主要 通过 设置 元 素 的 text-stroke-width 属性 和 text-stroke-color 属性 创建 詹 空 风格 的 文 
字 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 光 炫 酷 实例 ?将 以 镁 空 风格 显示 ,如 图 039-1 所 示 。 
有 关 此 实例 的 主要 代码 如 下 。 








<!doctype html ><html >< head> <meta charset = "UTF - 8"> 
< style type = "text/css"> 
Pp { color: transparent; — webkit— text— stroke— width:1px; 
一 webkit — text - stroke - color:green; font ~ size: 100px; margin: 30px;} 
</style></head> 
<body ><p> 炫 酷 实 例 </p></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,-webkit-text-stroke-width:1px 表示 
每 个 文字 的 线条 边框 宽度 是 1px,-webkit-text-stroke-color: green 表示 每 个 文字 的 线条 边框 颜色 是 绿 
色 , 这 两 个 属性 可 以 合并 到 -webkit-text-stroke-width 属性 中 表示 。 
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图 039-1 


此 实例 的 源 文 件 名 是 myHtmlB145. html。 


040 使 用 多 级 阴影 创建 3D 效果 的 文字 


此 实例 主要 通过 在 text-shadow 属性 中 设置 阴影 值 和 阴影 颜色 值 实现 以 3D 立体 效果 显示 当前 
选择 的 文本 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,如 果 将 鼠标 指针 悬浮 在 第 二 本 书 名 上 , 则 
该 书 名 将 以 3D 立体 的 特效 显示 ,如 图 040-1 所 示 ; 如 果 将 鼠标 指针 悬浮 在 第 一 本 或 第 三 本 书 名 上 , 则 
该 书 名 也 将 以 3D 立体 的 特效 显示 。 有 关 此 实例 的 主要 代码 如 下 。 
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<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<style type= "text/css"> 
/x* 当 鼠 标 指针 悬 停 在 书 名 上 时 显示 3D 立体 的 特效 文字 * / 
p:hover {text - shadow: lpx 1px rgba(197, 223, 248, 0.8), 2px 2px rgba(197，223，248，0. 8)，3px 3px rgba 
(197, 223, 248, 0.8), 4px 4px rgba(197, 223, 248, 0.8), 5px 5px rgba(197, 223, 248, 0.8), 6px 6px rgba 
(197, 223, 248, 0.8); 
color: 提 FFF; font: bold 40px/100 名 "微软 雅 黑 ",，"Lucida Grande"，"Lucida Sans", Helvetica, 
Arial, Sans;} 
/* 当 鼠 标 指针 悬 停 在 书 名 上 时 显示 3D 立 体 的 特效 文字 ,效果 二 ; 自动 覆盖 效果 一 */ 
p:hover {text - shadow: - lpx - lpx rgba(197, 223, 248,0.8), -2px - 2px rgba(197, 223, 248,0.8), - 3px 
— 3px rgba(197, 223, 248,0.8), - 4px - 4px rgba(197, 223, 248, 0. 8)，- 5px - 5px rgba(197, 
223, 248, 0.8)，- 6px - 6px rgba(197, 223, 248,0.8); 
color: 井 FEF; font: bold 40px/100% "微软 雅 黑 "，"Lucida Grande"，"Lucida Sans", Helvetica, 
Arial, Sans;} 
p {padding - left: 8px;padding - top: 8px;padding— bottom: 12px;width: 380px; 
margin: 10px; background: grey;border - radius: 5px;} 
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</style></head> 


<body ><p> 开 发 经 验 与 技巧 宝典 </p><p> 炫 酷 应 用 实例 集锦 </p >< p> 编程 技巧 精 选集 </p> 
</body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,text-shadow 属性 用 于 给 文字 加 上 阴 
影 和 模糊 效果 。text-shadow 属性 的 设置 语法 如 下 。 


text — shadow: h— shadow v- shadow blur color; 





其 中 ,h-shadow 表示 水 平 阴 影 的 位 置 ,允许 为 负 值 ; v-shadow 表示 垂直 阴影 的 位 置 , 允 许 为 负 
值 ; blur 可 选 , 表 示 模 糊 的 距离 ; color 可 选 ,表示 阴影 的 颜色 。 

3D 文字 效果 的 运用 原理 如 同 Photoshop ,在 文字 的 下 方 或 上 方 复制 多 个 图 层 ,并 把 每 一 个 层 向 左 
上 或 右 下 方向 移动 1px 距离 ,从 而 制作 出 3D 效果 , 层 数 越 多 ,效果 越 厚 重 。 如 果 换 成 用 textrshadow 
制作 就 是 使 用 多 个 阴影 ,并 把 阴影 色 设置 相同 ,使 用 rgba 透明 色 效 果 更 佳 ,例如 实例 *text-shadow: 
一 1px 一 1px rgba(197, 223, 248,0. 8) ,一 2px 一 2px rgba(197, 223, 248,0. 8) ,一 3px 一 3px rgba 
(197, 223, 248,0.8),—4px 一 4px rgba(197, 223, 248,0. 8), 一 5px 一 5px rgba(197，223，248， 
0.8) ,一 6px 一 6px rgba(197, 223， 248,0. 8)” 中 的 0. 8 即 表示 透明 度 值 。 

此 实例 的 源 文件 名 是 myHtmlB043. html。 


041 ”裁剪 圆 形 并 使 文字 环绕 圆 形 边缘 显示 
此 实例 主要 通过 设置 元 素 的 shape-outside 属性 和 使 用 before 选择 器 实现 裁剪 圆 形 图 片 并 使 文 


字 环 绕 圆 形 边缘 显示 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 , 右 端的 文字 将 沿 着 左 端的 圆 形 
图 片 边缘 换行 显示 ,如 图 041-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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武当 山 ， 和 位 于 湖北 省 十 地 市 
武当 山 


和 站 当下 的 上 地 其 称 为 下 
无 双 姓 雹 ， 天 下 第 一 











图 041-1 


<!doctype html ><html ><head><meta charset = "UTF - 8"> 
<style> 
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* { margin: Opx; padding: Opx; position: relative;box— sizing: border — box;} 
.content {padding: 10px;text - align: justify;color: black;font — size: 15px;} 
.content: :before {content: ""; display: block; float: left; 
width: 360px; height: 350px; shape— outside: circle(50%); } 
p { margin: 10px; text — indent: 1px; font — size: 13px;} 
.myDiv {width: 385px;height: 356px; border — radius: 5px; position: absolute; 
background - image: url(img/B115. jpg); text - align: center; 
—webkit— clip— path: circle(45% at 50% 50%);} 
body { background - color: aquamarine; } 
</style> 
</head> 
<body>< div class = "myDiv"></div><div class= "content"> 
<p> 武 当 山 ,道教 圣地 ,位 于 湖北 省 十 卉 市 武当 山 旅 游 经 济 特区 。 武 当 山 又 名 太 和 山 、 谢 罗 山 , 参 上 山 、 仙 室 
山 , 古 有 " 太 岳 "、" 玄 岳 "、" 大 岳 " 之 称 。 截 至 2013 年 ,武当 山 有 古 建 筑 53 处 ,建筑 面积 2.7 万 平方 米 ,建筑 遗址 9 
处 , 占 地 面积 20 多 万 平方 米 ,全 山 保存 各 类 文物 5035 件 。 明 代 , 武 当 山 被 皇帝 封 为 "大 岳 "、" 治 世 玄 岳 ", 被 苯 为 
至 高 无 上 的 "皇室 家 庙 "。 武 当 山 以 "四 大 名 山 皆 拱 拇 ,五 方 仙 岳 共 朝 宗 "的 "五 岳之 冠 "的 显赫 地 位 闻名 于 世 。 武 
当 山 是 联合 国 公布 的 世界 文化 遗产 地 之 一 ,是 中 国 国 家 重点 风景 名 胜 区 、 国 家 AAAAA 级 风景 区 。 武 当 山 也 是 道 
教 名 山 和 武当 武术 的 发 源 地 ,被 称 为 " 百 古 无 双 胜境 ,天 下 第 一 仙山 "。</p> 
</div></body ></html > 





上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,myDiv 类 裁剪 的 圆 形 图 片 仅 用 于 显 
示 , 不 是 导致 右 端 圆 弧 文字 换行 的 直接 原因 ,在 content: :before 中 绘制 的 圆 形 才 是 导致 右 端 贺 弧 文字 
换行 的 直接 原因 , 它 不 可 见 。 在 此 实例 中 将 上 述 两 个 圆 形 绘制 成 大 小 差不多 ,因此 给 用 户 的 感觉 就 像 
是 右 端 的 圆 弧 换行 文字 是 由 左 端 的 圆 形 图 片 制造 的 这 种 效果 。content: :before 表示 在 content 的 前 
面 设 置 的 CSS 样式 。 

此 实例 的 源 文 件 名 是 myHtmlB115. html。 


042 ”裁剪 多 边 形 并 使 文字 环绕 其 边缘 显示 


此 实例 主要 通过 设置 元 素 的 shape-outside 属性 和 使 用 before 选择 器 实现 以 五 角 星 (多 边 形 ) 形 
状 裁剪 图 片 并 使 文字 环绕 其 边缘 显示 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 , 左 端的 文字 将 
沿 着 右 端的 五 角 星 图 片 边缘 换行 显示 ,如 图 042-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 042-1 
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<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<style> 
* { margin: Opx; padding: Opx; position: relative; box — sizing: border- box; } 
.content { padding: 10px; text— align: justify; color: black; font ~ size: 15px;} 
.content: :before { display: block; float: right;width: 385px; height: 356px; 
shape - outside: polygon(50% 0%, 63% 38%, 100% 38%, 69% 59%, 82% 
100%, 50% 75%, 18% 100%, 31% 59%,038%, 37% 38%);} 

p { margin: 10px; text - indent: 1px; font - size: 13px; } 

.myDiv {width: 385px;height: 356px; left :60px;top:10px;border — radius: Spx; 

position: absolute; background - image: url(img/B116. jpg); text- align: center; 

— webkit — clip - path: polygon(50% 0%, 63% 38%, 100% 38%, 69% 59%, 82% 100%, 50% 75%, 

18% 100%, 31% 59%, 038%, 37% 38%);} 

body { background - color: aquamarine;} 
</style></head> 
<body><div class = "myDiv"></div>< div class = "content"> 

<p> 黄 山 ,位 于 安徽 省 黄山 市 ,原名 加 山 ,唐朝时 更 名 为 黄山 , 取 自 " 黄 帝 之 山 "之 意 ,。 黄山 是 世界 自然 和 文化 
双 遗 产 , 世界 地 质 公园 ,中 国 十 大 名 胜 古迹 之 一 ,国家 5A 级 旅游 景区 。 黄 山 风景 区 面积 160.6 平方 千 米 , 东 起 黄 
狮 , 西 至 小 岭 脚 , 北 始 二 龙 桥 , 南 达 汤 口 镇 ,分 为 温泉 、 云 从 玉屏 ,北海 , 松 谷 , 钓 桥 、 浮 溪 、 洋 湖 、 福 固 九 个 管理 区 ， 
包括 200 多 个 大 小 景点 。 黄 山 以 奇 松 . 怪 石 . 云 海 . 温 泉 、 冬 雪 " 五 绝 "著称 于 世 , 拥 有 "天 下 第 一 奇 山 " 之 称 ." 五 岳 
归来 不 看 山 ,黄山 归来 不 看 岳 " 是 对 黄山 最 好 的 评价 。</p></div></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,content: :before 选择 器 的 shape- 
outside: polygon (50% 0%, 63% 38%, 100% 38%, 69% 59%, 82% 100%, 50% 75%, 18% 
100%,31% 59%,0 38%，37% 38%) 用 于 绘制 五 角 星 ,但 此 五 角 星 是 不 可 见 的 ,主要 用 于 控制 文本 
沿 五 角 星 的 边缘 显示 ; float:right 表示 多 边 形 (五 角 星 ) 在 文字 的 右边 ,如 果 需 要 让 多 边 形 在 文字 的 左 
边 , 则 应 为 float: left。myDiv 的 -webkit-clip-path: polygon(50 0%, 63% 38%, 100% 38% ,69% 
59%, 82% 100%, 50% 75%, 18% 100%, 31% 59%, 0 38%，37% 38%) 才 是 真正 按照 五 角 星 的 
形状 裁 前 图片 ,left:60px; top:10px 用 于 调整 裁剪 五 角 星 图 片 的 左上 角 的 位 置 ,可 以 根据 具体 情况 进 
行 调整 。 

此 实例 的 源 文件 名 是 myHtmlB116. html。 


043 ”通过 组 合 属性 值 实现 加 长 阴影 文字 
此 实例 主要 使 用 循环 组 合 属性 值 设置 text-shadow 属性 ,从 而 实现 为 文字 添加 加 长 阴影 的 特效 。 


当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 .加 长 阴影 文字 效果 如 图 043-1 所 示 。 有 关 此 实例 的 
要 代码 如 下 。 





出 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<script src="js/jquery— 3.1.1.min. js"></script>< script type = "text/javascript"> 
$ (function() { 
Var myShadow = ""; 
for (var i=1; i<=5; it+) { // 使 用 循环 组 合 多 个 阴影 属性 值 
myShadow += "black " ++"px "十 证 mpx Opx,"; 
} 
$ (".myBox").css("text — shadow", myShadow); }); 
</script > 
< style type= "text/css"> 
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.myBox {/ * font- family: "Rrial","Microsoft YaHei"," 黑 体 "," 宋 体 ",sans- serif;; xy/ 
font - size: 60px; font - weight: bold; display: inline— block; 
margin - top: 20px; letter - spacing:2px; color:green; } 
</style></head> 
<body>< div align = "center">< div class = "myBox"> 炫 酪 实例 集锦 </div></div> 
</body></html> 





上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,textrshadow 属性 用 于 给 文字 加 上 阴 
影 和 模糊 效果 。text-shadow 属性 的 设置 语法 如 下 。 


text — shadow: h— shadow v- shadow blur color; 


其 中 ,h-shadow 表示 水 平 阴 影 的 位 置 , 允许 为 负 值 ; v-shadow 表示 垂直 阴影 的 位 置 ,允许 为 负 
值 ; blur 可 选 , 表 示 模 糊 的 距离 ; color 可 选 ,表示 阴影 的 颜色 。 该 实例 中 的 $ (function () (…)…) 的 
作用 是 在 文字 的 下 方 复 制 多 个 text-shadow 阴影 层 .并 把 每 一 层 向 右 下 方向 移动 1px 距离 ,从 而 制作 
出 3D 效 果 , 即 设置 text-shadow: black lpx lpx 0px,black 2px 2px 0px, black 3px 3px Opx, black 
4px 4px 0px,black 5px 5px 0px, 产 生 的 效果 如 图 043-1 所 示 。 若 直接 设置 text-shadow: black 5px 
5px 0px, 产 生 的 效果 如 图 043-2 所 示 ,这 显然 不 是 创建 立体 字 。 

此 实例 的 源 文 件 名 是 myHtmlB369. html。 

百 - oo x 百 - oo x 
DD myHtmlB369 html x D myHemlB369html x 
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044 ”创建 渐变 背景 绘制 上 下 渐变 的 文字 


此 实例 主要 通过 设置 background-image、-webkit-background-clip 和 -webkit-text-fill-color 等 属 
性 实现 创建 渐变 色 背 景 绘 制 由 上 向 下 渐变 的 文字 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 , 渐 
变色 文字 “ 炫 酷 实例 ”的 效果 如 图 044-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 





<!doctype html >< html >< head >< meta charset = UTF -8> 
< style type = "text/css"> 
.text — gradient { font- size: 150px; font - family: ' 微 软 雅 黑 '; 
background — image: - webkit - gradient(linear, left top, left bottom, from(lightgreen), to(blue)); 
— webkit ~ background - clip: text; — webkit— text— fill- color: transparent; } 
*{ margin: 0; padding: 0;} 
</style></head> 
<body><h3 class = "text - gradient"> 炫 酷 实例 </h3 ></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 .background-image:-webkit-gradient 
(linear, left top ,left bottom, from(lightgreen) . to(blue)) 用 于 创建 上 绿 下 蓝 的 渐变 色 背 景 ; -webkit- 
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图 044-1 
background-clip: text 表示 使 用 当前 元 素 的 文本 线条 轮廓 裁剪 背景 ; 
transparent 表示 当前 文本 颜色 透明 。 此 实例 主要 通过 该 透明 策略 实现 在 文字 线条 中 显示 背景 中 渐变 
的 颜色 , 若 同 时 设置 text-fill-color 和 color,text-fill-color 定义 的 颜色 将 覆盖 color 属性 。 


此 实例 的 源 文件 名 是 myHtmlB186. html。 


045 创建 透明 层 绘 制 上 下 渐变 的 文字 


此 实例 主要 通过 设置 -webkit-mask-image 属性 创建 渐变 透明 层 , 从 而 绘制 由 上 向 下 渐变 的 文字 。 
当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,渐变 色 文字 * 炫 酷 实 例 集 锦 ” 的 效果 如 图 045-1 所 示 。 


有 关 此 实例 的 主要 代码 如 下 。 








-webkit-text-fill-color: 











-ox 
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<!doctype html ><html >< head ><meta charset = UIF -8> 


<style type = "text/css"> 
.text ~ gradient { font ~ size: Sem; font— Weight: bold; 
position: absolute; color:green;overflow— x:hidden;width:600px; } 
.text - gradient[myData] : :after { content: attr(myData); color:red; 
/x* 在 绿色 " 炫 酷 实例 集锦 "上 从 加 红色 " 炫 酷 实例 集锦 " * / 
position: absolute; left: 0; 


/* 通过 渐变 透明 层 控制 倒 加 效果 x*/ 
— webkit - mask — image: - webkit - gradient(linear, 0 top, 0 bottom, from(rgba(255,255,255 


1)), to(rgba(255,255,255, 0))); } 


</style></head> 
<body>< div class = "text - gradient" myData = " 炫 酷 实例 集锦 "> 炫 酷 实例 集锦 </div> 


</body></html> 
上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,-webkit-mask-image:-webkit- 
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gradient(linear, 0 top, 0 bottom, from(rgba(255,255,255,1)), to(rgba(255, 255,255, 0))) 用 于 创 
建 渐变 透明 层 ,其 中 的 from(rgba(255,255,255,1)) 和 to(rgba(255。255,255, 0))) 的 颜色 值 无 关 紧 
要 ,关键 是 rgba 的 第 4 个 参数 1 和 0, 该 参数 代表 透明 度 ,0 表示 完全 透明 .1 表示 完全 不 透明 。 

此 实例 的 源 文件 名 是 myHtmlB187. html。 


046 ”将 图 片 颜色 和 文本 颜色 混合 登 加 显示 


此 实例 主要 设置 元 素 的 mixBlendMode 属性 值 为 overlay ,从 而 实现 将 图 片 的 颜色 和 文本 的 颜色 
混合 全 加 显示 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 , 单 击 “ 县 加 模式 ”按钮 则 图 片 的 颜色 和 
文本 的 颜色 将 混合 释 加 在 一 起 ,如 图 046-1 所 示 ; 单 击 其 他 两 个 按钮 将 实现 按钮 标题 所 示 的 功能 。 有 
关 此 实例 的 主要 代码 如 下 。 
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<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<script src ="js/jquery - 3.1.1.min. js"></script>< script language = "javascript"> 
$ (document). ready(function() { 
$ ("#myBtnOverlay").click(function() { // 登 加 模式 
$ ("hl").css("mixBlendMode", "overlay"); 
DD); 


$ ("#myBtnHard").click(function() { // 强 光 模式 
$ ("hi").css("mixBlendMode", "hard— light"); 
DD); 
$ ("#myBtnSoft").click(function() { // 柔 光 模 式 
$ ("hi").css("mixBlendMode", "soft— light"); });}); 
</script> 
<style> 


div {width: 400px;height: 250px; border- radius: 5px; justify— content: center; 
background — image: url(img/B113. jpg);display: flex; align— items: center; 
background - repeat : no - repeat; background — size: 100% 100% ; margin: 3px;} 

hl {color: yellow;font — size:60px;} 

input { width: 120px; border ~ radius: 5px; margin: 5px;} 

</style></head> 
<body >< input type = "button" value = "县 加 模式 "id= "myBtnOverlay"/> 
< input type = "button" value = " 强 光 模 式 " id= "myBtnHard" /> 








< input type = "button" value= "和 柔 光 模 式 ” id= "myBtnSoft"/> 
<div><hl > 重庆 网 博 网 </hl></div></body></html> 





上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , $ ("hl1"). css ("mixBlendMode"," 
overlay" ) 用 于 设置 “重庆 园 博 园 ”文本 的 颜色 与 底层 图 片 的 颜色 进行 全 加 显示 。 除 了 overlay 以 外 ， 
mixBlendMode 属性 还 支持 属性 值 normal( 正 常 )、multiply( 正 片 释 底 )、screen( 滤 色 )、darken( 变 暗 )、 








lighten( 变 亮 ) .color-dodge (颜色 减 淡 )、color-burn( 颜 色 加 深 )、hard-light( 强 光 )、soft-light( 柔 光 ) 、 
difference( 差 值 ) .exclusion( 排 除 ) .hue( 色 相 ) 、saturation( 饱 和 度 )、color( 颜 色 )、luminosity (亮度 )、 
initial( 初 始 ) ,inherit( 继 承 ) .unset( 复 原 ) 

此 实例 的 源 文 件 名 是 myHtmlB113. html 


047 ”使 用 自 定义 字体 显示 手写 文字 


此 实例 主要 通过 使 用 自 定义 字体 规则 @font-face 提取 自 定义 字体 库 文件 中 的 字体 显示 文本 。 当 
在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,使 用 自 定 义 字 体 显示 的 唐诗 如 图 047-1 所 示 。 有 关 此 实 
例 的 主要 代码 如 下 。 
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<!doctype html >< html >< head >< meta charset = "UTF — 8"> 
<style type= "text/css"> 
@font - face { font - family: cus_font; src: url('Fonts/cus font.otf'); } 
p { margin: 5px; text - align: center; 
width: 395px; padding: 10px; 
border: 1px solid # BFBFBF; background — color: black; 
color: white; box - shadow: 2px 2px 3px gray; font — size: 35px; 
— webkit — writing - mode: horizontal - tb;font ~ family: cus_font;} 
</style></head> 
<body >< center><p> 黄 河 远 上 白云 间 ,<br> 一 片 孤城 万 们 山 。<br> 
羌 稍 何须 她 杨柳 ,<br > 春风 不 度 玉 门 关 。</p></center></body></htnl> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,@font-face 是 CSS3 中 的 一 个 模块 ， 
其 主要 作用 是 把 定义 的 字体 嵌入 到 网 页 中 。@font-face 的 语法 如 下 。 


@font - face{font ~ properties} 





其 中 ,font-properties 的 相关 属性 及 其 属性 值 的 说 明 如 表 047-1 所 示 。 
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表 047-1 fontproperties 的 相关 属性 及 说 明 

















字体 属性 属 性 值 说 明 
font-family name 必需 的 ,定义 字体 的 名 称 
Src URL 必需 的 ,定义 该 字体 下 载 的 网 址 
normal 
condensed 





ultra-condensed 





extra-condensed 
font-stretch semi-condensed 可 选 , 定 义 该 字体 如 何 被 拉 长 ,默认 值 是 “正常 ” 
expanded 











semi-expanded 





extra-expanded 





ultra-expanded 





normal 
font-style italic 可 选 ,定义 该 字体 样式 ,默认 值 是 “正常 ” 
oblique 











normal 
bold 
100 
200 
300 
font weight 400 可 选 ,定义 字体 的 粗细 ,默认 值 是 “正常 ” 
500 
600 
700 
800 
900 
unicode-range unicode-range 可 选 ,定义 该 字体 支持 Unicode 字符 的 范围 ,默认 值 是 "1 十 0 一 10 FFFF” 






































实际 上 , 除 表 047-1 之 外 的 大 多 数 常 用 字体 属性 均 支持 .例如 font-size。 
此 实例 的 源 文件 名 是 myHtmlB242. html。 


048 ”设置 边框 线 高 仿 字 库 中 的 带 圈 文字 


此 实例 主要 通过 设置 元 素 的 border-radius 属性 为 50%, 从 而 实现 高 仿 字库 中 的 带 圈 文 字 特 效 。 
当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,所 有 文字 都 被 圈 在 圆 形 里 面 ,如 图 048-1 所 示 。 有 关 此 
实例 的 主要 代码 如 下 。 











<!doctype html >< html>< head >< meta charset = "UTF - 8"> 
<script src="js/jquery -3.1.1.min.js"></script >< script type = "text/javascript"> 
$ (function() { // 将 所 有 文字 逐 字 拆 解 成 span 
Var myText =$ ('p'). html(); 
var myLetter = []; 
for (var i= 0; i<myText. length; i++) { 
myLetter[i] ='<span>'+myText[i] +'</span >'; } 
$ ('p').html(myLetter); }); 
</script> 


第 1 部 分 








< style type = "text/css"> 
/* 设 置 文字 显示 区 域 * / 
p{ width:300px; margin: 30px auto; line - height: 40px; } 
/x 设置 带 图 文字 样式 * / 
p span { margin: 3px; padding: 3px;border - radius: 50% ; border: 1px solid gray; 
background - color: black; color: white; text - shadow: 2px 2px 5px gray; } 
/x 创建 有 阴影 的 盒子 */ 
div { border - radius: 10px; margin: 15px; font- family: 华文 楷体 ; 
font - weight: bold;font - size: 24px; text - align: center; 
width: 365px; padding: 10px; border: 1px solid # BFBFBF; 
background — color: snow; box— shadow: 2px 2px 3px gray; 
一 webkit - writing - mode: horizontal - tb; } 
body { background- color: lightgray; } 
</style></head> 
<body >< center ><div><p> 故 网 东 望 路 漫漫 双 袖 龙 钟 泪 不 干 马上 相 着 无 纸 笔 任 君 传 语 报 平安 </p></div> 
</center ></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,borderradius: 50% 表 示 元 素 (span) 
四 角 的 圆 角 半径 均 为 宽 高 的 50%, 即 此 元 素 由 矩形 变 为 圆 形 (或 椭圆 形 )。 在 CSS3 中 ,border-radius 
属性 是 一 个 简写 属性 ,用 于 设置 4 个 border- * -radius 属性 ,该 属性 的 语法 格式 如 下 。 

border-radius: 1- 4 length| %$ /1— 4 length| % ; 


如 果 以 length 表示 , 则 以 宽度 或 高 度 的 像素 值 为 大 小 ; 如 果 以 名表 示 , 则 以 宽度 或 高 度 的 像素 值 
的 百分比 为 大 小 。 此 外 ,如 果 省 略 bottom-left( 左 下 角 ), 则 与 top-right (右上 角 ) 相 同 ; 如 果 省 略 
bottom-right( 右 下 角 ) , 则 与 top-left( 左 上 角 ) 相 同 ; 如 果 省 略 top-right( 右 上 和 角 ), 则 与 top-left( 左 上 
角 ) 相 同 。 

此 实例 的 源 文件 名 是 myHtmlB258. html。 
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图 048-1 


049 ”使 用 自 定义 字体 模拟 LED 文字 风格 


此 实例 主要 将 自 定义 字体 规则 @font-face 导入 LED 字库 ,从 而 实现 以 LED 的 风格 显示 文字 。 
当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 . 单 击 “ 以 LED 样式 显示 文字 ”按钮 将 以 LED 的 风格 显 
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示 “HTML5 AND CSS3”, 如 图 049-1 所 示 ; 单 击 * 以 默认 样式 显示 文字 ?按钮 将 以 默认 风格 显示 
“HTML5 AND CSS3”。 有 关 此 实例 的 主要 代码 如 下 。 
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<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<script src= "js/jquery -3.1.1.min. js"></script >< script type = "text/javascript"> 
$ (function( ){ 
$ ("#1edstyle"). click(function(){ // 以 IED 样 式 显示 文字 
$ ("div h2").css("font - family","led"); 
D); 
$("#defaultStyle").click(function(){ ”// 以 默认 样式 显示 文字 
$ ("div h2").css("font — family", "initial"); });}); 
</script > 
< style type= "text/css"> 
/* 导 人 自 定义 字体 myLed.TTF * / 
@font - face { font- family: led; src: url(fonts/myLed. TTF); } 
/* 设 置 文 字 块 基本 样式 * / 
div h2{ font - family: led; font - size: 60px;} 
button{ margin - top: 20px; width:190px; } 
</style></head> 
<body>< div align = "center"> 
<button id = "ledStyle"> 以 LED 样式 显示 文字 </button > 


<button id= "defaultStyle"> 以 默认 样式 显示 文字 </button ><br> 
<h2 > HTML5 AND CSS3 </h2></div> 


</body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,.@fontrface 是 CSS3 中 的 一 个 模块 ， 
其 主要 作用 是 把 用 户 自 定 义 的 字体 嵌入 到 网 页 中 ; font-family: led 表示 使 用 led 字体 显示 文字 , 注 
意 ,led 字体 在 自 定 义 字 库 文件 myLed. TTF 中 ,在 使 用 之 前 必须 使 用 @font-face 导入 。 

此 实例 的 源 文 件 名 是 myHtmlB348. html。 


050 ”在 二 维 平面 中 旋转 单行 的 白色 阴影 文字 


此 实例 主要 通过 综合 使 用 text-shadow 和 transform 属性 实现 在 二 维 平面 中 旋转 一 行 白 色 阴 影 
特效 文字 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 .3D 阴影 效果 的 “ 莫 愁 前 路 无 知己 ”将 逆 时 针 
旋转 10°, 如 图 050-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 








第 1 部 分 x 《> 
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<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<style type= "text/css"> 
hl { color: white; text - shadow:3px 3px 6px # 000000; font — size: 48px; 
/* 反 方向 旋转 10" */ 
transform: rotate( - 10deg); } 
div { width:450px; height:250px; line— height: 250px; 
background - image: url(img/B240. jpg);background - size: 100% 100%;} 
* { margin: 0; overflow: hidden; } 
</style></head> 
<body >< center >< div>< hl > 葛 悉 前 路 无 知己 </hl></div></center></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,text-shadow:3px 3px 6px #000000 
表示 阴影 文字 的 水 平 阴影 和 垂直 阴影 距离 是 3px, 模 糊 距离 是 6px, 阴 影 颜 色 是 黑色 ; transform: 
rotate( 一 10deg) 表 示 将 阴影 文字 道 时 针 旋 转 10°。 

此 实例 的 源 文 件 名 是 myHtmlB240. html。 


051 ”以 不 同 闫 色 显示 汉字 的 上 、 下 两 部 分 


此 实例 主要 通过 设置 overflow 属性 为 hidden 实现 以 不 同 的 颜色 显示 一 个 汉字 的 上 、 下 两 部 分 。 
当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 性 醴陵 "的 上 半 部 分 以 灰色 显示 ,下 半 部 分 以 蓝 色 显 示 ， 
如 图 051-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 


<!doctype html >< html >< head >< meta charset = UTF -8> 
< style type = "text/css"> 
/* 在 全 部 显示 文字 时 用 蓝 色 * / 
.myText { font: 240px 宋体 ; color: blue; } 
/* 仅 上 半 部 显示 文字 时 用 浅 灰色 * / 
.myHalf { height: 150px; position: absolute; overflow: hidden; color: lightgray; } 
</style></head> 
<body>< div>< span class = "myText">< span class = "myHalf"> 醴 陵 </span > 醴陵 </span> 
</div></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,起 关键 作用 的 是 height: 150px; 
position: absolute;overflow: hidden, 它 首先 以 蓝 色 显 示 240px 的 “醴陵 ” ,然后 在 position: absolute 
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属性 的 作用 之 下 ,在 该 蓝 色 “ 醴 陵 ”" 上 释 加 一 个 同样 大 小 的 灰色 “醴陵 ”, 由 于 规定 灰色 “醴陵 ”的 高 度 只 
有 150px, 并 且 规 定 隐藏 (overflow: hidden) 超 出 150px 部 分 的 内 容 ,这 样 就 导致 蓝 色 “醴陵 ”的 下 面部 
分 露出 来 了 ,从 而 造成 上 灰 下 蓝 的 显示 效果 。 在 CSS 中 ,overflow 属性 规定 当 内 容 溢 出 元 素 框 (盒子 ) 
时 发 生 的 事情 ,overflow 属性 的 语法 格式 如 下 。 


分 。 


overflow: visible |hidden| scroll | auto | inherit 


其 中 ,各 属性 值 的 说 明 如 下 。 

(1) visible: 默认 值 ,表示 内 容 不 会 被 修剪 ,会 呈现 在 元 素 框 之 外 。 

(2) hidden: 该 属性 值 表示 内 容 会 被 修剪 ,并 且 其 余 内 容 是 不 可 见 的 。 

(3) scroll: 该 属性 值 表示 内 容 会 被 修剪 ,但 是 浏览 器 显示 滚动 条 以 便 查看 其 余 的 内 容 。 
(4) auto: 该 属性 值 表示 如 果 内 容 被 修剪 , 则 浏览 器 显示 滚动 条 以 便 查 看 其 余 的 内 容 。 
(5) inherit: 该 属性 值 表示 应 该 从 父 元 素 继承 overflow 属性 的 值 。 

此 实例 的 源 文件 名 是 myHtmlB182. html。 


052 ”以 不 同 颜色 显示 汉字 的 左 、 右 两 部 分 


此 实例 主要 通过 设置 overflow-x 属性 为 hidden 实现 以 不 同 的 颜色 显示 一 个 汉字 的 左右 两 部 
当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,“ 国 "的 左 半 部 分 以 灰色 显示 , 右 半 部 分 以 蓝 色 显 





示 , 如 图 052-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 


<!doctype html ><html ><head>< meta charset = UIF -8> 
<style type= "text/css"> 
.myText { font: 400px 宋体 ; color: blue; } /=* 在 全 部 显示 文字 时 用 蓝 色 * / 
/* 仅 左 半 部 显示 文字 时 用 浅 灰 色 * / 
.myHalf { width: 200px; position: absolute;overflow— x:hidden;color: lightgray;} 
</style></head> 
<body>< div>< span class = "myText">< span class = "myHalf"> 国 </span> 国 </span></div> </body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,起 关键 作用 的 是 width: 200px; 





position: absolute; overflow-x: hidden. 它 首先 以 蓝 色 显示 400px 的 “ 国 ”, 然 后 在 position: absolute 
属性 的 作用 之 下 ,在 该 蓝 色 “ 国 ”*” 上 丢 加 一 个 同样 大 小 的 灰色 “ 国 ”, 由 于 规定 灰色 “ 国 ” 的 宽度 只 有 
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200px, 并 且 规 定 隐藏 (overflow-x: hidden) 超 出 200px 部 分 的 内 容 , 这 样 就 导致 蓝 色 * 国 ”的 右 半 部 分 
露出 来 了 ,从 而 造成 左 灰 右 蓝 的 显示 效果 。 在 CSS3 中 ,overflow-x 属性 规定 在 溢出 元 素 内 容 区 域 时 
是 否 对 内 容 的 左 、 右 边缘 进行 裁剪 ,overflow-x 属性 的 语法 格式 如 下 。 





overflow - x: visible|hidden|scroll|auto|no - display| no— content; 


其 中 ,各 属性 值 的 说 明 如 下 。 

(1) visible: 该 属性 值 表示 不 裁剪 内 容 ,可 能 会 显示 在 内 容 框 之 外 。 

(2) hidden: 该 属性 值 表示 裁剪 内 容 ,不 提供 滚动 机 制 。 

(3) scroll: 该 属性 值 表示 裁剪 内 容 ,提供 滚动 机 制 。 

(4) auto: 该 属性 值 表 示 如 果 溢 出 内 容 框 , 则 应 该 提供 滚动 机 制 。 

(5) no-display: 该 属性 值 表示 如 果 内 容 不 适合 内 容 框 , 则 删除 整个 框 。 
(6) no-content: 该 属性 值 表示 如 果 内 容 不 适合 内 容 框 , 则 隐藏 整个 内 容 。 
此 实例 的 源 文件 名 是 myHtmlB183. html。 
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053 ”模拟 古诗 的 风格 从 上 到 下 显示 文本 


此 实例 主要 通过 设置 元 素 的 writing-mode 属性 实现 以 类 似 于 古诗 的 风格 从 上 到 下 显示 文本 。 当 
在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,默认 情况 下 古诗 将 按照 水 平方 向 从 左 到 右 显示 , 单 击 “以 
垂直 方式 从 右 到 左 显示 ”按钮 , 则 古诗 的 显示 风格 如 图 053-1 所 示 ; 单 击 * 以 垂直 方式 从 左 到 右 显 示 ” 
按钮 , 则 古诗 的 显示 风格 如 图 053-2 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<script src="js/jquery— 3.1.1.min.js"></script >< script language = " javascript"> 
$ (document). ready(function() { 
$ ("#myBtnVerticalRL").click(function() { // 以 垂直 方式 从 右 到 左 显示 
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$ ("div").css("— webkit — writing— mode", "vertical — r1"); 
Ds; 
$ ("#myBtnVerticalLR").click(function() { // 以 垂直 方式 从 左 到 右 显示 
$ ("div").css("— webkit — writing— mode", "vertical — 1r"); });}); 
</script> 
<style type= "text/css"> 
*{ margin: 0; padding: 0; } 
div{/* 创建 有 阴影 的 盒子 * / 
float:left; margin:5px; font - family: 华文 楷体 ;font - size:24px; 
text - align: center; width:395px;padding:10px;border:1px solid # BFBFBF; 
background - color: lightblue; box — shadow: 2px 2px 3px gray; 
— webkit — writing - mode: horizontal - tb;} 
input {width:200px; border - radius:2px;margin:5px; padding: 3px;} 
</style></head> 
<body ><p>< input type = "button" value= "以 垂直 方式 从 右 到 左 显示 "id= "myBtnVerticalRL"/> < input type = 
"button" value = "以 垂直 方式 从 左 到 右 显示 ”id= "myBtnVerticalLR"/></p> 
<div><h4 > 凉 州 词 /hd ><p> 黄 河 远 上 白云 间 ,<br > 一片 孤城 万 倪 山 。<br > 羌 和 何须 怨 杨 柳 ,<br > 春风 不 度 玉 
门 关 。</p></div></body></html> 





上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , writing-mode 用 于 控制 文本 的 显示 
方向 ,该 属性 原本 是 控制 内 联 元 素 的 显示 的 ( 即 所 谓 的 文本 布局 Text Layout) ,因为 在 亚洲 ,尤其 像 中 
国 这 样 的 东亚 国家 ,有 时 文字 的 排版 不 是 水 平 式 的 ,而 是 垂直 式 的 ,例如 中 国 的 古诗 ,古文 。writing- 
mode 属性 主要 有 下 列 3 个 属性 值 。 

(1) horizontal-tb: 该 属性 值 是 默认 值 ,表示 文本 流 是 水 平方 向 (horizontal) 的 ,内 容 是 从 上 往 下 
(tb;top-bottom) 堆 释 的 。 

(2) vertical-rl: 该 属性 值 表示 文本 流 以 垂直 方向 (vertical) 展示 .阅读 的 顺序 是 从 右 往 左 (rl; 
right-left) ,与 中 国 古 诗 的 阅读 顺序 一 致 。 

(3) vertical-lr: 该 属性 值 表示 文本 流 以 垂直 方向 (vertical) 展 示 ,阅读 的 顺序 是 默认 的 从 左 往 右 
(lr:left-right) ,也 就 是 仅仅 水 平 变 垂直 。 

此 实例 的 源 文件 名 是 myHtmlB134. html。 











图 053-1 图 053-2 
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054 ”绘制 不 规则 图 形 实现 不 规则 文字 布局 


此 实例 主要 通过 设置 元 素 的 shape-outside 和 clip-path 属性 以 不 规则 的 图 形 实现 不 规则 的 文字 
布局 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,以 不 规则 的 图 形 实现 的 文字 布局 效果 如 图 054-1 





所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 054-1 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 


<style> 
x { margin: Opx; padding: Opx; position: relative;box— sizing: border — box;} 


.container { width: 100vw; height: 100vh; 
overflow: hidden;background— color: aqua;} 
. Shaped {background: url("img/B114. jpg") no - repeat top/cover black; 
width: 60vw;height: 100vh;float: right; - webkit - shape - margin: 20px; 
— webkit - shape ~ outside: polygon(0 0, 100% 0, 100% 100%, 90% 100% ); 
— webkit ~ clip— path: polygon(0 0, 100% 0, 100% 100%, 80% 100%);} 
.content {padding: 10px; text ~ align: justify;color: black; font ~ size: 15px;} 
.content hl {width: 120px;height: 300vh;line - height: 1; float: left; 
padding - top: 100px; font - size: 30px;margin - top: Opx; 
shape - outside: polygon(0 0, 100% 0, 50% 100%, 0100%);} 
p {text - indent: lpx;} 


</style></head> 
<body>< div class = "container">< div class = "shaped"></div > 


<div class = "content">< hl > 网 博 网 </hl > 
<p> 网 博 网 位 于 重庆 市 北部 新 区 龙 景 湖 公园 , 四 面临 街 , 可 远 上 晃 结 云 山 、 鸡 公 山 ,嘉陵 江 温 塘 峡 、 观 音 峡 等 山 


景 .水景 . 峡 景 和 北碚 城市 景观 , 可 满足 游览 休息 。 园 博 园 ,是 一 个 集 自然 景观 和 人 文 景观 为 一 体 的 超大 型 城市 
生态 公园 。2014 年 5 月 ,重庆 网 博 园 风 景区 正式 被 国家 旅游 局 批准 为 国家 AAAA(4A) 级 风景 名 胜 区 。</p></div> 
</div></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,shape-outside 属性 值 用 于 创建 不 规 
则 图 形 。 在 一 般 情况 下 ,shape-outside 属性 只 能 被 应 用 于 浮动 元 素 , 并 且 只 能 应 用 于 块 级 元 素 , 如 果 
需要 在 非 块 级 元 素 上 使 用 这 些 属性 ,必须 先 把 元 素 声明 为 块 级 。shape- * 值 有 3 种 赋值 方式 , 即 自动 、 
基本 图 形 或 者 图 片 链 接 。 如 果 被 设置 为 自动 ,浮动 元 素 将 继续 作为 传统 的 盒子 模型 进行 泻 染 。 绘 制 
方法 包括 rectangle、inset-rectangle、circle、ellipse、polygon 等 。 如 果 属 性 被 设置 为 图 片 链接 ,浏览 器 
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会 按照 图 片 的 alpha 通道 来 绘制 图 形 形 状 。 
此 实例 的 源 文件 名 是 myHtmlB114. html。 


055 在 段落 文本 的 右上 角 放 置 文字 环绕 图 片 


此 实例 主要 使 用 before 选择 器 预 留 空白 空间 放置 图 片 , 从 而 实现 在 段落 文本 的 右上 和 角 放 置 文字 
绕 图 片 的 效果 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,在 段落 文本 的 右上 角 放 置 文字 环绕 
图 片 的 效果 如 图 055-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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黄山 ， 位 于 安徽 省 黄山 
市 ， 原 名 网 山 ， 唐 朝 时 更 
名 为 黄山 ， 取 自 “ I 





大 小 景点 。 黄山 以 疝 松 、 怪 石 、 云 


EN 
ee ， 世 括 200 多 个 
名 .要 编 ” 著称 于 世 ， 拥 有 “ 天 下 第 一 奇 山 ” 之 
家: eT 黄山 归来 不 看 岳 ”是 对 菌 山 最 好 的 评价 * 








图 055-1 


<! doctype html >< html >< head >< meta charset = "UTF - 8"> 
<style> 
x* {margin: 0px;padding: Opx;position: relative;box- sizing: border - box;} 
.myBox {width: 410px;} 
.content {padding: 10px;text ~ align: justify; color: black; font - size: 15px;} 
.content: :before {content: ""; display: block; float: right; 
width: 240px;height: 195px;} 
p {text - indent: 1px; font - size: 13px;} /* 文 本 显示 样式 */ 
img {width: 236px; height: 191px;left: 170px;top: 10px; 
border - radius: 5px; position: absolute;} /x 图 像 显 示 样式 x/ 
body {background - color: aquamar ine;} 
</style></head> 
<body>< div class = "myBox">< img src = "img/B117. jpg"/> 
<div class= "content"><p> 黄 山 ,位 于 安徽 省 黄山 市 ,原名 旷 山 ,唐朝时 更 名 为 黄山 , 取 自 "黄帝 之 山 " 之 意 。 
黄山 是 世界 自然 和 文化 双 遗 产 , 世 界 地 质 公园 ,中 国 十 大 名 胜 古 迹 之 一 ,国家 5RA 级 旅游 景区 。 黄 山 风 景区 面积 
160. 6 平方 千 米 , 东 起 黄 狮 , 西 至 小 岭 脚 , 北 始 二 龙 桥 , 南 达 汤 口 镇 , 分 为 温泉 ` 云 谷 .玉屏 .北海 、. 松 谷 . 钓 桥 、 浮 溪 、 
洋 湖 , 福 固 九 个 管理 区 ,包括 200 多 个 大 小 景点 。 黄 山 以 奇 松 , 怪 石 、 云 海 、 温 泉 、 冬 雪 " 五 绝 " 著 称 于 世 , 拥 有 "天 
下 第 一 奇 山 "之 称 ." 五 岳 归 来 不 看 山 , 黄山 归来 不 看 岳 " 是 对 黄山 最 好 的 评价 。</p ></div></div></body> 
</html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,content:: before 中 的 width 和 
height 属性 值 通常 与 img 中 的 width 和 height 属性 值 一 致 ,因为 它们 表示 相同 的 空间 位 置 和 大 小 ; 
content: : before 中 的 float: right 表示 预 留 空间 在 右边 。 

此 实例 的 源 文件 名 是 myHtmlB117. html。 





第 1 部 分 文字 《G67》 


056 在 段落 文本 的 左上 角 放 置 文字 环绕 图 片 


此 实例 主要 使 用 before 选择 器 预 留 空白 空间 放置 图 片 , 从 而 实现 在 段落 文本 的 左上 和 角 放 置 文字 
绕 图 片 的 效果 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,在 段落 文本 的 左上 角 放 置 文字 环绕 
图 片 的 效果 如 图 056-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 


-Ex 
D myHeml8118 html x\ 
¢ 3 CC 0 fie///D/myWorkW/myHtmlB1183Y| 三 


乐山 大 使 ， 地 处 四 川 省 乐山 
市 ， 几 江 、 蜂 中 村 全 -全 








石刻 
齐 ， 足 坑 大 江 ， 双 手 抚 肤 ， 大 人 休 恋 和 相 神 势 染 牲 ， 休 山 涂 成 ， 和 临 
江 危 业 * 大 佛 通 高 71 米 ， 头 高 14. 7 米 ， 头 宽 10 米 ， 发笑 1051 个 ， 耳 长 
6.7 米 ， 角 和 眉 长 5. 6 米 ， 喻 巴 和 眼 长 3. 3 米 ， 缀 高 3 米 ， ， 手 
指 长 8. 3 米 ， 从 脏 盖 到 购并 28 米 ， 枝 背 窜 9 米 ， 针 面 可 国 此 百人 以 上 。 








<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<style> 
x* { margin: Opx; padding: Opx; position: relative;box— sizing: border - box;} 
/* 图 文 混合 放置 块 * / 
. myBox {width: 410px;} 
/* 段 落 文本 显示 样式 * / 
.content {padding: 10px;text — align: justify;color: black;font - size: 15px;} 
.content: :before { content: ""; display: block; float: left; 
width: 225px; height: 165px;} 
p { text - indent: 1px; font- size: 13px;} /* 文 本 显示 样式 */ 
img { width: 215px;height: 155px;left: 10px;top: 10px; 
border - radius: 5px; position: absolute; } ” /x* 图像 显 示 样 式 */ 
body { background- color: aquamarine;} 
</style></head> 
<body>< div class = "myBox">< img src = "img/B118. jpg"/> 
<div class= "content"><p> 乐 山大 佛 ,地 处 四 川 省 乐山 市 ,岷江 .青衣 江 和 大 渡河 三 江 汇流 处 ,与 乐山 城 隔 江 
相 望 , 北 距 成 都 160 余 公 里 。 它 是 依 凌 云 山 栖霞 峰 临 江 峭 壁 羡 造 的 一 尊 大 佛 , 始 羡 于 唐 开元 元 年 (公元 713 年 )， 
历时 90 余年 方 建成 , 建 高 71 米 , 有 " 山 是 一 尊 佛 , 佛 是 一 座 山 "之 称 , 是 世界 上 最 大 的 石刻 大 佛 。 乐 山大 佛 头 与 
山 齐 , 足 踏 大 江 , 双手 抚 膝 , 大 佛 体态 匀称 , 神 势 肃穆 , 依 山北 成 , 临 江 危 坐 。 大 佛 通 高 71 米 , 头 高 14.7 米 , 头 宽 
10 米 ,发 器 1051 个 , 耳 长 6.7 米 , 鼻 和 由 长 5.6 米 ,嘴巴 和 眼 长 3.3 米 , 颈 高 3 米 , 肩 宽 24 米 ,手指 长 8.3 米 ,从 膝 
盖 到 脚背 28 米 , 脚 背 宽 9 米 ,脚面 可 围 坐 百人 以 上 。</p></div></div></body></htnl > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,content:: before 中 的 width 和 
height 属性 值 表示 预 留 的 放置 图 片 的 空间 ,因此 它 通常 与 img 中 的 width 和 height 属性 值 近似 ; 
content: :before 中 的 float: left 表示 预 留 空间 在 左边 。 注 意 ,content: :before 中 的 content: "看 起 来 
没有 内 容 , 但 不 能 删除 。 

此 实例 的 源 文件 名 是 myHtmlB118. html。 





HTML5+CSS3 炫 酷 应 用 实例 集锦 


057 ”在 段落 文本 的 左下 角 放置 文字 环绕 图 片 


此 实例 主要 使 用 before 选择 器 预 留 空白 空间 放置 图 片 , 从 而 实现 在 段落 文本 的 左下 角 放 置 文字 
绕 椭圆 图 片 的 效果 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,在 段落 文本 的 左下 角 放 置 文字 


环绕 椭圆 图 片 的 效果 如 图 057-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 





百 - 5 x 


DD myHemls119 html x 
© Dfile///D/myWorkK/myHtmlB119.html 字 三 


走时 二 位 于 大 长 灾 屿 向 炉 ( 售 陋 西 汕 西安 市 两) 的 大 莫 思 竹内， 又 名 " 蓝 
天 兰 径 具 岗 之 路 帝 回 长 安 的 


， 重 加 盖 至 九 导 ， 丙 后 层 元 和 高 健 
又 有 都 次 冯 更 ， 贡生 加 iy， 前 襄 4.517 米 ， 下 二 
边 长 25. 5 米 * 大 天 顽 作 为 现存 重 早 、 吉 醒 熏 大 的 磊 代 四 方 楼 加 式 苦 声 ， 是 





这 神 十 印度 货 地 的 建议 形式 戎 
镶 教 传 入 中 原 坦 区 ， | 
化 的 肉 型 物证 ， 


国务 度 公 布 大 荐 堪 为 


斯 斯 坦 三 国联 合 申 | 
长 容 - 天 山 幢 考 的 器 网 中 全 站 让 汪 大 不 世界 遗产 名 








图 057-1 


<! doctype html >< html >< head >< meta charset = "UTF - 8"> 
<style> 
* {margin: Opx;padding: Opx;position: relative;box- sizing: border — box;} 
. myBox {width: 450px;} 
.content {padding: 10px;text — align: justify;color: black;font - size: 15px;} 
.content: :before {content: "";display: block; float: left; 
width: 450px; height: 350px; background — size: 100% 100%; 
shape - outside: ellipse(150px 100px at 150px 180px); 
— webkit - clip - path: ellipse(140px 90px at 150px 180px); 
background — image: url(img/B119. jpg) ;background - repeat: no - repeat;} 
p {margin: 5px;text— indent: 1px;font - size: 13px;} 
body {background - color: aquamarine;} 
</style></head> 
<body><div class = "myBox"><div class = "content"> 
<p> 大 脸 塔 位 于 唐 长 安 城 普 昌 坊 ( 今 陕西 省 西安 市 南 ) 的 大 慈恩 寺内 , 又 名 "慈恩 寺 塔 "。 唐 永 徽 三 年 (652 
年 ), 玄 灶 为 保存 由 天 竺 经 丝绸 之 路 带 回 长 安 的 经 卷 佛像 主持 修建 了 大 雁 塔 ,最 初 五 层 ,后 加 盖 至 九 层 ,再 后 层 数 
和 高 度 又 有 数 次 变更 ,最 后 固定 为 今天 所 看 到 的 七 层 塔 身 , 通 高 64. 517 米 , 底 层 边 长 25.5 米 。 大 雁 塔 作为 现存 
最 早 、 规 模 最 大 的 唐 代 四 方 楼 阁 式 砖 塔 ,是 佛 塔 这 种 古 印度 佛寺 的 建筑 形式 随 佛教 传人 中 原 地 区 ,并 融入 华夏 文 
化 的 典型 物证 ,是 凝聚 了 汉族 劳动 人 民智 慧 结晶 的 标志 性 建筑 。1961 年 3 月 4 日 , I 
全 国 重点 文物 保护 单位 。2014 年 6 月 22 日 ,在 卡塔尔 多 哈 召 开 的 联合 国教 科 文 组 织 第 38 届 世 界 遗产 委员 会 
议 上 ,大 雁 塔 作为 中 国 、 哈 萨克斯 坦 和 吉尔 吉 斯 斯 坦 三 国联 合 申 遗 的 "丝绸 之 路 :长安 - 天 山 廊 道 的 路 网 ” 人 
处 遗址 点 成 功 列 入 «世界 遗产 名 录 »。</p></div></div> </body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,content:: before 中 的 width 和 


height 属性 值 表示 预 留 的 空间 ; shape-outside: ellipse(150px 100px at 150px 180px) 中 的 150px 
100px 分 别 表示 空白 椭圆 的 两 个 半径 ,150px 180px 表示 空白 椭圆 的 圆心 坐标 ,该 空白 椭圆 用 于 控制 








第 1 部 分 x 《> 


文本 沿 着 椭圆 边缘 进行 换行 ; -webkit-clip-path: ellipse (140px 90px at 150px 180px) 中 的 140px 
90px 分 别 表示 裁剪 精 加 的 两 个 半径 ,150px 180px 表示 裁剪 机 加 的 圆心 坐标 ,该 裁剪 本 圆 即 是 实例 中 
显示 的 椭圆 图 片 。 注 意 ,content: :before 中 的 content: "" 看 起 来 没有 内 容 , 但 不 能 删除 , 它 起 着 占 位 
的 作用 。 

此 实例 的 源 文件 名 是 myHtmlB119. html。 


058 ”对 所 有 段落 的 第 一 个 字 设 置 加 大 、 下 沉 效 果 


此 实例 主要 在 first-letter 选择 器 中 把 首 字 的 fontrsize 值 设置 较 大 ,然后 通过 float 实现 对 所 有 有 段 
落 的 第 一 个 字 以 加 大 .下 沉 效果 显示 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,3 个 段落 的 第 一 
个 字 加 大 、 下 沉 的 效果 如 图 058-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 


百 - 5 x 
D myHemlB111heml x \ 
© 3 © Dfile///D/myWork/myHtmlB111.html 安 轩 











鱼 宾 斯 坦 生来 赋 有 灵 比 的 十 只 手指 ， 读 谱 能 力 之 强 也 是 超群 
问 的 。 Est i 流利 酒 脱 而 又 
布局 严谨 ， 有 时 又 细腻 而 富 于 诗 


乱 洛 维 茨 是 20 世 纪 最 令 人 瞩目 的 大 钢琴 家 ， 技 巧 高 起 ， 举 世 无 


el 音乐 更 趋向 深刻 完美 ， 表 现 


毛 叶 和 潜 波 利 尼 ， 意 大 利 钢琴 家 ，1942 年 出 生 ，9 岁 首次 公 
演 ，1959 年 毕业 于 米兰 音乐 学 院 ， 次 年 参加 第 六 届 华 沙 国际 
肖邦 钢琴 大 赛 ， 村 得 第 一 ， 由 此 华声 国际 乐坛 。 





图 058-1 


<! doctype html >< html>< head><meta charset = "UTF - 8"> 
<style> 
div {display: inline - block;width: 450px; height: 218px;padding: 15px; 
margin: 10px; background — color: #FFF; border: 1px solid # EEE; 
box - shadow: 5px 5px 5px lpx #999,0 0 40px rgba(0, 0, 0, 0.06) inset; 
position: relative;border - radius: 5px;} 
p::first— letter { color: red;float: left;font - size: 30px;font — weight: bold;} 
body { background - color: lightgray;} 
</style></head> 
<body><div><p> 鲁 宾 斯 坦 生来 赋 有 灵敏 的 十 只 手指 , 读 谱 能 力 之 强 也 是 超群 的 。 他 的 演奏 充满 炽热 的 情感 和 
充沛 的 精力 ,流利 酒 脱 而 又 布局 严谨 ,有 时 又 细腻 而 富 于 诗意 。</p> 
<p> 堆 洛 维 茨 是 20 世纪 最 令 人 瞩目 的 大 钢琴 家 ,技巧 高 超 ,举世 无 双 。 他 的 演奏 技巧 辉煌 而 潇洒 ,音乐 更 趋 
向 深刻 完美 ,表现 手段 更 丰富 。</p> 
<P> 毛 里 齐 奥 - 波 利 尼 , 意 大 利 钢琴 家 ,1942 年 出 生 ,9 岁 首次 公演 ,1959 年 毕业 于 米兰 音乐 学 院 ,次 年 参加 
第 六 届 华 沙 国际 肖邦 钢琴 大 赛 , 夺 得 第 一 ,由 此 辈 声 国际 乐坛 。</p> 
</div></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 .first-letter 选择 器 用 于 选取 指定 其 他 
选择 器 的 首 字母 ,可 在 first-letter 选择 器 中 使 用 的 属性 有 字体 属性 、 颜 色 属 性 、 背 景 属性 、 外 边 距 属 
性 、 内 边 距 属性 、 边 框 属性 、text-decoration float、vertical-align、\text-transform,line-height ,clear 等 。 

此 实例 的 源 文件 名 是 myHtmlB111. html。 





HTML5+CSS3 炫 酷 应 用 实例 集锦 


059 ” 仅 对 第 一 个 段落 的 首 字 设 置 加 大 、 下 沉 效 果 


此 实例 主要 通过 定制 p:first-child: :first-letter 选择 器 实现 仅 对 第 一 个 段落 的 首 字 设置 加 大 、 下 
沉 效果 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 .在 3 个 段落 中 只 有 第 一 个 段落 的 首 字 显 示 加 
大 、 下 沉 效 果 , 如 图 059-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 


百 = 口 x 
DD myHtmlB112heml x\ 
全 3 © Dfile///D/myWork/myHtmlB112.html 安 











全 宾 斯 坦 生来 赋 有 灵敏 的 十 只 手指 ， 读 谱 能 力 之 强 也 是 超群 
鲁 的 。 他 的 演奏 充满 炽热 的 情感 和 充沛 的 精力 ， 流 利 酒 脱 而 又 
布局 严谨 ， 有 时 又 细腻 而 富 于 诗意 。 


霍 洛 维 区 是 20 世 纪 景 今 人 瞩目 的 大 钢琴 家 ， 技 巧 高 起 ， 举 世 无 


A 音乐 更 趋向 深刻 完美 ， 表 现 手段 


毛里 齐 奥 ， 波 利 尼 ， 和 章 大 利 钢琴 家 ，1942 年 出 生 ，9 岁 首次 公 
演 ，1959 年 毕业 于 米兰 音乐 学 院 ， 次 年 参加 第 六 届 华 沙 国际 肖邦 
钢琴 大 赛 ， 寺 得 第 一 ， 由 此 华声 国际 乐坛 。 





图 059-1 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
< style> 
div {display: inline - block;width: 450px;height :218px; padding: 15px; 
margin:10px; background - color: #FFF;border: 1px solid # EEE; 
box - shadow: 5px 5px 5px 1px #999,0 0 40px rgba(0, 0, 0, 0.06) inset; 
position: relative;border - radius: 5px;} 
pi:first ~ child: :first ~ letter {color: red; float: left; 
font ~ size: 30px;font - weight: bold;} 
body { background— color: lightgray;} 
</style></head> 
<body >< div><p> 鲁 宾 斯 坦 生来 赋 有 灵敏 的 十 只 手指 , 读 谱 能 力 之 强 也 是 超群 的 。 他 的 演奏 充满 炽热 的 情感 和 
充沛 的 精力 ,流利 洒脱 而 又 布局 严谨 , 有 时 又 细腻 而 富 于 诗意 。</p> 


<p > 者 洛 维 芯 是 20 世纪 最 令 人 瞩目 的 大 钢琴 家 ,技巧 高 超 ,举世 无 双 。 他 的 演奏 技巧 辉煌 而 潇洒 ,音乐 更 趋 
向 深刻 完美 ,表现 手段 更 丰富 。</p> 

<p> 毛 里 齐 奥 : 波 利 尼 ,意大利 钢琴 家 , 1942 年 出 生 ,9 岁 首次 公演 ,1959 年 毕业 于 米兰 音乐 学 院 , 次 年 参加 
第 六 届 华 沙 国际 肖邦 钢琴 大 赛 , 夺 得 第 一 ,由 此 蔓 声 国际 乐坛 。</p> 
</div></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,p:first-child: :first-letter 选择 器 用 


于 获取 所 有 段落 组 成 的 集合 中 的 第 一 个 段落 的 首 字 ( 母 ) 。 
此 实例 的 源 文件 名 是 myHtmlB112. html。 


060 ”在 段落 的 第 一 个 字 的 外 围 设置 阴影 效果 


此 实例 主要 通过 div:first-letter 选择 器 在 div 中 查找 第 一 个 字 , 从 而 实现 在 段落 的 第 一 个 字 的 外 
围 设 置 阴影 效果 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 .两 张 简 历 的 第 一 个 字 “ 徐 ”的 外 围 出 











现 的 阴影 效果 如 图 060-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
面 - 6 x 





/DD myHemlB052 html x\ 


\ 要 





€ 3 C [fie//D/myWormyHtmlBo52html 23 三 


| (1900 年 6 月 17 东 (1900 年 6 月 17 
后 97o 年 3 月 25 日 ) ， 原 名 元 元 
; 大 情 ( 原 





图 060-1 


<!doctype html >< html >< head >< meta charset = "UTF — 8"> 
<style> 
div {display: inline - block; width: 200px;height: 218px; 
margin: 10px; background— color: #FFF; border: lpx solid # EEE; 
box - shadow: 5px 5px 5px 1px #999,0 0 40px rgba(0, 0, 0, 0.06) inset; 
position: relative;border - radius:5px;} 
div:first — letter{ font - size: 24px;background— color:white; 
border - radius: 5px; box - shadow: Opx Opx 10px 5px gray;} 
p{padding - left: 15px; padding - right: 10px; font - size: 14px;} 
body{background - color: lightgray;} 
</style></head> 


第 1 部 分 文字 <> 


<body><div ><p> 徐 海 东 (1900 年 6 月 17 日 -1970 年 3 月 25 日 ), 原 名 元 清 ,湖北 省 大 悟 县 新 城镇 ( 原 黄陂 县 
流 源 乡 会 夏 店 里 滚石 岭 会 )} 人 。 中 国共 产 党 的 优秀 党 员 , 我 军 卓 越 的 军事 家 , 久 经 考验 的 无 产 阶级 忠诚 战士 ,中 


国 工农 红军 及 中 国人 民 解 放 军 主要 领导 人 之 一 ,军事 家 、 中 国人 民 解 放 军 大 将 。</p></div> 


<div><p> 徐 海 东 (1900 年 6 月 17 日 -1970 年 3 月 25 日 ), 原 名 元 清 ,湖北 省 大 情 县 新 城镇 ( 原 黄 陂 县 溉 源 乡 会 
夏 店 里 滚石 岭 会 ) 人 。 中 国共 产 党 的 优秀 党 员 , 我 军 卓越 的 军事 家 , 久 经 考验 的 无 产 阶级 忠诚 战士 , 中国 工农 红 
军 及 中 国人 民 解 放 军 主要 领导 人 之 一 ,军事 家 、 中 国人 民 解 放 军 大 将 。</p></div></body ></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,div: first-letter 选择 器 用 于 查找 div 
的 第 一 个 字 ,box-shadow 用 于 向 元 素 添 加 一 个 或 多 个 阴影 ,box-shadow 的 语法 格式 如 下 。 


box - shadow: inset x— offset y— offset blur ~ radius spread - radius color 


在 此 实例 中 ,box-shadow: 0px 0px 10px 5px gray 的 两 个 0px 分 别 代表 x-offset 和 y-offset,10px 


表示 blur-radius,5px 表示 spread-radius ,gray 表示 color。 
此 实例 的 源 文 件 名 是 myHtmlB052. html。 


061 在 段落 的 第 一 行 字 的 外 围 设 置 阴影 效果 


此 实例 主要 通过 div:first-line 选择 器 在 div 中 查找 第 一 行文 本 ,从 而 实现 在 段落 的 第 一 行 字 的 外 
围 设 置 阴影 效果 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,第 一 行 诗 的 外 围 出 现 的 阴影 效果 如 


061-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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/ DD myHeml8o53 html x VE 时 用 
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六 宫 粉 贷 无 颜色 


春 寒 赐 浴 华 清 池 ， 温 泉水 滑 洗 凝脂 。 
侍 儿 扶 起 娇 无 力 ， 始 是 新 承 恩泽 时 。 
云 佬 花 颜 金 步 扬 ， 芙 其 帐 暖 度 春宵 。 
春宵 苦 短 日 高 起 ， 从 此 君王 不 是 朝 。 





图 061-1 


<! doctype html >< html >< head >< meta charset = "UTF - 8"> 
<style> 
div {display: inline— block;width: 350px;height: 218px; margin: 10px; 
background — color: #FFF; border: 1px solid # EEE; border — radius: 5px; 
box - shadow: 5px 5px 5px 1px #999;position: relative;} 
div:first- line { font- size: 20px;background— color: white; 
box — shadow: Opx Opx 10px 5px gray;} 
p {padding - left: 15px;padding - right: 10px;font — size: 20px;} 
body {background - color: lightgray;} 
</style></head> 
<body> 
<div><p> 汉 皇 重 色 思 倾 国 , 御 宇 多 年 求 不 得 。< br> 杨 家 有 女 初 长 成 , 养 在 深 图 人 未 识 。<br> 
天 生 丽 质 难 自 弃 ,一 朝 选 在 君王 侧 。< br > 回眸 一 笑 百 媚 生 ,六 宫 粉 袋 无 颜色 。<br> 
春 寒 赐 浴 华清池 ,温泉 水 滑 洗 凝 脂 。< br> 侍 儿 拱 起 娇 无 力 , 始 是 新 承 恩泽 时 。< br > 
云 惨 花 颜 金 步 播 , 芙蓉 帐 暖 度 春宵 。< br > 春宵 苦 短 日 高 起 ,从 此 君王 不 早 朝 。< br > </p></div> 
</body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,div:first-line 选择 器 用 于 查找 div 的 
第 一 行文 本 ,box-shadow 用 于 向 元 素 添加 一 个 或 多 个 阴影 。 
此 实例 的 源 文 件 名 是 myHtmlB053. html。 
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062 ”通过 逐 点 处 理 像素 实现 图 像 底片 效果 


此 实例 主要 对 图 像 的 每 个 像素 取 对 立 颜 色 值 ,从 而 实现 对 图 像 进行 类 似 于 底片 的 反 色 特效 处 理 。 
当 在 浏览 器 中 显示 该 页 面 时 ,将 在 上 面 显 示 正 常 的 图 像 ; 单 击 * 对 图 像 进 行 反 色 特 效 处 理 " 按 钮 ,将 在 
下 面 显示 经 过 反 色 特 效 处 理 之 后 的 图 像 ,如 图 062-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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对 图 像 进行 反 色 特效 处 理 








图 062-1 


<!doctype html ><html ><head ><meta charset = UIF - 8> 
<script src ="js/jquery— 3.1.1.min. js"></script>< script language = " javascript"> 
$ (document). ready(function(){ 
$ ("#myBtn"). click(function() { // 对 图 像 进行 反 色 特 效 处 理 
var myCanvas =$ (" #myCanvas"). get(0); 
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var myContext = myCanvas. getContext("2d"); 
var myInage = $ ("#myJpg").get(0); 
myContext. drawImage(myImage, 0, 0); 
var myImgData = myContext. get ImageData( 0, 0, myImage. width, myImage. height) ; 
var myLength = myImgData. data. length; 
for (var i=0;i<myLength;i+=4){ 
myImgData. data[ i] = 255 — myImgData. data[ i]; 
myImgData. data[ i+1] = 255 - myImgData. data[ i + 1]; 
myImgData. data[ i + 2] = 255 — myImgData. data[ i + 2]; 
myImgData. data[ i + 3] = 255; 
} 
myContext. put ImageData(myImgData, 0, 0) ; });}); 
</script ></head > 
<body ><p> 原 始 图 像 : </p>< img id = "myJpg" src= "img/a030.jpg" /> 
<p>< input type= "button"” value = "对 图 像 进行 反 色 特 效 处 理 " id = "myBtn" style = "width:400px"></p> 
<canvas id= "myCanvas" width= "900" height = "950"></canvas ></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,getImageData( ) 方 法 用 于 获取 
ImageData 对 象 , 该 对 象 复制 了 画布 指定 矩形 的 像素 数据 ImageData。ImageData 对 象 中 的 每 个 像素 
存储 了 4 种 信息 , 即 RGBA 值 ,其 中 了 表示 红色 (0 一 255),G 表示 绿色 (0 一 255),B 表示 蓝 色 (0 一 
255),A 表示 alpha 通道 (0 一 255,0 是 透明 的 ,255 是 完全 可 见 的 ) ,color/alpha 以 数组 形式 存在 ,并 存 
储 于 ImageData 对 象 的 data 属性 中 。 此 实例 中 的 for 循环 即 是 对 color/alpha 数组 中 的 颜色 值 逐 一 取 
对 立 值 。getImageData() 方 法 的 语法 声明 如 下 。 


getImageData(x, y, width, height); 


其 中 ,参数 x 表 示 获 取 图 像 的 左上 角 位 置 的 x 坐标 ; 参数 y 表示 获取 图 像 的 左上 和 角 位 置 的 y 坐 
标 ; 参数 width 表示 将 要 复制 的 矩形 区 域 的 宽度 ; 参数 height 表示 将 要 复制 的 矩形 区 域 的 高 度 。 

putImageData() 方 法 用 于 在 画布 上 显示 图 像 数 据 ( 从 指定 的 ImageData 对 象 ) ,该 方法 的 语法 声 
明 如 下 。 


putImageData( imgData, x, y, dirtyX, dirtyY, dirtyWidth, dirtyHeight); 


其 中 ,参数 imgData 规定 要 放 回 画布 的 ImageData 对 象 ; 参数 x 表示 ImageData 对 象 左上 角 的 x 
坐标 ,以 像素 计算 ; 参数 y 表示 ImageData 对 象 左 上 角 的 y 坐标 ,以 像素 计算 ; 参数 dirtyX 是 可 选 参 
数 , 以 像素 计算 ,表示 在 画布 上 放置 图 像 的 水 平 位 置 ; 参数 dirtyY 是 可 选 参数 ,以 像素 计算 ,表示 在 画 
布 上 放置 图 像 的 垂直 位 置 ; 参数 dirtyWidth 是 可 选 参 数 , 表 示 在 画布 上 绘制 图 像 所 使 用 的 宽度 ; 参数 
dirtyHeight 是 可 选 参数 ,表示 在 画布 上 绘制 图 像 所 使 用 的 高 度 。 

此 实例 的 源 文件 名 是 myHtmlA030. html。 


063 ”采用 平均 值 法 将 图 像 从 彩色 变 为 灰 度 
此 实例 主要 通过 对 图 像 的 每 个 像素 的 R.G.B 取 平 均值 实现 将 彩色 图 像 转变 为 灰 度 图 像 。 当 在 


浏览 器 中 显示 该 页 面 时 ,将 在 上 面 显 示 正 常 的 图 像 ; 单 击 * 将 彩色 图 像 转变 为 灰 度 图 像 "按钮 ,将 在 下 
面 显示 经 过 处 理 之 后 的 灰 度 图 像 ,如 图 063-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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将 彩色 图 像 转 到 为 灰 度 图 多 














图 063-1 


<!doctype html ><html >< head >< meta charset = UTF - 8> 
<script src="js/jquery— 3.1.1.min. js"></script>< script language = " javascript"> 
$ (document). ready(function() { 
$ ("#myBtn").click(function() { // 将 彩色 图 像 转变 为 灰 度 图 像 
var myCanvas =$ ("#myCanvas"). get(0); 
var myContext = myCanvas. getContext("2d"); 
var myImage = $ ("#myJpg"). get(0); 
myContext. drawImage(myImage, 0, 0); 
var myImgData = myContext. get ImageData( 0, 0, myImage. width, myImage. height); 
var myLength = myImgData. data. length; 
for (var i=0;i<myLength;i += 4){ 
// 取 该 像素 点 的 R.G`B 的 平均 值 
var myPixel = (myImgData. data[ i] + myImgData. data[i+ 1] + myImgData. data[ i + 2])/3; 
// 使 用 平均 值 重 新 设置 该 像素 点 的 R、G.B 
myImgData. data[ i] = myImgData. data[ i + 1] = myImgData. data[ i + 2] = myPixel; 
// 设 置 为 不 透明 
myImgData. data[ i + 3] = 255; 
} 
myContext. put ImageData(myImgData, 0,0); });}); 
</script ></head > 
<body><p> 原 始 图 像 : </p>< img id = "myJpg" src = "img/a042.jpg" /> 
<p>< input type = "button" value = "将 彩色 图 像 转变 为 灰 度 图 像 " id = "myBtn" style = "width:385px"></p> 
<canvas id= "myCanvas" width = "900" height = "950"></canvas ></body></html > 


hi 





上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , getImageData( ) 方 法 用 于 获取 
ImageData 对 象 , 该 对 象 复制 了 画布 指定 矩形 的 像素 数据 ImageData; putImageData() 方 法 用 于 在 画 
布 上 显示 图 像 数 据 ( 从 指定 的 ImageData 对 象 )。 将 彩色 图 像 转变 成 灰 度 图 像 通常 有 3 种 方法 , 即 最 
大 值 法 ,平均 值 法 和 加 权 平 均值 法 。 这 3 种 方法 可 以 根据 对 图 像 灰 度 的 具体 要 求 进行 选择 ,通常 采用 
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平均 值 法 。3 种 方法 的 原理 如 下 。 

(1) 最 大 值 法 : 最 大 值 法 使 每 个 像素 点 的 R、G.、B 值 等 于 原 像素 点 的 RGB 值 中 最 大 的 一 个 , 即 
R= 二 G 一 B 一 MAX(R,G,B)。 最 大 值 法 会 形成 亮度 很 高 的 灰 度 图 像 。 

(2) 平均 值 法 : 平均 值 法 使 每 个 像素 点 的 R、G、B 值 等 于 原 像 素 点 的 颜色 值 中 的 RGB 值 的 平均 
值 , 即 R=G==B==(R 十 G 十 B)/3。 平 均值 法 会 形成 比较 柔和 的 灰 度 图像 。 

(3) 加权 平 均值 法 : 加 权 平 均值 法 根据 需要 指定 每 个 像素 点 RG 、B 值 的 权 数 ,并 取 其 加 权 平 均 
值 , 即 R=G==B=(Wr* R 十 Wgx* G 十 Wb* B)/3。 其 中 ,Wr 代表 该 像素 点 R 的 权 数 ,大 于 0; Wg 代 
表 该 像素 点 G 的 权 数 ,大 于 0; Wb 代表 该 像素 点 B 的 权 数 ,大 于 0。 通过 对 Wr、Wg、Wtb 取 不 同 的 值 
可 以 获得 不 同 的 效果 。 

在 ImageData 像素 数据 中 ,ImgData. data[i] .ImgData. data[ i 十 1] ImgData. data[ i 十 2] 分 别 代表 
每 个 像素 点 的 R、G.B 值 ,此 实例 的 var myPixel= (myImgData. data[i] 十 myImgData.data[ i 十 1] 十 
mylImgData. data[ i 十 2])/3 表示 取 i 像素 点 的 R.G、B 值 的 平均 值 ,然后 通过 代码 myImgData. data[i] 二 
myImgData. data[ i 十 1] 二 mylImgData. data[Li 十 2] 王 myPixel 将 i 像素 点 的 R、G.、B 值 都 设置 为 该 平均 
值 。ImgData. data[Li 十 3] 表 示 该 像素 点 的 透明 度 ,所 有 像素 点 均 设 置 为 不 透明 (255) 。 

此 实例 的 源 文 件 名 是 myHtmlA042. html。 


064 ”使 用 拉 普 拉 斯 模板 实现 锐 化 处 理 图 像 


此 实例 主要 通过 使 用 拉 普 拉 斯 模板 进行 数学 运算 .从 而 实现 对 图 像 进行 锐 化 特效 处 理 。 当 在 浏 
览 器 中 显示 该 页 面 时 ,将 在 上 面 显 示 正 常 的 图 像 ; 单 击 * 对 图 像 进行 锐 化 特效 处 理 ” 按 钮 ,将 在 下 面 显 
示 经 过 锐 化 特效 处 理 之 后 的 图 像 ,如 图 064-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 064-1 
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<!doctype html >< html >< head >< meta charset = UIF -8> 
< script src= "js/jquery - 3.1.1.min. js"></script>< script language = "javascript"> 
function myEffect(myContext，myData) { // 锐 化 特效 
var myTemp = myContext. createImageData( myData. width, myData. height); 
myTemp. data. set (myData. data) ; 


var myLaplacian 
for ( var x=0; 


=[ = -1 -1 =-1r9 -1 -1j -1 =1]; // 拉 普 拉 斯 模板 
x<myTemp. width; x++){ 


for ( var y=0; y <myTemp. height; y++) { 
var r=0, g=0, b=0; 


var Index= 0; 
var a= 0; 


for (var col=-1; col <=1; col++) { 


for (var row 


=—1; row <=1; rowt+) { // 像 素 在 数组 中 的 索引 


var jdx = ((x+row) + (y+ col) * myTemp. width) * 4; 


r += myTemp. 

g += myTemp. 

b += myTemp. 

Indext+; 
Ey 


.data[ idx + 0] * myLaplacian[ Index]; 
.data[ idx + 1] * myLaplacian[ Index]; 
.data[ idx + 2] * myLaplacian[ Index]; 


r=r>255? 255 : r; // 处 理 颜 色 值 溢出 


r=r<0?0 


1; 


g=g>255? 255 : g; 


g=g<0?0:g; 

b=b>255? .255 ;b> 

b=b<0?0:b; 

var midx= ((x—1)+ (y- 1) * myTemp. width) x 4; // 在 图 像 中 设置 新 像素 
myData. data[ midx + 0] = r; //R 通 道 

myData. data[ midx +1] =g; //6 通道 

myData. data[ midx + 2] =b ; //B 通道 

myData. data[ midx + 3] = 255; //alpha 通道 


}}} 


$ (document). ready(function () { 


$ ("#myBtn"). 


click( function () { // 对 图 像 进行 锐 化 特效 处 理 


var myImage = document. getElementById( "myJpg" ); 

var myCanvas = document. getElementById( "myCanvas" ); 

myCanvas. width = myImage. clientWidth; 

myCanvas. height = myImage. cl ientHeight; 

myContext = myCanvas. getContext("2d"); 

myContext. drawImage(myImage, 0, 0, myCanvas.width, myCanvas. height); 

var myData = myContext. get ImageData(0, 0, myCanvas. width, myCanvas. height); 
myEffect(myContext, myData); 

myContext. putInageData(myData, 0, 0); });}); 


</script ></head> 


<body><p> 原 始 图 像 : </p>< img id = "myJpg" src = "img/a041. jpg"/ 人 > 
<p>< input type = "button" value= "对 图 像 进行 锐 化 特效 处 理 ”id = "myBtn" style = "width:380px"></p> 
<canvas id = "myCanvas" width= "900" height = "950"></canvas ></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 .myEffect(myContext, myData) 方 法 
用 于 实现 图 像 的 锐 化 特效 。 图 像 的 锐 化 实际 上 就 是 要 突出 图 像 中 有 关 形 体 的 边缘 。 所 谓 形 体 的 边缘 
就 是 图 像 像素 点 的 颜色 值 发 生 显著 变化 的 地 方 .在 图 像 的 平缓 区 ,这 种 颜色 值 的 变化 比较 平缓 ,而 在 
图 像 的 边缘 区 域 , 这 种 变化 相当 明显 。 也 就 是 说 ,在 平缓 区 , 相 邻 两 像素 点 的 颜色 值 的 差 值 较 小 ,而 在 
边缘 区 域 , 相 邻 两 像素 点 的 颜色 值 的 变化 陡 得 多 ,因此 如 果 在 边缘 区 域 处 理 这 个 数值 则 可 以 使 这 种 效果 








更 加 突出 ,而 在 非 边缘 








区 域 则 变 得 较 暗 , 即 图 像 的 锐 化。 通常 ,对 图 像 进 行 锐 化 处 理 使 用 拉 普 拉 斯 模板 。 





此 实例 的 源 文 件 名 是 myHtmlA054. html。 
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065 ”对 彩色 图 像 进行 灰白 浮雕 的 特效 处 理 


此 实例 主要 对 每 个 像素 点 的 前 、 后 像素 点 进行 数学 运算 ,从 而 实现 对 彩色 图 像 进行 类 似 于 灰白 浮雕 
的 特效 处 理 。 当 在 浏览 器 中 显示 该 页 面 时 ,将 在 上 面 显示 正常 的 图 像 ; 单 击 “ 对 图 像 进行 浮雕 特效 处 理 ” 
按钮 ,将 在 下 面 显示 经 过 灰白 浮雕 特效 处 理 之 后 的 图 像 , 如 图 065-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 065-1 


<! doctype html >< html >< head >< meta charset = UTF -8> 
< script src= "js/jquery — 3.1.1.min. js"></script>< script language = "javascript"> 
function myEffect(myContext, myData) { // 生 成 浮雕 特效 

var myTemp = myContext. createImageData( myData. width, myData. height); 

myTemp. data. set (myData. data); 

for (var x=1; x<myTemp. width—1; x++) { 

for (var y= 1; y<myTemp. height — 1; y++) { // 获 取 像素 在 数组 中 的 索引 

var idx= (x+YxmyTemp. width) * 4; 
var bidx= ((x—1) +yxmyTemp. width) x 4; 
var aidx= ((x+1)+yxmyTemp. width) * 4; 
// 计 算 新 的 RGB 值 
var myRed = myTemp. data[aidx + 0] - myTemp. data[ bidx + 0] + 128; 
var myGreen = myTemp. data[aidx + 1] - myTemp. data[ bidx + 1] + 128; 
var myBlue = myTemp. data[ aidx + 2] ~ myTemp. data[ bidx + 2] + 128; 
myRed = (myRed <0) ? 0 : ((myRed > 255) ? 255 : myRed); 
myGreen = (myGreen <0) ? 0 : ((myGreen> 255) ? 255 : myGreen); 
myBlue = (myBlue <0) ? 0 : ((myBlue> 255) ? 255 : myBlue); 


// 根 据 新 像素 值 填充 图 像 

myData. data[ idx + 0] = myRed; //R 通道 
myData. data[ idx + 1] = myGreen; //6 通道 
myData. data[ idx + 2] = myBlue; //B 通道 
myData. data[ idx + 3] = 255; //alpha 通道 


和 
$ (document). ready(function() { 
$ ("#myBtn").click(function() { // 对 图 像 进行 浮雕 特效 处 理 
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var myImage = document. getElementById( "myJpg" ) ; 
var myCanvas = document. getElementById( "myCanvas"); 
myCanvas. width = myImage. clientWidth; 
myCanvas. height = myImage. clientHeight; 
myContext = myCanvas. getContext ("2d" ); 
myContext. drawImage(myImage, 0, 0,myCanvas. width, myCanvas. height); 
var myData = myContext. get ImageData(0, 0,myCanvas. width, myCanvas. height); 
myEffect(myContext，myData) 
myContext. put ImageData(myData, 0, 0); });}); 
</script ></head> 
<body><p> 原 始 图 像 : </p>< img id = "myJpg" src = "img/a030.jpg"/> 
<p>< input type= "button” value= "对 图 像 进行 浮雕 特效 处 理 ”id = "myBtn”style= "width:400px"></p> 
<canvas jd = "myCanvas" width = "900" height = "950"></canvas ></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,createlImageData() 方 法 用 于 创建 新 


的 空白 ImageData 对 象 , 新 对 象 的 默认 像素 值 为 transparent black。ImageData 对 象 中 的 每 个 像素 都 
存在 4 个 方面 的 信息 , 即 RGBA 值 ,其 中 R 表示 红色 (0 一 255),G 表示 绿色 (0 一 255),B 表示 蓝 色 (0 一 
255) ,A 表示 alpha 通道 (0 一 255, 0 是 透明 的 ,255 是 完全 可 见 的 ) ,因此 transparent black 表示 (0,0， 
0,0)。color/alpha 以 数组 形式 存在 ,并 且 既 然 数 组 包含 了 每 个 像素 的 4 条 信息 ,因此 数组 的 大 小 是 
ImageData 对 象 的 4 倍 。 包 含 color/alpha 信息 的 数组 存储 于 ImageData 对 象 的 data 属性 中 。 
ereateImageData() 方 法 的 语法 声明 如 下 。 


createImageData(width, height) 


其 中 ,参数 width 表示 ImageData 对 象 的 宽度 ,以 像素 计算 ; 参数 height 表示 ImageData 对 象 的 


高 度 , 以 像素 计算 。 


此 实例 的 源 文件 名 是 myHtmlA051. html。 


066 ”对 彩色 图 像 进行 模糊 化 的 特效 处 理 


此 实例 主要 使 用 5X5 矩阵 对 每 个 像素 点 进行 数学 运算 ,从 而 使 清晰 的 彩色 图 像 变 得 模糊 起 来 。 


当 在 浏览 器 中 显示 该 页 面 时 ,将 在 上 面 显 示 正 常 的 图 像 ; 单 击 * 对 图 像 进行 模糊 特效 处 理 ? 按 钮 ,将 在 
下 面 显示 经 过 模糊 特效 处 理 之 后 的 图 像 , 如 图 066-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 


<! doctype html >< html >< head >< meta charset = UTF -8> 
< script src= "js/jquery - 3.1.1.min. js"></script>< script language = "javascript"> 
function myEffect(myContext, myData) { // 生 成 模糊 特效 
Var myTemp = myContext. createImageData( myData. width, myData. height); 
myTemp. data. set (myData. data); 
var myRed = 0.0, myGreen= 0.0, myBlue = 0.0; 
for ( var x=0; x<myTemp. width; x++) { // 获 取 每 个 像素 在 数组 中 的 索引 
for ( var y=0; y <myTemp. height; y++) { 
Var myIndex = (x+ yx* myTemp. width) < 4; 
for(var myColumn = — 2; myColumn <= 2; myColumn++) { 
Var myColumnOff = myColumn + x; 
if(myColumnOff <0 | | myColumnOff > = myTemp. width) { 
myColumnOff = 0; 
} 
for(var myRow = 一 2; myRow <= 2; myRow++) { 
Var myRowOff = myRow + y; 
if(myRowOff <0 | | myRowOff > = myTemp. height) { myRowOff = 0; } 
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var myNewIndex = (myColumnOff + myRowOff * myTemp. width) * 4; 
var r= myTemp. data[ myNewIndex + 0]; 
var g = myTemp. data[ myNewIndex + 1]; 
var b= myTemp. data[ myNewIndex + 2]; 
myRed += r; myGreen += gj myBlue +=b; } } 
var nr = (myRed/25. 0); // 计 算 新 的 RGB 值 
var ng = (myGreen/25. 0) ; var nb = (myBlue/25.0); 
myRed = 0.0; myGreen = 0.0; myBlue= 0.0; 


// 为 新 图 像 设置 像素 

myData. data[ myIndex + 0] = nr; //R 通 道 

myData. data[ myIndex + 1] = ng; //G 通 道 

myData. data[ myIndex + 2] = nb; //B 通 道 

myData. data[ myIndex + 3] = 255; //alpha 通道 
Be 


$ (document). ready(function() { 
$("#myBtn").click(function() { // 对 图 像 进 行 模糊 特效 处 理 
var myImage = document. getElementById( "myJpg" ); 
var myCanvas = document. getElementById( "myCanvas" ); 
myCanvas. width = myImage. cl ientWidth; 
myCanvas. height = myImage. clientHeight; 
myContext = myCanvas. getContext ("2d"); 
myContext. drawImage(myImage, 0, 0, myCanvas.width, myCanvas. height); 
var myData = myContext. get ImageData(0, 0, myCanvas. width, myCanvas. height); 
myEffect(myContext, myData); 
myContext. put ImageData(myData, 0, 0); });}); 
</script ></head> 
<body ><p> 原 始 图 像 : </p>< img id = "myJpg" src = "img/a030.jpg"/> 
<p>< input type= "button” value= "对 图 像 进行 模糊 特效 处 理 "”id= "myBtn" style = "width:400px"></p> 
<canvas id= "myCanvas" width = "900" height = "950"></canvas ></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,myEffect(myContext，myData) 方 法 
用 于 生成 图 像 的 模糊 效果 , 它 主 要 通过 5X5 矩阵 对 每 个 像素 点 进行 数学 运算 ,从 而 实现 模糊 效果 。 
此 实例 的 源 文 件 名 是 myHtmlA052. html。 
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067 ”使 用 随机 数 对 图 像 进行 油画 特效 处 理 


此 实例 主要 使 用 随机 数 对 图 像 进 行 油画 特效 处 理 。 当 在 浏览 器 中 显示 该 页 面 时 .将 在 上 面 显示 
正常 的 图 像 ; 单 击 “ 对 图 像 进行 油画 特效 处 理 ” 按 钮 ,将 在 下 面 显示 经 过 油画 特效 处 理 之 后 的 图 像 ,如 
图 067-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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<! doctype html >< html >< head >< meta charset = UIF -8> 
<script src= "js/jquery -3.1.1.min.js"></script >< script language = "javascript"> 
function myEffect(myContext, myData) { // 油 画 特效 
var myTemp = myContext. createImageData( myData. width, myData. height); 
myTemp. data. set (myData. data); 
Var myModel = 8; var x = myTemp.width— myModel; 
while(x>1){ var y= myTemp. height - myModel; 
while(y>1) { 
var myPos = parseInt (Math. floor(Math. random() * ( 10+1) % myModel)); 


var idx = (x+ yx*myTemp. width) * 4; // 像 素 在 数组 中 的 索引 
var midx= ((x+myPos) + (Y+myPos) * myTemp. width) * 4; 

// 在 图 像 中 设置 新 像素 

myData. data[midx+ 0] = myTemp. data[ idx + 0]; //R 通道 

myData. data[ midx + 1] = myTemp. data[ idx + 1]; //6 通道 

myData. data[ midx + 2] = myTemp. data[ idx + 2]; //B 通道 

myData. data[ midx + 3] = 255; //alpha 通道 

EY 


ee 
$ (document). ready(function() { 
$ ("#myBtn"). click( function() { // 对 图 像 进 行 油画 特效 处 理 
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var myImage = document. getElementById( "myJpg" ) ; 
var myCanvas = document. getElementById( "myCanvas"); 
myCanvas. width = myImage. clientWidth; 
myCanvas. height = myImage. clientHeight; 
myContext = myCanvas. getContext( "2d" ) ; 
myContext. drawImage(myImage, 0, 0, myCanvas. width, myCanvas. height); 
var myData = myContext. get ImageData(0, 0, myCanvas. width, myCanvas. height); 
myEffect (myContext, myData); 
myContext. put ImageData(myData, 0, 0); });}); 
</script ></head> 
<body><p> 原 始 图 像 : </p>< img id = "myJpg" src = "img/a041.jpg"/> 
<p>< input type= "button" value = "对 图 像 进行 油画 特效 处 理 "” id = "myBtn" style = "width:380px"></p> 
<canvas id = "myCanvas" width= "900" height = "950"> </canvas ></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,Math. random() 用 于 获取 0 和 1 之 
间 的 伪 随 机 数 ,Math. floor( Math. random() * ( 10 十 1)%myModel) 实 际 上 就 是 取 10 范围 内 的 数字 
除 以 myModel 之 后 的 余数 。myModel 值 越 大 ,油画 效果 越 明显 ; myModel 值 越 小 ,油画 效果 越 不 明显 。 
当 对 彩色 图 像 中 的 某 范 围 内 的 像素 进行 随机 数 处 理 后 ,图 像 就 会 产生 毛 玻璃 带 水 雾 状 的 油画 效果 。 

此 实例 的 源 文 件 名 是 myHtmlA055. html。 


068 ”使 用 随机 数 对 图 像 进 行 雾 化 特效 处 理 


此 实例 主要 使 用 随机 数 对 图 像 进 行 雾 化 特效 处 理 。 当 在 浏览 器 中 显示 该 页 面 时 ,将 在 上 面 显示 
正常 的 图 像 ; 单 击 “ 对 图 像 进行 雾 化 特效 处 理 " 按 钮 ,将 在 下 面 显示 经 过 雾 化 特效 处 理 之 后 的 图 像 ,如 
图 068-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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<!doctype html >< html >< head >< meta charset = UIF -8> 
< script src= "js/jquery - 3.1.1.min. js"></script >< script language = "javascript"> 
function myEffect(myContext，myData) { // 雾 化 特效 
var myTemp = myContext. createImageData(myData. width, myData. height) 
myTemp. data. set (myData. data); 
for ( var x=1; x<myTemp. width— 1; x++){ 
for ( var y=1; y<myTemp. height — 1; y++){ 
var myPara = parseInt (Math. floor(Math. random() * ( 100 +1))); 
var dx =x+myPara% 29; var dy= y+ myPara% 29; 
if(dx >= myTemp. width) 
dx = myTemp. width — 1; 
if(dy>= myTemp. height) 
dy= myTemp. height — 1; 
var idx = (dx+ dy * myTemp.width) * 4; 
var midx = (x+y*myTemp. width) * 4; 
// 在 图 像 中 设置 新 像素 


myData. data[ midx+ 0] = myTemp. data[ idx+ 0];  //R 通道 
myData. data[ midx + 1] = myTemp. data[ idx+ 1];  //G 通道 
myData. data[ midx + 2] = myTemp. data[ idx+ 2]; ”//B 通道 
myData. data[ midx + 3] = 255; //alpha 通道 
Di 
$ (document). ready(function() { 
$ ("#myBtn").click(function() { // 对 图 像 进行 雾 化 特效 处 理 


var myImage = document. getElementById( "myJpg" ); 
var myCanvas = document. getElementById( "myCanvas" ); 
myCanvas. width = myImage. cl ientWidth; 
myCanvas. height = myImage. clientHeight; 
myContext = myCanvas. getContext( "2d" ); 
myContext. drawImage(myImage, 0, 0,myCanvas. width, myCanvas. height); 
var myData = myContext. get ImageData(0, 0,myCanvas. width, myCanvas. height); 
myEffect(myContext, myData); 
myContext. put ImageData(myData, 0, 0); 
1D); 1); 
</script ></head> 
<body ><p> 原 始 图 像 : </p>< img id = "myJpg" src = "img/a041.jpg"/> 
<p>< input type= "button" value = "对 图 像 进 行 雾 化 特效 处 理 ” id = "myBtn" style = "width:380px"></p> 
<canvas id = "myCanvas" width= "900" height = "950"> </canvas ></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,Math. random() 用 于 获取 0 和 1 之 
间 的 伪 随 机 数 ,Math. floor(Math. random() * ( 100 十 1)) 实 际 上 就 是 取 100 范围 内 的 随机 数 。 影 响 
图 像 雾 化 效果 的 一 个 重要 因素 是 像素 块 的 大 小 , 即 dx、dy 的 波动 范围 ,所 选取 的 像素 块 越 大 ,产生 的 
雾 化 效果 越 明显 ; 所 选取 的 像素 块 越 小 ,产生 的 雾 化 效果 越 不 明显 。 

此 实例 的 源 文件 名 是 myHtmlA056. html。 


069 ”选择 不 同 的 组 合 模式 全 加 显示 两 幅 图 像 


此 实例 主要 通过 设置 globalCompositeOperation 属性 实现 以 不 同 的 组 合 模式 大 加 显示 两 幅 图 像 。 
当 在 浏览 器 中 显示 该 页 面 时 , 单 击 “ 显 示 第 一 幅 图 "按钮 . 则 在 下 面 显 示 第 一 幅 图 ; 单 击 * 显 示 第 二 幅 
图 "按钮, 则 在 下 面 显示 第 二 幅 图 ; 单 击 “显示 县 加 的 两 幅 图 "按钮 , 则 第 一 幅 图 和 第 二 幅 图 到 加 之 后 的 
效果 如 图 069-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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<!doctype html >< html >< head>< meta charset = UTF -8> 
<script src= "js/jquery -3.1.1.min. js"></script>< script language = "javascript"> 
$ (document). ready(function() { 
$ ("#myBtnA").click(function() { // 显 示 第 一 幅 图 
var myCanvas =$ ("#myCanvas"). get(0); 
var myContext = myCanvas. getContext("2d"); 
myContext. globalCompos iteOperation = "source — over"; 
Var myImageA = new Image( ); 
myImageA. src = "img/a048. jpg"; 
myImageA. onload = function() { 
myContext. drawImage(myImageA, 0, 0, 350, 210); 
}; 1); 
$ ("#myBtnB").click(function() { // 显 示 第 二 幅 图 
var myCanvas =$ (" #myCanvas"). get(0); 
Var myContext = myCanvas. getContext("2d"); 
myContext. globalCompositeOperation = "source — over"; 
var myImageB = new Image( ); 
myImageB. src = "img/a041. jpg"; 
myImageB. onload = function() { 
myContext. drawImage( myImageB, 0, 0, 350, 210); 
}; 1); 
$ ("#myBtn"). click(function() { // 显 示 合 加 的 两 幅 图 
var myCanvas =$ (" #myCanvas"). get(0); 
Var myContext = myCanvas. getContext("2d" ); 
// 显 示 第 一 幅 图 ( 源 图 像 ) 
var myImageA = new Image(); 
myImageA. src = "img/a048. jpg"; 
myImageA. onload = function() { myContext. drawImage(myImageA, 0,0,350, 210);}; 
var myOpt ions = new Array( "source - atop","source— in", 
"source -out", "source ~ over", "destination - atop"， 
"destination— in", "destination— out", 
"destination— over", "lighter","copy", "xor"); 
i=8; 
// 设 置 组 合 方式 ,选择 myOptions 数组 的 第 9 个 组 合 方式 lighter 
myContext. globalCompositeOperation = myOptions[i]; 
// 显 示 第 二 幅 图 (目标 图 像 ) 
Var myImageB = new Inage( ); 
myImageB. src = "img/a041. jpg"; 
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myImageB. onload = function() { 
myContext. drawInage(myImageB, 0, 0, 350, 210); };});}); 

</script ></head> 
<body> 
<p>< input type= "button" value = "显示 第 一 幅 图 ”id = "myBtnA" style= "width:105px"> 

< input type= "button”value = "显示 第 二 幅 图 " id= "myBtnB”style = "width:105px"> 
< input type= "button" value= "显示 全 加 的 两 幅 图 " id= "myBtn" style= "width:125px"></p> 
<canvas id= "myCanvas" width= "400" height = "450"></canvas ></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,globalCompositeOperation 属性 用 于 设 
置 或 返回 如 何 将 一 个 源 ( 新 的 ) 图 像 绘制 到 目标 (已 有 ) 图 像 上 ,该 属性 支持 的 选项 及 意义 如 表 069-1 
所 示 。 


表 069-1 globalCompositeOperation 属性 支持 的 选项 及 意义 





值 意 义 
Source-Over 默认 值 , 在 目标 图 像 上 显示 源 图 像 
source-atop 在 目标 图 像 项 部 显示 源 图 像 , 源 图 像 位 于 目标 图 像 之 外 的 部 分 是 不 可 见 的 
source-in 在 目标 图 像 中 显示 源 图 像 , 只 有 目标 图 像 内 的 源 图 像 部 分 会 显示 ,目标 图 像 是 透明 的 
source-out 在 目标 图 像 之 外 显示 源 图 像 ,只 会 显示 目标 图 像 之 外 的 源 图 像 部 分 ,目标 图 像 是 透明 的 


destinationrover 在 源 图 像 上 方 显示 目标 图 像 

destination-atop 在 源 图 像 项 部 显示 目标 图 像 , 源 图 像 之 外 的 目标 图 像 部 分 不 会 被 显示 

destination-in 在 源 图 像 中 显示 目标 图 像 ,只 有 源 图 像 内 的 目标 图 像 部 分 会 被 显示 , 源 图 像 是 透明 的 
destination-out 在 源 图 像 外 显示 目标 图 像 ,只 有 源 图 像 外 的 目标 图 像 部 分 会 被 显示 , 源 图 像 是 透明 的 


lighter 显示 源 图 像 十 目标 图 像 
copy 显示 源 图 像 , 忽 略 目 标 图 像 
xor 使 用 异 或 操作 对 源 图 像 与 目标 图 像 进 行 组 合 


此 实例 的 源 文件 名 是 myHtmlA049. html。 


070 ”选择 不 同 的 混合 模式 欠 加 显示 两 幅 图 像 


此 实例 主要 通过 设置 globalCompositeOperation 属性 实现 以 不 同 的 混合 模式 全 加 显示 两 幅 图 像 。 
当 在 浏览 器 中 显示 该 页 面 时 , 单 击 “ 显 示 第 一 幅 图 "按钮. 则 在 下 面 显示 第 一 幅 图 ; 单 击 “ 显 示 第 二 幅 
图 "按钮. 则 在 下 面 显 示 第 二 幅 图 ; 单 击 “ 显 示 混 合 的 两 幅 图 ”按钮 . 则 第 一 幅 图 和 第 二 幅 图 混合 之 后 的 
效果 如 图 070-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
L: ws 口 x 








国 Iccalhost63342/myWor x 
€ 3 © Dlocalhost63342/myWork/mty 至 





县 未 第 一 赴 图 | | 县 未 第 二 贝 图 | | 是 示 隶 语 的 两 由 图 








心 HTML5+CSS3 炫 酷 应 用 实例 集锦 





<!doctype html >< html >< head >< meta charset = UIF -8> 
< script src = "js/jquery- 3.1.1.min. js"></script>< script language= "javascript"> 
$ (document). ready(function() { 
$ ("#myBtnA").click(function() { // 显 示 第 一 幅 图 
var myCanvas = $ ("#myCanvas").get(0); 
var myContext = myCanvas. getContext ("2d" ); 
myContext.globalCompositeOperation = "normal"; 
var myImageA = new Image( ); 
myImageA. src = " img/a050A. jpg"; 
myImageA. onload = function() { 
myContext. drawImage(myImageA, 0, 0, 350, 210); 
1;1); 
$ ("#myBtnB").click(function() { // 显 示 第 二 幅 图 
var myCanvas = $ ("#myCanvas").get(0); 
var myContext = myCanvas. getContext ("2d" ); 
myContext.globalCompositeOperation = "normal"; 
var myImageB = new Image( ); 
myImageB. src = " img/a050B. jpg"; 
myImageB. onload = function() { 
myContext. drawImage(myImageB, 0, 0, 350, 210); }; }); 
$ ("#myBtn"). click(function() { // 显 示 混 合 的 两 幅 图 
var myCanvas = $ ("#myCanvas").get(0); 
var myContext = myCanvas. getContext ("2d" ); 
var myOptions = new Array( "normal", "darken", "lighten", 
"multiply", "screen", "color - burn", "color — dodge"， 
"hard - light", "soft — light", "overlay", "difference", "exclusion"); 
var myImageA = new Image(); 
myImageA. src = " img/a050A. jpg"; 
myImageA. onload = function( ){ 
myContext. drawImage(myImageA,0, 0, 350, 210); 
myContext. globalCompositeOperation = myOptions[1]; 
var myImageB = new Image( ); 
myImageB. src = " img/a050B. jpg"; 
myImageB. onload = function( ){ 
myContext. drawImage(myImageB,0, 30); };};});}); 
</script ></head> 
<body><p> 
< input type = "button" value= "显示 第 一 幅 图 " id = "myBtnA" style= "width:105px"> 
< input type = "button" value = "显示 第 二 幅 图 ”id = "myBtnB" style= "width:105px"> 
< input type = "button" value= "显示 混合 的 两 幅 图 ”id = "myBtn”style= "width:125px"></p> 
<canvas jd = "myCanvas" width = "400" height = "450"></canvas ></body></html > 


Hl 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,globalCompositeOperation 属性 用 于 
设置 或 返回 如 何 将 一 个 源 ( 新 的 ) 图 像 绘 制 到 目标 (已 有 ) 图 像 上 ,该 属性 支持 混合 模式 的 选项 ,这 些 选 
项 的 意义 如 下 。 

(1) normal: 默认 值 ,该 选项 实现 正常 模式 ,不 混合 。 

(2) darken: 该 选项 实现 变 暗 模式 , 逐 像素 对 比 基 色 和 混合 色 ,只 保留 较 深 的 颜色 ,去 除 较 浅 的 颜 
色 ( 白 色 为 最 浅 的 颜色 ,黑色 为 最 深 的 颜色 ) 。 

(3) lighten: 该 选项 实现 变 亮 模式 , 逐 像素 对 比 基 色 和 混合 色 , 只 保留 较 浅 的 颜色 ,去 除 较 深 的 颜 
色 (白色 为 最 浅 的 颜色 ,黑色 为 最 深 的 颜色 )。 

(4) multiply: 该 选项 实现 正片 至 底 模式 , 逐 像素 对 比 基 色 与 混合 色 ,将 基色 的 灰 度 级 与 混合 色 的 
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灰 度 级 进行 乘法 计算 ,获得 灰 度 级 更 低 的 颜色 而 成 为 合成 后 的 颜色 。 任 何 颜色 与 黑色 相 乘 得 到 黑色 ， 
任何 颜色 与 白色 相 乘 则 保持 颜色 不 变 。 与 变 暗 混合 模式 不 同 ,这 种 混合 模式 在 变 暗 图 像 时 图 像 暗部 
区 域 的 过 渡 很 平缓 ,有 利于 保持 原始 图 像 的 轮廓 与 图 像 中 的 阴影 部 分 。 

(5) screen: 该 选项 实现 滤 色 模式 ,与 正片 释 底 模式 相反 . 滤 色 模式 将 上 、 下 两 层 图 层 的 像素 颜色 
的 灰 度 级 进行 乘法 计算 ,获得 灰 度 级 更 高 的 颜色 而 成 为 合成 后 的 颜色 。 图 层 合成 后 的 效果 简单 地 说 
是 高 灰 阶 的 像素 显现 而 低 灰 阶 不 显现 ( 即 浅 色 出 现 : 深 色 不 出 现 ) .产生 的 图 像 更 加 明亮 。 

(6) color-burn: 该 选项 实现 颜色 加 深 模 式 ,在 使 用 这 种 模式 时 会 使 图 像 颜 色 变 得 更 暗 ,混合 色 越 
暗 ,效果 越 细腻 。 让 图 像 颜 色 更 暗 有 点 类 似 于 正片 琶 底 ,但 不 同 的 是 它 会 根据 混合 色相 应 增加 图 像 的 
对 比 度 。 注 意 ,与 白色 混合 没有 任何 效果 。 

(7) color-dodge: 该 选项 实现 颜色 减 淡 模 式 ,在 使 用 这 种 模式 时 会 使 图 像 颜 色 变 得 更 亮 ,混合 色 
越 亮 ,效果 越 细腻 。 这 种 模式 与 颜色 加 深 模式 正好 相反 ,通过 降低 对 比 度 .加 亮 底层 颜色 来 反映 混合 
色彩 ,和 黑色 混合 没有 任何 效果 。 

(8) hard-light: 该 选项 实现 强 光 模式 。 在 对 两 幅 图 像 进行 逐 像素 比较 时 ,如 果 混 合 色 的 灰 度 级 
小 于 等 于 0.5, 则 采用 正片 释 底 模式 ,否则 采用 滤 色 模式 (不 同 像素 所 采用 的 模式 可 能 不 同 ) ,产生 的 效 
果 就 好 像 为 图 像 应 用 强烈 的 聚光灯 。 如 果 用 纯 黑 或 者 纯 白 进行 混合 ,得 到 的 也 是 纯 黑 或 者 纯 白 。 

(9) soft-light: 该 选项 将 混合 色 以 柔 光 的 方式 混合 到 基色 中 , 当 基 色 的 灰 阶 趋 于 高 或 低 时 会 调整 
颜色 合成 结果 的 阶 调 趋 于 中 间 的 灰 阶 调 ,从 而 获得 色彩 较为 柔和 的 合成 效果 ,形成 的 结果 是 图 像 的 中 
亮色 调 变 得 更 亮 ,暗色 区 域 变 得 更 暗 , 图 像 反差 增 大 ,类 似 于 和 柔 光 灯 照 射 图 像 的 效果 。 至 于 变 暗 还 是 
提 亮 画面 颜色 ,取决 于 混合 色 信 息 , 如 果 混 合 色 的 灰 度 级 大 于 0. 5, 基 色 会 变 亮 ; 如 果 混 合 色 的 灰 度 级 
小 于 0.5 ,基色 会 变 暗 。 

(10) overlay: 该 选项 实现 释 加 模式 。 在 对 两 幅 图 像 进行 逐 像 素 比较 时 ,如 果 基色 的 灰 度 级 小 于 
等 于 0.5, 则 采用 正片 彼 底 模式 ,否则 采用 滤 色 模式 (不 同 像素 所 采用 的 模式 可 能 不 同 )。 一 般 来 说 , 进 
行 登 加 模式 的 图 像 混 合 后 中 间 色 调 均 会 产生 变化 .但 高 亮色 和 暗色 基本 保持 不 变 , 因 此 基色 的 高 光 与 
阴影 部 分 的 亮度 细节 就 会 被 保留 。 其 效果 与 强 光 模式 正好 相反 。 

(11) difference: 该 选项 实现 差 值 模式 ,将 混合 色 与 基色 的 RGB 值 中 的 每 个 值 分 别 进行 比较 ,用 
高 值 减 去 低 值 作用 合成 后 的 颜色 ,所 以 这 种 模式 经 常 使 用 ,白色 与 任何 颜色 混合 得 到 反 相 色 , 黑 色 与 
任何 颜色 混合 后 颜色 不 变 。 

(12) exclusion: 该 选项 实现 排除 模式 ,与 差 值 模式 的 作用 类 似 ,只 是 排除 模式 的 结果 色 的 对 比 度 
没有 差 值 模式 强 。 白 色 与 基色 混合 得 到 基色 补 色 . 黑 色 与 基色 混合 得 到 基色 。 

此 实例 的 源 文件 名 是 myHtmlA050. html。 


071 在 图 像 中 抠 取 某 部 分 并 对 其 进行 局 部 放大 


此 实例 主要 通过 使 用 drawlmage() 方 法 实现 抠 取 部 分 图 像 并 对 其 进行 局 部 放大 显示 。 当 在 浏览 
器 中 显示 该 页 面 时 , 单 击 “ 抠 取 部 分 图 像 并 进行 放大 显示 ”按钮 .将 在 下 面 的 左边 显示 原 图 ,在 右边 显 
示 原 图 中 经 过 放大 的 头像 ,如 图 071-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 





<! doctype html >< html >< head><meta charset = UTF -8> 
< script src= "js/jquery - 3.1.1.min. js"></script>< script language = "javascript"> 
$ (document). ready(function() { 
$("#myBtn").click(function() { // 抠 取 部 分 图 像 并 进行 放大 显示 
var myCanvas =$ (" #myCanvas"). get(0); 
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var myContext = myCanvas. getContext( "2d"); 
Var myImage = new Image(); 

myImage. src = " img/a043. jpg"; 

myImage. onload = function() { 





myContext. drawImage(myImage, 0, 0, 200, 200); // 显 示 原 图 
myContext. drawImage(myImage, 60, 10, 100, 100, 210, 0, 200, 200); // 显 示 局 部 放大 图 
} 71);1); 
</script ></head > 
<body><p>< input type = "button"” value =" 抠 取 部 分 图 像 并 进行 放大 显示 " id = "myBtn" style = "width: 
400px"></p> 


<canvas jd = "myCanvas" width= "400" height = "200" ></canvas ></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,drawImage() 方 法 用 于 在 画布 上 绘制 


图 像 或 视频 ,该 实例 主要 通过 在 此 方法 中 设置 相关 参数 实现 抠 取 图 像 的 部 分 区 域 并 放大 显示 。 


drawJImage() 方 法 的 语法 声明 如 下 。 





drawImage( img, sx, sy, swidth, sheight, xy y width, height); 


其 中 ,参数 img 规定 要 使 用 的 图 像 、 画 布 或 视频 ; 参数 sx 是 可 选 参数 ,表示 开始 剪 切 的 x 坐标 位 
置 ; 参数 sy 是 可 选 参数 ,表示 开始 剪 切 的 y 坐标 位 置 ; 参数 swidth 是 可 选 参数 ,表示 被 剪 切 图 像 的 宽 
度 ; 参数 sheight 是 可 选 参 数 , 表 示 被 剪 切 图 像 的 高 度 ; 参数 x 表示 在 画布 上 放置 图 像 的 x 坐标 位 置 ; 
参数 y 表示 在 画布 上 放置 图 像 的 y 坐标 数 width 是 可 选 参数 ,表示 要 使 用 的 图 像 的 宽度 ( 伸 
展 或 缩小 图 像 ); 参数 height 是 可 选 参数 ， 使 用 的 图 像 的 高 度 ( 伸 展 或 缩小 图 像 )。 

此 实例 的 源 文件 名 是 myHtmlA044. html。 
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图 071-1 


072 ”通过 绘制 五 角 星 的 形状 来 裁剪 图 像 


此 实例 主要 使 用 lineTo( ) 方 法 绘制 五 角 星 ,然后 使 用 clip() 方 法 按照 五 角 星 的 形状 裁剪 图 像 。 当 
在 浏览 器 中 显示 该 页 面 时 , 单 击 * 按 照 五 角 星 的 形状 裁剪 图 像 按 钮 , 则 在 下 面 显示 的 图 像 将 被 裁剪 成 
一 个 五 角 星 ,如 图 072-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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<!doctype html >< html >< head >< meta charset = UTF -8> 
< script src = "js/jquery- 3.1.1.min. js"></script>< script language= "javascript"> 
$ (document). ready(function() { 
$ ("#myBtn"). click(function() { // 按 照 五 角 星 的 形状 裁剪 图 像 
var myCanvas = $ (" 井 myCanvas") .get(0); 
var myContext = myCanvas. getContext("2d") ; 
var myImage = new Image(); 
myImage. src = "img/a043. jpg" 
myImage. onload = function( ){ 
var n= 0; var dx= 100; var dy= 0; var s =150; 
myContext. beginPath( ); 
myContext. translate(80, 120); 
var x= Math. sin(0); var y= Math.cos(0); 
var myDig = Math. PI/5 * 4; 
for(var i=0; i<6; i++){ // 创 建 五 角 星 
var x= Math. sin(i x myDig); 
var y= Math. cos(ix myDig); 
myContext. lineTo( dx +xx* s,dy+y* s); 


} 

myContext. stroke( ); 

myContext. clip( ); // 根 据 五 角 星 裁剪 

myContext. drawImage(myImage, - 50, — 150, 300, 300); };});}); 
</script ></head> 


<body ><p>< input type = "button" value = "按照 五 角 星 的 形状 裁剪 图 像 ”id = "myBtn" style = "width:350px"> 
</p> 
<canvas jd = "myCanvas" width = "1900" height = "1950"></canvas ></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,lineTo() 方 法 用 于 添加 一 个 新 点 , 然 
后 创建 从 该 点 到 画布 中 最 后 指定 点 的 线条 (该 方法 并 不 会 实际 绘制 线条 ) 。 在 该 实例 中 如 果 删 除 
myContext, drawImage(mylmage, 一 50, 一 150,300,300), 即 可 看 到 绘制 的 线条 。lineTo() 方 法 的 语 
法 声明 如 下 。 





lineTo(x, y); 


其 中 ,参数 x 表示 路 径 的 目标 位 置 的 x 坐标 ; 参数 y 表示 路 径 的 目标 位 置 的 y 坐标 。 
面 - 一 昌文 
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clip() 方 法 用 于 从 原始 画布 中 剪 切 任意 形状 和 尺寸 ,一 旦 剪 切 了 某 个 区 域 .所 有 之 后 的 绘图 都 会 
被 限制 在 被 剪 切 的 区 域内 (不 能 访问 画布 上 的 其 他 区 域 ) 。 
此 实例 的 源 文件 名 是 myHtmlA046. html。 


073 ”通过 绘制 圆 饼 图 的 形状 来 裁剪 图 像 


此 实例 主要 使 用 arc0) 方 法 绘制 残缺 的 圆 饼 图 ,然后 使 用 clipO 〇 方法 按照 圆 饼 图 的 弧 线形 状 裁剪 
图 像 。 当 在 浏览 器 中 显示 该 页 面 时 , 单 击 “ 按 照 弧 线 的 形状 裁剪 图 像 ” 按 钮 , 则 在 下 面 显 示 的 图 像 将 被 
裁 前 成 一 个 由 弧 线 围 成 的 封闭 图 形 , 如 图 073-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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<! doctype html >< html >< head >< meta charset = UTF -8> 
< script src= "js/jquery -3.1.1.min. js"></script >< script language = "javascript"> 
$ (document). ready(function() { 
$("#myBtn"). click(function() { // 按 照 弧 线 的 形状 裁剪 图像 

var myCanvas = $ ("#myCanvas").get(0); 

var myContext = myCanvas. getContext ("2d" ); 

var myImage = new Image(); 

myImage. src = "img/a048. jpg" ; 

myImage. onload = function(){ 
myContext. beginPath( ); 
// 绘 制 起 始 角 为 135 终止 角 为 45 的 弧 线 , 顺 时 针 旋 转 
myContext.arc(160, 120,120,2 * Math. PI * 135/360,2 * Math.PI* 45/360) 
myContext. lineTo( 160, 120); 
myContext. closePath( ); 
myContext. stroke( ); 


myContext. clip( ); // 按 照 弧 线 的 形状 裁剪 图 像 
myContext. drawImage(myImage, 0,0,350,210); };});}); 
</script ></head> 


<body><p>< input type= "button" value = "按照 弧 线 的 形状 裁剪 图 像 ”id = "myBtn" style= 
"width:340px"></p> 
<canvas id= "myCanvas" width= "400" height = "450"></canvas ></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,arc() 方 法 用 于 创建 弧 / 曲 线 ,或 者 用 
于 创建 圆 /部 分 圆 。 如 果 需 要 使 用 arc( ) 方 法 创建 圆 ,应 把 起 始 角 设 置 为 0、 结束 角 设置 为 2 * Math. 








2 部 分 图 像 < 人 > 


PI。arc() 方 法 的 语法 声明 如 下 。 

arc(x, y, r sAngle, eAngle, counterclockwise); 
其 中 ,参数 x 表示 圆心 的 x 坐标 ; 参数 y 表示 圆心 的 y 坐标 ; 参数 表示 圆 的 半径 ， 参数 sAngle 
表示 起 始 角 ,以 弧度 计 , 弧 ( 圆 形 ) 的 三 点 (时 ) 钟 位 置 是 0"; 参数 eAngle 表示 结束 角 , 以 弧度 计 ; 参数 


counterclockwise 是 可 选 参数 ,规定 应 该 道 时 针 还 是 顺 时 针 绘 图 ,false 表示 顺 时 针 ,true 表示 逆 时 针 。 
此 实例 的 源 文 件 名 是 myHtmlA048. html。 


074 采用 均匀 压缩 法 创建 椭圆 并 裁剪 图 像 


此 实例 主要 通过 使 用 scale() 方 法 等 实现 以 均匀 压缩 的 方式 创建 椭圆 并 裁剪 图 像 。 当 在 浏览 器 中 
显示 该 页 面 时 , 单 击 “ 按 照 椭圆 的 形状 裁剪 图 像 * 按 钮 , 则 在 下 面 显示 的 图 像 将 被 裁剪 成 一 个 椭圆, 如 
图 074-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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<!doctype html ><html >< head >< meta charset = UIF -8> 
< script src= "js/jquery- 3.1.1.min. js"></script>< script language = "javascript"> 
$ (document). ready(function() { 
$ ("#myBtn"). click( function() { // 按 照 椭 圆 的 形状 裁剪 图 像 
var myCanvas =$ (" #myCanvas"). get(0); 
var myContext = myCanvas. getContext("2d"); 
var myImage = new Image( ); 
myImage. src = " img/a047. jpg"; 
myImage. onload = function( ){ // 采 用 均匀 压缩 法 绘制 椭圆 
EvenCompEllipse(myContext, 174,102, 170, 100) 
myContext. clip(); 
myContext. drawImage(myImage, 0, 0,350, 210); };}); 
function EvenCompEllipse( myContext, x, y, ay b){ 
myContext. save( ); 


var r=(a>b)?a:b; // 选 择 ab 中 的 较 大 者 作为 arc() 方 法 的 半径 参数 
var ratioX= a/r; // 横 轴 缩放 比例 

var ratioY= b/r; // 纵 轴 缩放 比例 

myContext. scale(ratioX, ratioY); // 进 行 缩放 (均匀 压缩 ) 


myContext. beginPath( ); 
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// 从 椭圆 的 左 端点 开始 逆 时 针 绘 制 

myContext.moveTo( (x+ a)/ratioX, y/ratioY); 
myContext.arc(x/ratioX, y/ratioY, r, 0, 2* Math.PI); 
myContext.closePath( ); 

myContext. stroke( ); 

myContext. restore( ); };}); 


</script ></head> 
<body ><p>< input type = "button" value = "按照 椭圆 的 形状 裁 前 图 像 ”id = "myBtn" style = "width:340px"> 
</p> 


<canvas jd = "myCanvas" width = "400" height = "450"></canvas ></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,EvenCompEllipse() 自 定义 方法 是 用 
arc() 方 法 绘制 圆 , 结 合 scale() 方 法 在 横 轴 或 纵 轴 方 向 均匀 压缩 ,从 而 产生 椭圆 的 效果 。scale() 方 法 
的 作用 是 缩放 当前 绘图 ,使 其 更 大 或 更 小 。 如 果 对 绘图 进行 缩放 ,所 有 之 后 的 绘图 也 会 被 缩放 ,定位 
了 会 被 缩放 。 例 如 ,对 于 scale(2,2) ,绘图 将 定位 于 距离 画布 左上 角 两 倍 远 的 位 置 。scale() 方 法 的 语 
法 声明 如 下 。 





scale( scalewidth, scaleheight); 


其 中 ,参数 scalewidth 表示 缩放 当前 绘图 的 宽度 (1 二 100% ,0.5 二 50%, 2 一 200% ,以 此 类 推 )， 
参数 scaleheight 表示 缩放 当前 绘图 的 高 度 (1 王 100% ,0.5 二 50%, 2 二 200% ,以 此 类 推 ) 。 
此 实例 的 源 文件 名 是 myHtmlA047. html 


075 ”通过 绘制 多 个 圆 形 实现 太极 图 案 的 绘制 


此 实例 主要 使 用 are( ) 方 法 绘制 多 个 圆 形 ,从 而 实现 太极 图 案 的 绘 当 在 浏览 器 中 显示 该 页 面 
时 , 单 击 “ 绘 制 太 极 图 案 " 按 钮 ,将 在 下 面 显 示 一 个 黑白 的 太极 图 案 , 如 图 075-1 所 示 。 有 关 此 实例 的 主 
要 代码 如 下 。 
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<!doctype html >< html >< head>< meta charset = UTF -8> 
<script src= "js/jquery- 3.1.1.min. js"></script > 
< script language = " javascript"> 
$ (document). ready(function() { 
$ ("#myBtn").click(function() { // 绘 制 太极 图 案 
var myCanvas = document. getElementById( "myCanvas" ); 
myContext = myCanvas. getContext ("2d"); 
// 重 新 映射 画布 上 的 (0,0) 位 置 
myContext. translate( - 20, — 40); 
// 在 右 侧 绘制 白色 半圆 ,可 以 省 略 
myContext. fillStyle = "#FFF"; 
myContext. beginPath( ); 
myContext. arc(200, 200, 150, 1.5 x Math.PI, Math.PI/2, false); 
myContext. closePath( ); 
myContext. fill()7 
// 在 左 侧 绘制 黑色 半圆 
myContext. fillStyle = "#000"; 
myContext. beginPath( ); 
myContext. arc(200, 200, 150, Math. PI/2, 1.5 * Math.PI, false); 
myContext. closePath( ); 
myContext. fil1(); 
// 在 垂直 中 心 上 绘 制 黑 、 白 两 个 小 贺 
myContext. fillStyle = "##000"; 
myContext. beginPath( ); 
myContext.arc(200, 275, 75, 0, Math. PI * 2, false); 
myContext. closePath( ); 
myContext. fil1(); 
myContext. fillStyle = "#FFF"; 
myContext. beginPath( ); 
myContext. arc(200, 125, 75, 0, Math.PI x* 2, false); 
myContext. closePath( ); 
myContext. fill(); 
myContext. fillStyle = "#FFF"; 
myContext. beginPath( ); // 绘 制 白 点 和 黑 点 
myContext. arc(200, 275, 10, 0, Math.PI #2, false); 
myContext. closePath( ); 
myContext. fil1(); 
myContext. fillStyle = "#000"; 
myContext. beginPath( ); 
myContext.arc(200, 125, 10, 0, Math. PI x2, false); 
myContext. closePath( ); 
myContext. fil1(); 
myContext. beginPath( ); // 绘 制 最 外 层 的 空心 大 圆 
myContext. arc(200, 200, 150, 0, 2 * Math.PI, false); 
myContext. closePath( ); 
myContext. stroke( ); 
D7}); 
</script ></head> 
<body><p>< input type = "button" value = "绘制 太极 图 案 " id= "myBtn" style= "width:350px"></p> 
<canvas id= "myCanvas" width= "410" height = "410"></canvas ></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,beginPath() 方 法 用 于 开始 一 条 路 径 
或 重 置 当前 的 路 径 ; closePath() 方 法 用 于 创建 从 当前 点 到 开始 点 的 路 径 ; arc() 方 法 用 于 创建 弧 / 曲 
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线 (用 于 创建 圆 或 部 分 圆 )。 整 个 绘制 过 程 如 下 : 首先 绘制 两 个 半圆 .分别 对 应 左 侧 黑色 和 右 侧 白色 ， 
组 成 一 个 圆 ; 绘制 完成 以 后 再 分 别 绘制 一 个 白色 和 黑色 的 圆 , 处 于 绘制 好 的 黑白 圆 之 内 ,半径 恰好 是 
黑白 大 圆 一 半 ; 最 后 在 已 绘制 的 两 个 黑白 小 圆 内 分 别 填充 (绘制 ) 白 色 和 黑色 的 点 。 

此 实例 的 源 文件 名 是 myHtmlA068. html。 


076 在 自 定义 画布 上 模拟 刊 刮 奖 的 刮 奖 特 效 


此 实例 主要 为 画布 标签 添加 mousedown mousemove ,mouseup 等 事件 响应 方法 .并 使 用 fillRect() 
方法 和 clearRect( ) 方 法 ,从 而 实现 在 自 定义 画布 上 模拟 刊 刮 奖 的 刮 奖 特 效 。 当 在 Google Chrome 浏 
览 器 中 显示 该 页 面 时 , 单 击 “ 开 始 擦 除 涂 层 (然后 按 住 鼠 标 在 灰色 涂 层 上 移动 )" 按 钮 ,然后 按 住 鼠 标 在 
灰色 涂 层 上 移动 , 即 可 出 现 如 图 076-1 所 示 的 刮 奖 效果 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 076-1 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
< script src= "js/jquery - 3.1.1.min. js"></script> 
< script type = "text/javascript"> 
$ (function() { 
var myCanvas = document. getElementById( 'myCanvas' ) ; 
Var myContext = myCanvas. getContext( '2d'); 
myContext. fillStyle ='1ightgrey' ; // 在 画布 上 增加 一 个 灰色 的 涂 层 
myContext. fillRect(0, 0, 400, 240); 
var myEraser = document. getElementById( 'myEraser' ); 
var isErasering; 
myEraser. onclick = function() { // 开 始 擦 除 
myCanvas. onmousedown = function() { isErasering= true; } 
myCanvas. onmousemove = function(e) { ” // 继 续 擦 除 
if (isErasering) { 
Var mouseX = e. pageX - this. offsetLeft; 
Var mouseY = e. pageY — this. off setTop; 
// 根 据 当 前 位 置 用 边 长 为 25px 的 正方 形 擦 除 涂 层 
myContext. clearRect (mouseX, mouseY, 25, 25); 
dh 
myCanvas. onmouseup = function() { // 结 束 擦 除 
isErasering = false; 
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}}D; 
</script> 
<style type= "text/css"> 

canvas { border - radius: 5px; z- index: 100; 

position: absolute; top: 35px; left: 5px; } 
img { position: absolute; width: 400px; height: 240px; 
border - radius: 5px; z- index: —1; top: 35px; left: 5px; } 

button { width: 395px; } 
</style></head> 


<body >< button id = "myEraser"> 开 始 擦 除 涂 层 (然后 按 住 鼠 标 在 灰色 涂 层 上 移动 )</button> 
< img src= "img/al18. jpg"/> 
<canvas width= "400" height = "240" id = "myCanvas"></canvas ></body ></htnl > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,myContext fillRect(0, 0, 400, 240) 
用 于 在 自 定义 画布 上 绘制 一 个 实心 矩形 。 在 HTML5 中 ,fillRect() 方 法 用 于 绘制 “已 填 色 ”的 矩形 , 默 
认 的 填充 颜色 是 黑色 ,用 户 可 以 使 用 画布 的 fillStyle 属性 来 设置 填充 颜色 、 渐 变 或 模式 。fillRect() 方 
法 的 语法 格式 如 下 。 


fillRect(x, y, width, height); 


其 中 ,参数 x 表示 和 矩形 左上 角 的 x 坐标 ; 参数 y 表示 矩形 左上 角 的 y 坐标 ; 参数 width 表示 和 矩形 
的 宽度 ,以 像素 计 ; 参数 height 表示 矩形 的 高 度 ,以 像素 计 。 

clearRect(mouseX, mouseY，25, 25) 表 示 根 据 鼠 标 指针 的 当前 位 置 用 边 长 为 25px 的 正方 形 擦 
除 涂 层 。 在 HTML5 中 ,clearRect( ) 方 法 用 于 清空 给 定 和 矩形 内 的 指定 像素 ,该 方法 的 语法 格式 如 下 。 


clearRect(x, y, width, height) 7 


其 中 ,参数 x 表示 要 清除 的 矩形 左上 角 的 x 坐标 ; 参数 y 表示 要 清除 的 矩形 左上 角 的 y 坐标 ; 参 


数 width 表示 要 清除 的 矩形 的 宽度 ,以 像素 计 ; 参数 height 表示 要 清除 的 矩形 的 高 度 ,以 像素 计 。 
此 实例 的 源 文件 名 是 myHtmlAl118. html。 


077 绘制 局 部 图 像 模 拟 水 平 或 垂直 展开 图 像 


此 实例 主要 通过 使 用 定时 器 方法 setInterval() 以 及 动态 设置 画布 的 drawImage() 方 法 的 宽度 和 
高 度 参数 实现 模拟 水 平 或 垂直 展开 图 像 的 效果 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 , 单 击 
“ 沿 垂直 方向 展开 图 像 " 按 钮 ,图 像 将 从 上 向 下 逐渐 展开 ,如 图 077-1 所 示 ; 单 击 “ 沿 水 平方 向 展开 图 
像 ” 按 钮 ,图 像 将 从 左 向 右 逐 渐 展开 ,如 图 077-2 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 





<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<script src= "js/jquery — 3.1.1.min. js"></script >< script type = "text/javascript"> 

$ (function() { 

var canvas =$ ('#MyCanvas')[0]; 

Var context = canvas. getContext( '2d' ); 

var width = canvas. width; 

var height = canvas. height; 

var drawHeight, drawWidth; var timer; 

$ ("#myBtnVertical").click(function() { // 沿 垂直 方向 展开 图 像 
context. clearRect(0, 0, width, height); 
clearInterval (timer); 
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context. fillStyle = " #FFF"; 
context. fillRect(0, 0, width, height); 
drawHeight = 0; 
timer = setInterval( function() { 
context. save( ); 
// 根 据 指定 的 高 度 绘制 图 像 的 对 应 部 分 
context. drawImage( $ ("img")[0], 0, 0, width, drawHeight, 0, 0, width, drawHeight); 
drawHeight += 2; 
if (drawHeight > height){ // 结 束 展开 图 像 动 作 
clearInterval(timer); } 
context. restore(); 
}, 10);}); 
$ ("#myBtnHorizontal"). click(function() { // 沿 水 平方 向 展开 图 像 
context. clearRect(0, 0, width, height); 
clearInterval (timer); 
context. fillStyle = "#FFF"; 
context. fillRect(0, 0, width, height); 
drawWidth = 0; 
timer = setInterval( function() { 
context. save( ); 
// 根 据 指定 的 宽度 绘制 图 像 的 对 应 部 分 
context. drawImage( $ ("img")[0], 0, 0, drawWidth, height, 0, 0, drawWidth, height); 
drawWidth += 2; 
证 (drawWidth> width) { // 结 束 展开 图 像 动作 
clearInterval(timer); } 
context. restore(); },10);});}); 
</script> 
< style type = "text/css"> 
img { display: none; width:400px; height:250px;} 
button { width: 195px; } 
</style></head> 
<body>< div align = "center"> 
<p><button id= "myBtnVertical"> 沿 垂直 方向 展开 图 像 </button > 
<button id = "myBtnHorizontal"> 沿 水 平方 向 展开 图 像 </button ></p> 
< img src= "img/B099B. jpg"/> 
<canvas id= "MyCanvas" width= "400" height = "250"></canvas></div></body></html > 
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上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 .setInterval() 函数 用 于 按照 指定 的 周 
期 (10 毫秒 ) 根 据 指定 的 宽度 和 高 度 执行 在 画布 上 绘制 图 像 的 代码 ,该 方法 会 不 停 地 调用 参数 中 指定 
的 代码 ,直到 clearInterval() 函数 被 调用 或 窗口 被 关闭 ; drawImage ($ ("img")[0], 0, 0, width， 
drawHeight, 0, 0, width, drawHeight) 用 于 根据 指定 的 高 度 draw Height 获取 $ ("img")[0] 的 图 像 
信息 ,并 绘制 在 画布 的 对 应 位 置 ; drawlmage( $ ("img")[0], 0, 0, drawWidth, height, 0, 0， 
drawWidth，height) 用 于 根据 指定 的 宽度 drawWidth, 获 取 $("img")[0] 的 图 像 信 息 ,并 绘制 在 画布 
的 对 应 位 置 。 

此 实例 的 源 文件 名 是 myHtmlA121. html。 


078 ”绘制 局 部 图 像 模 拟 向 左 、 右 两 端 展 开 图 像 
此 实例 主要 通过 使 用 setInterval() .drawImage() ,fillRect() 方 法 等 模拟 从 中 心 向 两 边 展开 图 像 
或 从 两 边 向 中 心 收缩 图 像 的 效果 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 , 单 击 " 从 中 心 向 两 边 
展开 图 像 ” 按 钮 ,图 像 将 从 中 心 逐 渐 向 两 边 展开 ,如 图 078-1 所 示 ; 单 击 “从 两 边 向 中 心 收缩 图 像 " 按 
钮 ,图 像 将 从 左 、 右 两 边 同 时 逐渐 向 中 心 收缩 ,如 图 078-2 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<script src= "js/jquery - 3.1.1.min. js"></script >< script type = "text/javascript"> 
$ (function() { 
var canvas =$ ('#myCanvas')[0]; 
var context = canvas. getContext( '2d' ); 
var width = canvas.width; var height = canvas. height; 
Var drawLeft, drawWidth; var timer; 
$ ("#myBtnSpread"). click(function() { 
context. clearRect(0, 0, width, height); 
clearInterval (timer); 
context. fillStyle = " #FFF"; 
context. fillRect(0, 0, width, height); 
drawLeft = width/2; 
drawWidth = 0; 


timer = setInterval(function() { 


// 从 中 心 向 两 边 展开 图 像 
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context. save(); 
// 显 示 指定 区 域 的 图 像 
context. drawImage( $ ("img")[0], drawLeft, 0, drawWidth, height, drawLeft, 0, drawWidth, height); 
drawLeft -= 1; drawWidth += 2; 
if (drawLeft <= 0) { clearInterval(timer); } 
context. restore(); }, 20); }); 
$ ("#myBtnShrink"). click(function() { // 从 两 边 向 中 心 收 缩 图 像 
context. clearRect(0, 0, width, height); 
clearInterval (timer); 
context. fillStyle = " #FFF"; 
context. fillRect(0, 0, width, height); 
context. save( ); 
context. drawImage( $ ("img")[0], 0,0,width, height); // 首 先 显示 完整 的 图 像 
context. restore( ); 
var drawWidth= 0; 
timer = setInterval( function(){ 
context. fillStyle = "#FFF"; // 设 置 填充 颜色 与 背景 的 颜色 相同 
// 使 用 与 背景 相同 的 颜色 不 断 遮 掩 图 像 的 左边 
context. fillRect(0, 0, drawWidth, height); 
// 使 用 与 背景 相同 的 颜色 不 断 遮 掩 图 像 的 右边 
context. fillRect(width, 0, — drawWidth, height); 
drawWidth++ 7 
if(drawWidth == width/2 + 1){ clearInterval(timer); } },20); });}); 
</script> 
< style type = "text/css"> 
img { display: none;width:400px;height:250px;} 
button { width: 195px;} 
</style></head> 
<body>< div align = "center"> 
<p><button id= "myBtnSpread"> 从 中 心 向 两 边 展开 图 像 </button > 
<button id = "myBtnShrink"> 从 两 边 向 中 心 收 缩 图 像 </button ></p> 
< img src = "img/B157A. jpg"/> 
<canvas id= "myCanvas" width= "400" height = "250"></canvas ></div></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,setInterval() 函数 用 于 按照 指定 的 周 
期 (20 毫秒 ) 根 据 指定 的 宽度 和 高 度 执行 在 画布 上 绘制 (显示 ) 图 像 的 代码 ,该 方法 会 不 停 地 调用 参数 
中 指定 的 代码 实现 绘制 动作 ,直到 clearInterval() 函数 被 调用 或 窗口 被 关闭 : drawlmage( $ ("img") 
[oj, drawLeft,0, drawWidth，height，drawLeft， 0，drawWidth，height) 用 于 根据 指定 的 宽度 
drawWidth 获取 $$("img")[0] 的 图 像 信息 ,并 绘制 在 画布 的 对 应 位 置 ; drawlImage( $ ("img")[0],0， 
0,width,height) 用 于 绘制 完整 的 图 像 ; fillRect(0, 0, drawWidth, height) 用 于 以 页 面 背 景色 不 断 谈 
掩 图 像 的 左边 ; fillRect(width, 0,-drawWidth, height) 用 于 以 页 面 背景 色 不 断 谈 掩 图 像 的 右边 。 

此 实例 的 源 文件 名 是 myHtmlA122. html。 


079 绘制 局 部 图 像 模拟 以 百叶 窗 风格 展开 图 像 


此 实例 主要 通过 使 用 setInterval() .drawImage() 等 方法 模拟 以 水 平 ( 或 垂直 ) 百 叶 窗 展开 图 像 的 
特效 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 , 单 击 “以 垂直 百叶 窗 风 格 显示 图 像 " 按 钮 ,图 像 将 
以 百叶 窗 的 风格 从 上 向 下 展开 ,如 图 079-1 所 示 ; 单 击 “以 水 平 百 叶 窗 风格 显示 图 像 "按钮 ,图 像 将 以 
百叶 窗 的 风格 从 左 向 右 展开 ,如 图 079-2 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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<!doctype html >< html >< head ><meta charset = "UTF - 8"> 
< script src= "js/jquery -3.1.1.min. js"></script>< script type = "text/javascript"> 
$ (function(){ 
var canvas =$ ('#myCanvas')[0]; 
Var context = canvas. getContext( '2d' );; 
var width = canvas. width; 
var height = canvas. height; 
var drawHeight, drawWidth; 
context. drawImage( $ ("img")[0],0,0); 
var timer; 
$ ("#myBtnVertical"). click(function(){ // 以 垂直 百叶 窗 风格 显示 图 像 
context. clearRect(0, 0, width, height); 
clearInterval (timer); 
context. fillStyle = " #EEEEFF"; 
context. fillRect(0, 0,width,height); 
// 根 据 图 像 的 高 度 分 成 10 份 百叶 ,并 获取 百叶 的 高 度 
var myHeight = height/10; drawHeight = 0; 
timer = setInterval( function( ){ // 启 动 定时 器 ,以 百叶 窗 风格 显示 图 像 
context. save(); 
context. clearRect(0, 0, width, height); 
for(i=0;i<10;it+){ // 分 别 绘制 10 份 百叶 对 应 的 当前 图 像 
context. drawImage( $ ("img")[0],0,0 +ix*myHeight, width, drawHeight, 0, 0 + i x myHeight, width, 
drawHeight); } 


drawHeight += 1; 
if(drawHeight > myHeight){ // 图 像 显 示 完 毕 , 终 止 定时 器 
clearInterval(timer); } 
context. restore(); },20); }); 
$ ("myBtnHorizontal").click(function(){ // 以 水 平 百 叶 窗 风格 显示 图 像 
context. clearRect(0, 0, width, height); 
clearInterval (timer); 
context. fillStyle=" #FFF"; 
context. fillRect(0, 0,width, height); 
// 根 据 图 像 的 宽度 分 成 10 份 百叶 ,并 获取 百叶 的 宽度 
var myWidth = width/10; drawWidth = 0; 


timer = setInterval( function( ){ // 启 动 定时 器 ,以 百叶 窗 风格 显示 图 像 
for(i=0;i<10;it+){ // 分 别 绘制 10 份 百叶 对 应 的 当前 图 像 


context. drawImage( $ ("img")[0],0 + ix myWidth,0, drawWidth, height，0+ i x myWidth, 0, drawWidth, 
height); } 
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drawWidth += 1; 





if(drawWidth> myWidth){ // 图 像 显 示 完 毕 , 终 止 定时 器 
clearInterval(timer); } },20); });}); 
</script> 


<style type= "text/css"> 
img { display: none; width:400px; height:250px;} 
button { width: 195px; } 
canvas{ border - radius: 5px;} 
</style></head> 
<body>< div align = "center"> 
<p><button id= "myBtnVertical"> 以 垂直 百叶 窗 风格 显示 图 像 </button> 
<button id= "myBtnHorizontal"> 以 水 平 百 叶 窗 风格 显示 图 像 </button ></p> 
< img src= "img/A123. jpg"/> 
<canvas id= "myCanvas" width= "400" height = "250"></canvas ><br ></div> 
</body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,setInterval( ) 函数 用 于 按照 指定 的 周 
期 (20 毫秒 ) 根 据 指 定 的 百叶 窗 宽度 和 高 度 执行 在 画布 上 绘制 图 像 的 代码 ,该 方法 会 不 停 地 调用 参数 
中 指定 的 代码 实现 绘制 动作 ,直到 clearInterval() 函 数 被 调用 或 窗口 被 关闭 ; drawlmage( $ ("img") 
[o],0,0 二 ix myHeight,width,drawHeight,0, 0 十 ix myHeight, width, drawHeight) 用 于 根据 指定 
的 百叶 窗 高 度 myHeight 获取 $("img")[0j] 的 图 像 信息 ,并 绘制 在 画布 的 对 应 位 置 ; drawImage 
($ ("img")L0],0+ix myWidth,0, drawWidth,height, 0 十 ix* myWidth,0,drawWidth,height) 用 于 
根据 指定 的 百叶 窗 宽度 myWidth 获取 $$("img")[0] 的 图 像 信息 ,并 绘制 在 画布 的 对 应 位 置 。 

此 实例 的 源 文件 名 是 myHtmlA123. html。 


080 ”绘制 局 部 图 像 模 拟 向 上 、 下 两 端 展 开 图 像 


此 实例 主要 通过 使 用 setlnterval()、drawlImage() fillRect() 等 方法 实现 从 中 间 向 上 下 展开 图 像 
或 从 上 下 向 中 间 收 缩 图 像 的 效果 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 , 单 击 * 从 中 间 向 上 下 
展开 图 像 " 按 钮 ,图 像 将 从 中 间 逐 渐 向 上 下 展开 ,如 图 080-1 所 示 ; 单 击 * 从 上 下 向 中 间 收 缩 图 像 " 按 
钮 ,图 像 将 从 上 下 同时 逐渐 向 中 间 收 缩 , 如 图 080-2 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 





面 = 0o x 百 -o x 
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<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<script src= "js/jquery -3.1.1.min. js"></script >< script type = "text/javascript"> 

$ (function() { 

var canvas =$ ('#myCanvas')[0]; 

var context = canvas. getContext( '2d' ); 

var width = canvas. width; var height = canvas. height; var timer; 

$ ("#myBtnSpread"). click( function() { // 从 中 间 向 上 下 展开 图 像 
context. clearRect(0, 0, width, height); 
clearInterval (timer); 
context. fillStyle= " #FFF"; 
context. fillRect(0, 0,width, height); 
var drawTop = height/2; var drawHeight = 0; 
timer = setInterval( function(){ 
context. save( ); 
context. drawImage( $ ("img")[0], 0, drawTop, width, drawHeight, 0, drawTop, width, drawHeight); 

// 显 示 指 定 区 域 的 图 像 
drawTop—= 1; drawHeight += 2; 
if(drawTop <=0){ // 展 开 图 像 完成 
clearInterval(timer); } 
context. restore(); },20); }); 


$ ("#myBtnShrink"). click(function() { // 从 上 下 向 中 间 收 缩 图 像 
context. clearRect(0, 0, width, height); 

clearInterval (timer); 

context. fillStyle = "#FFF"; // 设 置 填充 颜色 与 背景 的 颜色 相同 


context. fillRect(0, 0,width, height); 
context. drawImage( $ ("img")[0],0,0,width, height); ”// 显 示 完 整 的 图 像 
var drawHeight = 0; 
timer = setInterval( function( ){ 
context. fillRect(0, 0, width, drawHeight); 
context. fillRect(0, height, width, - drawHeight); 


drawHeight++; 
if (drawHeight == height/2 + 1){ // 和 终止 遮掩 图 像 
clearInterval(timer); } },20); }); }); 
</script> 


<style type= "text/css"> 
img { display: none; width: 400px; height: 250px; } 
button { width: 195px;} 
canvas { border - radius: 5px; } 
</style></head> 
<body>< div align = "center"> 


<p><button id= "myBtnSpread"> 从 中 间 向 上 下 展开 图 像 </button > 


<button id= "myBtnShrink"> 从 上 下 向 中 间 收 缩 图像 </button></p> 
< img src = "img/A124. jpg"/> 


<canvas id = "myCanvas" width = "400" height = "250"></canvas ></div></body ></htnml > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,setInterval( ) 函数 用 于 按照 指定 的 周 
期 (20 毫秒 ) 根 据 指定 的 宽度 和 高 度 执行 在 画布 上 绘制 图 像 的 代码 ,该 方法 会 不 停 地 调用 参数 中 指定 
的 代码 实现 绘制 动作 ,直到 clearInterval() 函数 被 调用 或 窗口 被 关闭 ; drawlmage( $ ("img")[0],0， 
drawTop,width,drawHeight,0,drawTop.width, drawHeight) 用 于 根据 指定 高 度 drawHeight 获取 
$ ("img")[0j] 的 图 像 信息 ,并 绘制 在 画布 的 对 应 位 置 ; drawImage($("img")L0],0,0,width,height) 
用 于 绘制 完整 的 图 像 ; fillRect(0,0,width, drawHeight) 用 于 根据 页 面 的 背景 色 绘制 矩形 不 断 遮 掩 图 
像 的 上 边 ; fillRect(0.height,width,-drawHeight) 用 于 根据 页 面 的 背景 色 绘 制 矩形 不 断 遮 掩 图 像 的 
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下 边 。 


此 实例 的 源 文件 名 是 myHtmlA124. html。 
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对 图 像 进行 水 平 拉 伸 放大 或 垂直 拉 伸 


此 实例 主要 通过 使 用 scale() 方 法 实现 对 图 像 进行 水 平 拉 伸 ( 放 大 ) 或 垂直 拉 伸 (放大 ) 的 效果 。 当 
在 浏览 器 中 显示 该 页 面 时 , 单 击 对 图 像 进 行 垂直 拉 伸 ”按钮 ,将 在 下 面 显示 经 过 垂直 拉 伸 放 大 的 图 
像 ,如 图 081-1 所 示 ; 单 击 * 对 图 像 进行 水 平 拉 伸 ? 按 钮 ,将 在 下 面 显示 经 过 水 平 拉 伸 放大 的 图 像 ,如 
图 081-2 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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<!doctype html >< html ><head ><meta charset = UTF - 8> 
<script src= "js/jquery - 3.1.1.min. js"></script >< script language = "javascript"> 


$ (document). ready(function() { 
$("#myBtnHorizontal").click(function() { 
Var myCanvas =$ (" #myCanvas"). get(0); 
var myContext = myCanvas. getContext("2d"); 
var myImage = $ ("#myJpg").get(0); 
myContext. clearRect(0, 0, 410, 410); 
myContext. save( ); 
myContext. scale(2,1); 
myContext. drawImage(myImage, 0, 0); 
myContext. restore( ); 

DD); 

$ ("#myBtnVertical"). click(function() { 
var myCanvas =$ (" #myCanvas"). get(0); 
var myContext = myCanvas. getContext("2d"); 
var myImage = $ ("#myJpg").get(0); 
myContext. clearRect(0, 0, 410, 410); 
myContext. save( ); 


// 对 图 像 进 行 水 平 拉 伸 


// 对 图 像 进行 垂直 拉 伸 
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myContext. scale(1,2); 

myContext. drawImage(myImage, 0, 0); 

myContext. restore(); });}); 

</script ></head> 
<body><p> 原 始 图 像 : </p>< img id = "myJpg" src = "img/a067.jpg" /> 
<p>< input type="button” value= "对 图 像 进行 垂直 拉 伸 ”id = "myBtnVertical"” 
style = "width:170px"> 
< input type= "button" value = "对 图 像 进 行 水 平 拉 伸 "id = "myBtnHorizontal" 

style = "width:170px"></p> 
<canvas jd = "myCanvas" width = "410" height = "410" ></canvas></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,save() 方 法 用 于 保存 当前 环境 的 状 
态 ; restore() 方 法 用 于 恢复 之 前 保存 过 的 路 径 状态 和 属性 ; scale() 方 法 用 于 缩放 当前 绘图 ,使 其 更 大 
或 更 小 。 如 果 对 绘图 进行 缩放 ,所 有 之 后 的 绘图 也 会 被 缩放 。scale() 方 法 的 语法 声明 如 下 。 

scale( scalewidth, scaleheight); 

其 中 ,参数 scalewidth 表示 缩放 当前 绘图 的 宽度 (1 二 100% ,0.5 二 50%, 2 二 200%, 以 此 类 推 ); 
参数 scaleheight 表示 缩放 当前 绘图 的 高 度 (1 王 100%, 0.5 二 50% ,2 一 200% ,以 此 类 推 ) 。 

此 实例 的 源 文件 名 是 myHtmlA067. html。 


082 ”重新 映射 画布 并 按照 指定 角度 旋转 图 像 


此 实例 主要 通过 使 用 translate() 和 rotate() 方 法 实现 重新 映射 画布 位 置 并 按照 指定 角度 旋转 图 
像 。 当 在 浏览 器 中 显示 该 页 面 时 , 单 击 * 显 示 经 过 旋转 之 后 的 图 像 "按钮 ,将 显示 从 (0,0) 位 置 平移 到 
(120,10) 并 旋转 30" 之 后 的 图 像 ,如 图 082-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 082-1 


<!doctype html ><html >< head >< meta charset = UTF -8> 
< script src= "js/jquery - 3.1.1.min. js"></script>< script language = "javascript"> 
$ (document). ready(function() { 
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$ ("#myBtn"). click(function() { // 显 示 经 过 旋转 之 后 的 图 像 
var myCanvas =$ ("#myCanvas"). get(0); 

var myContext = myCanvas. getContext("2d"); 

var myImage = new Image(); 

myImage. src = " img/a043. jpg"; 

myImage. onload = function() { 


myContext. translate(120,10); // 平 移 画 布 

myContext. rotate(30 * Math. PI/180); // 旋 转 30” 

// 重 新 绘制 旋转 之 后 的 图 像 

myContext. drawImage(myImage,0, 0, myImage.width, myImage. height); } }); }); 
</script ></head> 


<body><p>< input type = "button" value= "显示 经 过 旋转 之 后 的 图 像 " id = "myBtn" style= 
"width: 300px"></p> 
<canvas id= "myCanvas" width = "900" height = "950" ></canvas ></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,translate() 方 法 用 于 重新 映射 画布 的 
(0,0) 位 置 ,该 方法 的 语法 声明 如 下 。 

translate(x, y); 

其 中 ,参数 x 表示 平移 水 平 坐 标 x 值 ; 参数 y 表示 平移 垂直 坐标 y 值 。 

rotate() 方 法 用 于 旋转 当前 绘制 对 象 , 该 方法 的 语法 声明 如 下 。 

rotate(angle); 

其 中 ,参数 angle 表示 旋转 角度 ,以 弧度 计算 。 如 果 需 要 将 角度 转换 为 弧度 ,应 使 用 degrees * 
Math. PI/180 公式 进行 计算 。 例 如 旋转 5 , 则 使 用 公式 5 * Math. PI/180。 

此 实例 的 源 文件 名 是 myHtmlA043. html。 


083 ”对 彩色 图 像 进行 水 平 镜像 的 特效 处 理 


此 实例 主要 通过 数学 运算 变换 像素 坐标 ,从 而 获取 照片 的 水 平 镜像 效果 。 当 在 浏览 器 中 显示 该 
页 面 时 ,将 在 上 面 显示 正常 的 图 像 ; 单 击 * 对 图 像 进行 水 平 镜像 特效 处 理 " 按 钮 ,将 在 下 面 显示 经 过 水 
平 镜像 特效 处 理 之 后 的 图 像 ,如 图 083-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 








<!doctype html >< html >< head >< meta charset = UIF -8> 
<script src = "js/jquery - 3.1.1.min. js"></script>< script language = "javascript"> 
function myEffect(myContext，myData) { // 水 平 镜像 特效 
var myTemp = myContext. createImageData( myData. width, myData. height); 
myTemp. data. set (myData. data); 
for ( var x=0; x<myTemp. width; x++){ 
for ( var y= 0; y <myTemp. height; y++){ 


Var idx = (x+YxmyTemp. width) * 4; // 像 素 在 数组 中 的 索引 
var midx= (( (myTemp. width 一 1) 一 x) + y* myTemp. width) * 4; 

// 在 图 像 中 设置 新 像素 

myData. data[ midx + 0] = myTemp. data[idx+ 0]; //R 通道 

myData. data[ midx + 1] = myTemp. data[ idx + 1]; //6 通道 

myData. data[ midx + 2] = myTemp. data[ idx + 2]; //B 通道 

myData. data[ midx + 3] = 255; //alpha 通道 


站 
$ (document). ready(function() { 
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图 像 4 











上 面 有 底 纹 的 代码 是 此 实例 的 核心 代 


$ ("#myBtn").click(function() { // 对 图 像 进 行 水 平 镜像 特效 处 理 
var myImage = document. getElementById( "myJpg" ); 

var myCanvas = document. getElementById( "myCanvas" ) ; 

myCanvas. width = myImage. clientWidth; 

myCanvas. height = myImage. cl ientHeight; 

myContext = myCanvas. getContext ("2d"); 

myContext. drawImage(myImage, 0, 0, myCanvas. width, myCanvas. height); 

var myData = myContext. get ImageData(0, 0,myCanvas. width, myCanvas. height) ; 
myEffect(myContext, myData); 

myContext. putImageData(myData, 0, 0); }); }); 


</script ></head> 
<body>< p> 原始 图 像 : </p>< img id = "myJpg" src = "img/a041. jpg"/> 
<p>< input type = "button" value = "对 图 像 进行 水 平 镜像 特效 处 理 " id = "myBtn" style = "width:380px"></p> 
<canvas id= "myCanvas" width = "900" height = "950"> </canvas ></body></html > 
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图 083-1 


.在 该 部 分 代码 中 ,getlmageData( ) 方 法 用 于 获取 
ImageData 对 象 , 该 对 象 复制 了 画布 指定 矩形 的 像素 数据 ImageData; putlImageData() 方 法 用 于 在 画 
布 上 显示 图 像 数 据 ( 从 指定 的 ImageData 对 象 ) ，createlmageData ( ) 方法 用 于 创建 新 的 空白 
ImageData 对 象 。 

此 实例 的 源 文 件 名 是 myHtmlA053. html。 
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084 给 图 像 添 加 半 透 明 放 射 圆 形 面 置 特效 


此 实例 主要 通过 使 用 createRadialGradient() 方 法 给 图 像 添 加 半 透 明 放射 圆 形 渐变 面 壮 特效 。 当 
在 浏览 器 中 显示 该 页 面 时 , 单 击 “给 图 像 添 加 半 透 明 放 射 圆 形 面 音 特效 ?按钮 ,将 在 下 面 显示 经 过 半 透 
明 放 射 圆 形 渐变 面罩 处 理 之 后 的 图 像 , 如 图 084-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 084-1 


<!doctype html >< html >< head >< meta charset = UTF -8> 
<script src = "js/jquery - 3.1.1.min. js"></script>< script language = "javascript"> 
$ (document). ready(function() { 
$("#myBtn").click(function() { // 给 图 像 添 加 半 透 明 放射 圆 形 面 单 特效 
var myImage = document. createElement('img') 7 
myImage. src = " img/a057. jpg"; 
myImage. onload = function() { 
var myCanvas = document. getElementById( "myCanvas" ); 
Var myContext = myCanvas. getContext("2d"); 
myContext. beginPath( ); // 把 矩形 照片 裁剪 成 一 个 贺 
myContext. arc(205, 205, 205, 0, 2 * Math. PI); 
myContext. closePath( ); 
myContext. clip( ); 
myContext. drawImage(myImage, 0, 0, 410, 410); 
// 添 加 半 透 明 放射 圆 形 面 音 
var myGradient = myContext. createRadialGradient(myCanvas. width/2, 
myCanvas. height/2, 10, myCanvas.width/2,myCanvas. height/2, 200); 
myGradient. addColorStop(0, 'rgba(247, 247, 247, 0)'); 
myGradient. addColorStop(0.7, 'rgba(120, 120, 120, 0.5)'); 
myGradient. addColorStop(0.9, 'rgba(0, 0, 0, 0.8)"'); 
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myGradient. addColorStop(1, 'rgba(238, 238, 238, 1)'); 

myContext. beginpath( ); 

myContext. arc(myCanvas. width/2, myCanvas. height/2, 300, 0, Math. PI * 2, true); 
myContext. closePath( ); 

myContext. fillStyle = myGradient; 

myContext. fil1(); 


} D2)); 
</script ></head> 


<body><p>< input type = "button" value = "给 图 像 添 加 半 透 明 放 射 圆 形 面 单 特效 ”id = "myBtn" style = 
"width: 410px"></p> 
<canvas id= "myCanvas" width = "410" height = "410"></canvas ></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,createRadialGradient() 方 法 用 于 创 
建 放 射 状 / 圆 形 渐变 对 象 ,该 方法 的 语法 声明 如 下 。 

createRadialGradient(x0,Y0,r0,xl,yl,rl) 

其 中 ,参数 x0 表示 渐变 的 开始 圆 的 x 坐标 ; 参数 y0 表示 渐变 的 开始 圆 的 y 坐标 ; 参数 r0 表示 开 
始 圆 的 半径 ; 参数 xl 表示 渐变 的 结束 圆 的 x 坐标 ; 参数 yl 表示 渐变 的 结束 圆 的 y 坐标 ; 参数 rl 表 
示 结 束 圆 的 半径 。 

createRadialGradient( ) 方 法 的 返回 值 是 一 个 gradient 对 象 。 当 gradient 对 象 创建 成 功 之 后 , 需 
要 使 用 该 对 象 的 addColorStop() 方 法 规定 gradient 对 象 中 的 颜色 和 人 位置。 如果 不 对 gradient 对 象 使 
用 该 方法 ,那么 渐变 将 不 可 见 。addColorStop() 方 法 的 语法 声明 如 下 : 

addColorStop( stop, color) 

其 中 ,参数 stop 的 值 为 0.0 一 1.0, 表 示 渐 变 开 始 与 结束 之 间 的 位 置 ; 参数 color 表示 在 结束 位 置 
显示 的 CSS 颜色 值 。 

此 实例 的 源 文件 名 是 myHtmlA057. html。 


085 ”设置 填充 样式 以 平 铺 的 风格 显示 图 像 


此 实例 主要 通过 使 用 createPattern( ) 方 法 实现 在 矩形 中 平 铺 图 像 。 当 在 浏览 器 中 显示 该 页 面 时 , 单 
击 * 平 铺 图 像 "按钮 ,将 在 下 面 的 矩形 中 平 铺 多 个 图 像 , 如 图 085-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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<!doctype html >< html ><head>< meta charset = UTF -8> 
< script src= "js/jquery - 3.1.1.min. js"></script>< script language = "javascript"> 

$ (document). ready(function() { 
$ ("#myBtn"). click(function() { // 平 铺 图 像 
Var myCanvas = $ (" #myCanvas"). get(0); 
Var myContext = myCanvas. getContext("2d" ); 
var myImage = new Image(); 
myImage. src = " img/a045. jpg"; 


myImage. onload = function() { // 创 建 平 铺 填充 样式 
var myPattern = myContext. createPattern(myImage, 'repeat'); 
myContext. fillStyle = myPattern; // 设 置 填充 样式 
myContext. fillRect(0, 0, 400, 210); // 填 充 矩形 
7 
</script ></head> 


<body><p><input type = "button" value=" 平 铺 图 像 " id = "myBtn" style= "width:400px"></p> 
<canvas id= "myCanvas" width = "900" height = "950"></canvas ></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,createPattern() 方 法 用 于 在 指定 的 方 
向 内 重复 指定 的 元 素 , 这 些 元 素 可 以 是 图 片 .视频 或 者 其 他 canvas 元 素 , 被 重复 的 元 素 可 用 于 绘制 / 填 
充 和 矩形 、 圆 形 或 线条 等 。createPattern() 方 法 的 语法 声明 如 下 。 


createPattern( image, "repeat |repeat - x|repeat ~ y|no ~ repeat"); 


其 中 ,参数 image 规定 要 使 用 的 图 片 、 画 布 或 视频 元 素 。 第 二 个 参数 是 重复 模式 ,其 中 repeat 是 
默认 值 ,该 模式 表示 在 水 平和 垂直 方向 重复 ; repeat-x 模式 表示 只 在 水 平方 向 重复 ; repeat-y 模式 表 
示 只 在 垂直 方向 重复 ; no-repeat 模式 表示 只 显示 一 次 (不 重复 ) 。 

此 实例 的 源 文件 名 是 myHtmlA045. html 。 


086 ”将 画布 的 内 容 保存 为 png 格式 的 文件 


此 实例 主要 在 toDataURL() 方 法 中 设置 image/png 参数 ,从 而 实现 把 画布 上 显示 的 所 有 内 容 保 
存 为 本 地 png 图 像 文件 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 , 即 可 在 红线 指定 的 画布 范围 
内 任意 涂鸦 ,如 图 086-1 所 示 , 单 击 清 除 画布 内 容 " 按 钮 , 则 将 清除 涂鸦 内 容 ; 单 击 “ 保 存 画 布 内 容 ” 按 
钮 , 则 涂鸦 内 容 将 被 保存 为 本 地 png 图 像 文件 ,在 “360 看 图 "中 显示 涂鸦 png 图 像 文件 的 效果 如 
图 086-2 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<script src= "js/jquery -3.1.1.min.js"></script >< script type= "text/javascript"> 
$ (function() { 
function convertCanvasToImage(canvas) { // 将 canvas 画布 内 容 转换 为 png 图 片 
var image = new Image(); 
image. src = canvas. toDataURL(" image/png"); 
return image; } 
var context = $ ("#myCanvas")[0].getContext("2d"); 
var LastX, LastY, CurrentX, CurrentY; var isDraw = false; 
$ ("#myCanvas").on("mousedown", function(e) { 
CurrentX = LastX= e.pageX -$ (this).offset(). left; 
CurrentY = LastY= e. pageY — $ (this).offset(). top; 
isDraw = true; }); 
$ ("#myCanvas").on("mousemove", function(e) { 
if (isDraw) { 
$ ("#myCanvas").css("cursor", "default"); 
CurrentX = e.pageX—$ (this).offset().left; 
CurrentY = e. pageY — $ (this). offset().top; 
context. beginPath( ); 
context. moveTo( CurrentX, CurrentY); 
context. lineTo( LastX, LastY); 
context. closePath( ) ; 
context. strokeStyle = $ ("input[type = color]"). val(); 
context. stroke( ); 
LastX = CurrentX; LastY = CurrentY; } }); 
$ ("#myCanvas").on("mouseup", function(e) { isDraw= false; }); 
$ ("#myClear").click(function() { // 清 除 画布 内 容 
context. clearRect(0, 0, 300, 200); }); 
$ ("#mySave"). click(function() { // 保 存 画 布 内 容 
var image = convertCanvasToImage( $ ("canvas")[0]); 
$ (this). prop( "href", image. src); });}); 
</script > 
< style type= "text/css"> 
a { - webkit - appearance: button; text - decoration: none; height: 17px; 
font - size: 12px; padding: 5px; cursor: default; width:195px;} 
a:link { color: black;} 
canvas { margin— top: 15px; border: 1px solid red; } 
</style></head> 
<body>< div align = "center"><a id= "myClear"> 清 除 画 布 内 容 </a> 
<a id= "mySave" download= "canvas"> 保 存 画布 内 容 </a></div> 


<div align = "center"><canvas id= "myCanvas" width = "415" height = "250"></canvas> </div> 
</body></htnml > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,toDataURL("image/png") 用 于 将 画 
布 上 显示 的 所 有 内 容 保存 为 本 地 png 图 像 文件 。 测试 表明 , 当 设 置 该 方法 为 toDataURL() 时 ,同样 是 
将 画布 上 显示 的 所 有 内 容 保 存 为 本 地 png 图 像 文 件 。 

此 实例 的 源 文件 名 是 myHtmlA239. html。 


087 ”将 画布 的 内 容 保存 为 jpeg 格式 的 文件 


此 实例 主要 通过 使 用 toDataURL() 方 法 实现 把 画布 上 显示 的 图 像 . 文 字 等 所 有 内 容 保存 为 一 幅 
图 像 。 当 在 浏览 器 中 显示 该 页 面 时 , 单 击 “ 在 画布 上 显示 图 像 和 文字 ”按钮 .将 在 画布 上 显示 一 幅 图 像 
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和 一 行文 字 , 如 图 087-1 所 示 ; 单 击 * 在 新 窗口 中 显示 保存 结果 ”按钮 , 则 浏览 器 将 打开 一 个 新 窗口 显 
示 包 含 图 像 和 文字 的 图 像 ,使 用 鼠标 右键 单 击 该 图 像 , 可 以 在 滑 出 的 右键 菜单 中 选择 “图 片 另存 为 (V) 


…” 命 令 将 该 图 像 保 存 到 本 地 计算 机 中 ,如 图 087-2 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 


<! doctype html ><html >< head>< meta charset = UIF -8> 
<script src= "js/jquery - 3.1.1.min. js"></script >< script language = "javascript"> 
$ (document). ready(function() { 

$ ("#myBtnShow").click(function() { // 在 画布 上 显示 图 像 和 文字 

var myCanvas = document. getElementById("myCanvas" ); 

var myContext = myCanvas. getContext( '2d'); 

var myImage = new Image(); 

myImage. src = "img/a040. jpg"; 

myImage. onload = function() { // 绘 制图 像 
myContext. drawImage(myImage, 0, 0, myCanvas. width, myCanvas. height); 
myContext. font ='16pt 宋体 '; 
myContext. 1 ineWidth = 3; 


myContext. strokeStyle = 'green'; // 设 置 描 边 颜色 
myContext. strokeText( ' 希 拉 里 .克林顿 '，140，50) ; // 绘 制 描 边 文本 
myContext. fillStyle = 'white' ; // 设 置 填充 颜色 


myContext.fillText(' 希 拉 里 .克林顿 '，140，50);  // 绘 制 填充 文本 

})) 

$ ("#myBtnSave").click(function() { // 在 新 窗口 中 显示 保存 结果 

var myCanvas = document. getElementById( "myCanvas" ); 

var myImage = myCanvas. toDataURL( " image/jpeg" ); 

var myWindow = window. open( 'about :blank', 'image from canvas'); 

myWindow. document. write("< img src ='" +myImage +"'alt ='from canvas'/>"); });}); 
</script ></head> 


<body><p>< input type = "button"” value = "在 画布 上 显示 图 像 和 文字 ”id = "myBtnShow" style = "width: 


410px"></p> 


<p><input type = "button" value = "在 新 窗口 中 显示 保存 结果 ”id = "myBtnSave" style = "width:410px"></p> 


<canvas jd = "myCanvas" style= "width:410px;height:200px" ></canvas ></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,toDataURL(type，ratio) 方 法 用 于 保 
存 图 像 , 参 数 type 的 值 可 以 在 image/png image/jpeg image/svg 十 xml 等 MIME 类 型 中 选择 (可 以 
不 填 ,默认 是 image/png)。 如 果 type 是 “image/jpeg”, 可 以 有 第 二 个 参数 ; 如 果 第 二 个 参数 ratio 的 


值 在 0 到 1 之 间 , 则 表示 JPEG 的 质量 等 级 ,否则 使 用 浏览 器 内 置 的 默认 质量 等 级 。 
此 实例 的 源 文件 名 是 myHtmlA064. html。 
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088 ” 读 取 并 显示 沙 箱 系 统 中 的 图 像 文 件 


此 实例 主要 通过 解析 文件 对 象 的 URL 实现 在 网 页 中 显示 本 地 沙 箱 文件 系统 中 的 图 像 文件 。 为 
了 达到 更 加 明晰 的 测试 效果 ,首先 在 Google Chrome 浏览 器 中 打开 源 代 码 中 的 文件 myHtmlA078. 
html , 单 击 * 选 择 文件 按钮 ,在 弹出 的 “打开 "对话 框 中 选择 一 个 图 像 文件 ,例如 a031. jpg, 如 图 088-1 
所 示 , 单 击 “ 打 开 (O)” 按 钮 , 则 刚才 选择 的 图 像 文件 a031. jpg 将 从 本 地 计算 机 复制 到 沙 箱 系 统 中 ,如 
图 088-2 所 示 。 然 后 在 Google Chrome 浏览 器 中 打开 实例 程序 的 源 代码 文件 myHtmlA086. html, 在 
“图 像 文件 名 称 :" 文 本 框 中 输入 刚才 复制 的 文件 a031. jpg, 单 击 " 显 示 图 像 文件 ”按钮 ,将 在 下 面 显示 
此 图 像 文 件 和 完整 的 URL 路径, 如 图 088-3 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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<!doctype html >< html ><head>< meta charset = UIF - 8> 
< script src= "js/jquery - 3.1.1.min. js"></script>< script language = "javascript"> 
window. requestFileSystem = 
window. requestFileSystem | | window.webkitRequestFileSystem; 


function showImage(){ // 显 示 图 像 文件 
window. webkitRequestFileSystem(PERSISTENT, 1024, 
function(fs){ // 请 求 文件 系统 成 功 时 所 执行 的 回调 函数 
var myFile = document. getElementById("myFile"). value; 
// 获 取 文件 对 象 
fs. root. getFile(myFile, {create:false}, 
function(fileEntry) { // 获 取 文件 成 功 时 所 执行 的 回调 函数 


var myImage = document. createElement( 'img'); 
var myURL = fileEntry. toURL( ); 
myImage. src = myURL; 
$ ("p"). get(0).appendChild(myImage); 
document. getElementById( "myInfo" ). innerHTML = myURL; 
},errorHandler); },errorHandler); } 
function errorHandler(e){ 7/ 请求 文件 系统 失败 时 所 执行 的 回调 函数 
switch (e.code) { 
case FileError. QUOTA_ EXCEEDED ERR: 
msg=' 文 件 系 统 所 使 用 的 存储 空间 的 尺寸 超过 磁盘 限额 控制 中 指定 的 空间 尺寸 '; 
break; 
case FileError. NOT_FOUND_ERR: 
msg= "未 找到 文件 或 目录 '… 
break; 
case FileError. SECURITY ERR: 
msg=' 操 作 不 当 引 起 安全 性 错误 '; 
break; 
case FileError. INVALID MODIFICATION ERR: 
msg=' 对 文件 或 目录 所 指定 的 操作 不 能 被 执行 '; 
break; 
Case FileError. INVALID STATE ERR: 
msg=' 指 定 的 状态 无 效 '; 
}; 
document. getElementById("myInfo" ) . innerHTML = "当前 操作 引发 错误 : " + msg; 
} 
</script ></head> 
<body><p> 图 像 文件 名 称 : < input type = "text" id= "myFile" style= "width:135px"> 
<input type = "button" value= "显示 图 像 文件 " onclick = "showImage()" 
style= "width:120px"><br><br></p>< output id= "myInfo" ></output ></body ></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,fileEntry. toURL() 用 于 


F 解析 文件 对 


象 的 URL。 在 FileSystem API 中 可 以 使 用 带 有 “filesystem:” 前 缀 的 URL, 这 种 URL 通常 用 在 页 面 





上 元 素 的 href 属性 值 或 sre 属性 值 中 。 例 如 , 沙 箱 中 有 一 个 被 永久 保存 的 图 像 文件 a03 


.jpg, 如 果 需 


要 在 页 面 上 显示 此 图 像 文 件 , 可 以 将 img 元 素 的 src 属性 值 设置 为 “ 旬 esystem:http:// "十 应 用 程序 
域名 十 “/persistent( 当 图 像 文件 被 保存 在 永久 存储 空间 时 ) 或 temporary( 当 图 像 文 件 被 保存 在 临时 存 


储 空间 时 )/” 十 “a031. jpg”。 
此 实例 的 源 文件 名 是 myHtmlA086. html。 
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089 ”以 二 进 制 形式 读 取 并 显示 本 地 图 像 文件 


此 实例 主要 使 用 FileReader 对 象 的 readAsBinaryString() 方 法 和 btoa() 方 法 以 二 进 制 形式 读 取 
本 地 图 像 文 件 并 显示 在 页 面 中 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 . 单 击 " 选 择 文件 ”按钮 ,在 
弹出 的 “打开 ”对 话 框 中 选择 一 个 图 像 文 件 ,例如 a038. jpg, 如 图 089-1 所 示 , 单 击 “ 打 开 (O)” 按 钮 返回 页 
面 ; 再 单 击 “ 显 示 图 像 ” 按 钮 ,将 在 下 面 显示 此 图 像 文件 ,如 图 089-2 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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<!doctype html >< html >< head >< meta charset = UTF -8> 
< script src = "js/jquery- 3.1.1.min. js"></script>< script language = " javascript"> 
function showImage( ){ // 显 示 图 像 
var myFile = document. getElementById("myFile").files[0]; 
if(!/image\A\w+ /.test(myFile. type)){  // 检 查 是 否 为 图 像 文件 
alert(" 请 确保 文件 为 图 像 类 型 "); 
return false; } 
Var myReader = new FileReader( ); 
myReader. readAsBinaryString(myFile); // 以 二 进 制 形式 读 取 图 像 文件 
myReader. onload = function(f){ 
var myImage = document. getElementById( "myImage" ); 
Var mySrc = "data:" + myFile. type + ";base64," + window. btoa(this. result); 
myImage. innerHTML = '< img src="'+mySrc +'"/>'} } 
</script ></head> 
<body><p><input type= "file" id= "myFile" style = "width: 250px"/> 
< input type= "button” value = "显示 图 像 ”onclick = "showImage()" style= "width: 120px" /></p> 
<div id= "myImage"></div> 
</body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , FileReader 对 象 的 
readAsBinaryString() 方 法 用 于 读 取 图 像 文 件 的 二 进 制 数据 ; btoa() 方 法 用 于 将 一 个 字符 串 进行 
Base64 编码 处 理 ,该 方法 使 用 一 个 参数 ,参数 值 是 一 串 由 二 进 制 数据 组 成 的 Unicode 字符 串 .返回 值 
即 是 编码 后 的 Base64 格式 的 字符 串 。 然 后 只 需 将 页 面 上 img 元 素 的 src 属性 值 指定 为 “data:” 十 用 
户 选择 图 像 文件 的 type 属性 值 十 “; base64.” 十 编码 后 的 Base64 格式 的 字符 串 即 可 。 

此 实例 的 源 文件 名 是 myHtmlA087. html。 
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090 “从 本 地 计算 机 中 选择 图 像 文件 并 全 屏 显 示 


此 实例 主要 使 用 readAsBinaryString() 方 法 和 requestFullscreen() 方 法 以 二 进 制 形式 读 取 本 地 
计算 机 中 保存 的 图 像 文件 并 在 屏幕 上 全 屏 显 示 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 , 单 击 
“选择 文件 ”按钮 ,在 弹出 的 “打开 ”对 话 框 中 选择 一 个 图 像 文件 ,例如 al06.jpg, 如 图 090-1 所 示 , 单 击 
“打开 (O) ”按钮 返回 页 面 ,该 图 像 将 以 原始 大 小 显示 在 页 面 中 ; 单 击 “ 全 屏 显 示 ” 按 钮 ,将 在 屏幕 上 全 
屏 显 示 该 图 像 ,如 图 090-2 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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<! doctype html >< html >< head >< meta charset = UIF -8> 
<script src = "js/jquery - 3.1.1.min. js"></script>< script language = "javascript"> 
function showImage() { // 当 从 本 地 计算 机 中 选择 文件 以 后 显示 图 像 
var myFile = document.getElementById("myFile").files[0]; 
if(!/image\/\w+ /.test(myFile. type)){ // 检 查 是 否 为 图 像 文件 
alert(" 请 确保 文件 为 图 像 类 型 "); 
return false; } 
Var myReader = new FileReader( ); 
myReader. readAsBinaryString(myFile); // 以 二 进 制 形式 读 取 图 像 文件 
myReader. onload = function(f){ 
var myDiv = document. getElementById( "myDiv"); 
var mySrc = "data:" + myFile. type + ";base64," + window. btoa(this. result); 
myDiv. innerHTML = '< img id = "myImage" src="'+mySrc+'"/>'}} 


function fullScreen() { // 全 屏 显示 
myImage = document. getElementById( "myImage" ); 
// 将 myImage 设 为 全 屏 状 态 


myImage. requestFullscreen = myImage. requestFullscreen || 
myImage. mozRequestFullscreen || myImage. mozRequestFullScreen || 
myImage. webkitRequestFullscreen; 
myImage. requestFullscreen( ); } 
</script ></head> 
<body><p> 
<input type = "file" id= "myFile" style= "width:263px" onchange = "showImage()"/> 
< input type = "button” value = "全 屏 显 示 " onclick = "fullScreen()" style= "width: 120px"/></p> 
<div id= "myDiv"></div> 
</body></html> 
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上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , FileReader 对 象 的 
readAsBinaryString() 方 法 用 于 读 取 图 像 文件 的 二 进 制 数据 ,文件 一 旦 开始 读 取 ,无 论 成 功 或 失败 , 实 
例 的 result 属性 都 会 被 填充 。 如 果 读 取 失 败 , 则 result 值 为 null, 否 则 即 是 读 取 文 件 的 数据 , 绝 大 多 数 
的 程序 都 会 在 成 功 读 取 文件 的 时 候 抓 取 这 个 值 。<img > 元 素 的 RequestFullScreen( 谷 歌 的 Chrome 浏 
览 器 是 webkitRequestFullScreen) 属 性 值 用 于 判断 浏览 器 是 否 支 持 FullScreen API, 如 果 支 持 , 则 可 
以 直接 调用 该 元 素 的 requestFullScreen() 方 法 实现 将 <img > 元 素 设 置 为 全 屏 显 示 状 态 。 

此 实例 的 源 文件 名 是 myHtmlA106. html。 


091 将 本 地 图 像 文件 或 文本 文件 拖 放 到 网 页 中 


此 实例 主要 通过 解析 dataTransfer 对 象 的 文件 信息 将 本 地 图 像 文件 或 文本 文件 拖 放 到 网 页 中 显 
示 。 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,使 用 鼠标 从 本 地 计算 机 中 拖 动 一 个 图 像 文 件 到 网 页 
中 ,如 图 091-1 所 示 ; 然后 释放 鼠标 ,该 图 像 文件 将 显示 在 网 页 中 ,如 图 091-2 所 示 。 有 关 此 实例 的 主 
要 代码 如 下 。 
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<!doctype html ><html >< head > <meta charset= UTF 一 8> 
< script src = "js/jquery - 3.1.1.min. js"></script>< script language = "javascript"> 
function init() { 
var myTarget = document. getElementById( "myTarget"); 
myTarget. addEventListener("dragover"，function(myEvent) { V/ 拖 放 文 件 滑 过 应 用 
myEvent. stopPropagat ion( ); 
myEvent. preventDefault(); 
}, false); 
myTarget. addEventListener("dragend", function(myEvent) { // 拖 放 文 件 结束 
myEvent. stopPropagation(); 
myEvent. preventDefault(); }, false); 
// 拖 放 文件 结束 ,并 释放 鼠标 
myTarget. addEventListener("drop", function(myEvent) { 
myEvent. stopPropagation(); 
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myEvent. preventDefault( ); 
var myFile = myEvent. dataTransfer. files[0]; 
var myReader = new FileReader( ); 
if(/image\/\w+ /.test(myFile. type) ){ 
myReader. readAsDataURL(myFile); 
myReader. onload = function(myEvent) { 
myTarget. style. background = 
"url('+ myEvent. target. result +') no - repeat center'; 
myTarget. innerHTML = ""; 
};} else if (myFile. type. substr(0, 4) == "text") { 
myReader. readAsText (myFile); 
myReader. onload = function(f) { 
$ ("#myTarget"). text(this. result); 
}}else{ 
myTarget. innerHTML = "和 暂 不 支持 此 类 文件 的 预览 ”; 
myTarget. style. background = "white"; 
}},false); } 
// 设 置 页 面 属性 ,不 执行 默认 处 理 (拒绝 被 拖 放 ) 
document. ondragover = function(myEvent) { 
myEvent. preventDefault(); }; 
document. ondrop = function(myEvent) { 
myEvent. preventDefault( ); } 
window. onload = init; 
</script ></head> 
<body>< div id = "myTarget" style="border: 1px solid #CCC; width: 350px;height: 200px; "> 文件 预览 区 ， 
仅 限 从 本 地 电脑 拖 动 图 像 文件 或 文本 文件 到 此 显示 </div> 
</body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,dataTransfer. files 表示 在 进行 拖 放 
操作 时 传递 的 文件 对 象 。 该 文件 对 象 可 以 使 用 FileReader 对 象 的 成 员 方 法 进行 解析 。FileReader 对 
象 的 readAsDataURL() 方 法 用 于 将 文件 解析 为 DataURL, 即 一 段 以 data: 开 头 的 字符 串 ,DataURL 
是 一 种 将 小 文件 直接 嵌入 文档 的 方案 ,这 里 的 小 文件 通常 是 指 图 像 与 html 等 格式 的 文件 。 
FileReader 对 象 的 readAsText() 用 于 将 文件 解析 为 纯 文 本 ,该 方法 有 两 个 参数 ,其 中 第 二 个 参数 是 文 
本 的 编码 方式 ,默认 值 为 UTF-8。 这 个 方法 非常 容易 理解 , 它 将 文件 以 文本 方式 读 取 , 读 取 的 结果 即 
是 这 个 文本 文件 的 内 容 。FileReader 对 象 的 readAsBinaryString( ) 方 法 用 于 将 文件 读 取 为 二 进 制 字 
符 串 ,通常 将 它 传送 到 后 台 , 后 台 可 以 通过 这 段 字 符 串 存储 为 文件 。 

此 实例 的 源 文件 名 是 myHtmlA103. html。 


092 ”通过 超 链接 的 download 属性 下 载 图 片 


此 实例 主要 通过 设置 超 链接 的 download 属性 实现 单 击 超 链接 (图 片 ) 即 可 下 载 该 图 片 的 功能 。 当 在 
浏览 器 中 显示 该 页 面 时 , 单 击 图 片 将 立即 下 载 此 图 片 , 如 图 092-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 





<! doctype html >< html >< head >< meta charset = UTF - 8></head> 
<body>< figure><a href ="#" download= "img/a027. jpg">< img src= "img/a027. jpg" width = "350" height 
= "200"/></a><figcaption> 单 击 此 图 片 即 可 实现 下 载 </figcaption></figure></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , 超 链接 a 标签 的 download 属性 是 
HTML5 新 增 的 属性 。download 属性 是 HTML5 规范 的 一 部 分 , 它 表 现 为 一 个 下 载 链接 ,而 不 是 一 
个 导航 的 链接 。download 属性 也 允许 重 命名 一 个 需要 下 载 的 文件 ,例如 一 个 文件 存放 在 服务 器 上 ， 
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图 092-1 


如 果 这 个 文件 是 自动 生成 的 ,一 般 来 说 它 被 都 命名 为 一 个 系统 的 数字 和 破 折 号 的 组 合 ,如 acme-doc- 
2. 0. 1. txt, 可 以 重 命名 这 个 下 载 文件 的 名 字 ,用户 下 载 后 看 到 的 文件 名 可 以 是 一 个 比较 好 的 名 字 , 如 
Acme Documentation (ver，2.0.1). txt, 以 增强 用 户 体 验 。 

此 实例 的 源 文 件 名 是 myHtmlA027. html。 


093 ”定制 个 性 化 的 虚线 作为 图 像 的 边框 线 


此 实例 主要 通过 使 用 setLineDash() 方 法 产生 断 点 效果 ,从 而 定制 个 性 化 的 虚线 作为 图 像 的 边框 
线 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 , 单 击 “ 无 边框 图 像 * 按 钮 , 则 显示 的 图 像 没有 边框 
线 ; 单 击 “ 虚 线 边框 图 像 " 按 钮 , 则 在 图 像 的 周围 将 显示 定制 的 虚线 边框 ,如 图 093-1 所 示 。 有 关 此 实 
例 的 主要 代码 如 下 。 
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图 093-1 


<! doctype html >< html >< head ><meta charset = "UTF - 8"> 
<script src = "js/jquery- 3.1.1.min. js"></script>< script type = "text/javascript"> 
$ (function() { 
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边框 线 则 水 了 


var context =$ ("#canvas")[0].getContext("2d"); 
$ ("#myBtnBorder"). click( function( ){ // 虚 线 边框 图 像 
context. drawImage( $ ("img")[0], 18, 18, 400, 250); 
context. setLineDash([1,12,23]); 
context. strokeStyle = "blue"; context. lineWidth= 5; 
context. moveTo(14, 14); context. lineTo(423, 14); 
context. lineTo( 423, 272); context. lineTo(14, 272); 
context. lineTo(14, 14); context. stroke(); 
DD); 
$ ("#myBtnDefault"). click(function() { // 无 边框 图 像 
context. clearRect(0, 0, 430, 280); 
context. drawImage( $ ("img")[0], 18, 18, 400, 250); });}); 
</script > 
<style type= "text/css"> 
img { width: 400px; height: 250px; display: none;} 
button{ width:203px; } 
</style></head> 
<body>< div align = "center"> 
<p><button id= "myBtnBorder"> 虚 线 边 框图 像 </button > 
<button id= "myBtnDefault"> 无 边框 图 像 </button ></p> 


< img src = "img/A126. jpg"/><canvas id= "canvas" width= "440" height = "280"></canvas></div></body> 


</html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,setLineDash([1,12,23]) 方 法 用 于 设 
置 当前 Line 的 缓冲 效果 , 即 产生 断 点 效果 ,该 方法 的 参数 是 一 个 数字 或 由 一 段 数字 组 成 的 数组 。 


此 实例 的 源 文件 名 是 myHtmlA126. html。 


094 以 拖 动 图 像 边框 线 的 方式 实现 图 像 缩放 


此 实例 主要 通过 使 用 jquery-ui. min. js 和 jquery-ui. min. css 中 的 resizable( ) 方 法 以 拖 动 图 像 边 
框 线 的 方式 放大 或 缩小 图 像 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,使 用 鼠标 拖 动 图 像 的 右 








FF 放 大 图 像 , 如 图 094-1 所 示 ; 使 用 鼠标 拖 动 图 像 的 下 边框 线 则 垂直 放大 图 像 , 如 图 094-2 


所 示 ; 在 右 下 角 使 用 鼠标 拖 动 图 像 , 则 同时 在 水 平方 向 和 垂直 方向 上 放大 (或 缩小 ) 图 像 。 有 关 此 实例 
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E 要 代码 如 下 。 
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<!doctype html ><html >< head >< meta charset = "UTF — 8"> 
<script src= "js/jquery -3.1.1.min.js"></script> 
<script src= "js/jquery - ui.min. js"></script > 
< script type = "text/javascript"> 


$ (function() { // 拖 放 图 像 的 边框 线 改变 图 像 的 大 小 
$ (".myImage"). resizable( {containment: $ (".myContainer"),animate:true }); 
DD); 
</script > 


<link rel = "stylesheet" href = "css/jquery — ui.min.css">< style type = "text/css"> 
.myContainer { width: 100% ; height: 1500px;} 
.myImage { width: 150px; height: 150px;background: url("img/A129. jpg"); 
background — size: 100% 100%; border - radius: 5px; } 
</style></head> 
<body >< div class = "myContainer" align= "center"> 
<div class= "myImage"></div></div></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , $ (". myImage")，resizable 
({containment: $(". myContainer" ) ,animate:true }) 用 于 以 动画 的 形式 缩放 图 像 。resizable() 方 法 
常用 的 参数 如 下 。 

(1) alsoResize:false: 类 型 为 string ,可 以 伴随 缩放 的 元 素 , 如 果 要 在 $("# win") 缩 放 的 同时 "# 
win-1" 也 进行 缩放 , 则 可 以 传 "# win-1"。 

(2) animate:false: 类 型 为 boolean, 缩 放 是 否 带 动画 效果 ,默认 为 false。 

(3) delay:null: 类 型 为 number ,缩放 延迟 。 

(4) animateDuration: "slow": 类 型 为 string ,鼠标 松 开 时 缩放 的 动画 效果 。 

(5) animateEasing:"swing": 类 型 为 string. 鼠 标 拖 动 时 的 效果 。 

(6) aspectRatio:false: 类 型 为 number ,缩放 比例 ,可 以 形 如 16/9 传 参数 ,默认 为 false。 

(7) autoHide: false: 类 型 为 boolean, 是 否 隐 藏 右 下 角 的 缩放 块 ,true 为 隐藏 ,在 缩放 的 时 候 
显示 。 

(8) containment:false: 类 型 为 string, 限 制 缩放 的 范围 ,例如 传 "# win-area", 则 只 能 在 id 为 
'win-area' 的 元 素 里 缩放 ,默认 为 false。 

(9) ghost:false: 类 型 为 boolean, 阴 影 缩放 , 待 松 开 鼠 标 时 才 缩 放 到 阴影 大 小 的 位 置 。 

(10) grid:false: 类 型 为 number ,缩放 单位 .例如 grid:50. 默 认为 false。 

(11) handles:"e,s,se": 类 型 为 string ,缩放 时 的 方向 ,默认 为 'e,s,se', 即 可 以 向 东 、 南 、 东 南 3 个 
方向 缩放 ,可 以 改 为 'n,e,s,w.se,sw,ne,nw'. 即 向 各 个 方向 都 可 以 缩放 。 

(12) helper: false: 类 型 为 string, 缩 放 边 框 样式 ,例如 helper: "uirresizable-helper" ,默认 为 


(13) maxHeight:null: 类 型 为 number, 缩 放 时 的 最 大 高 度 , 默 认为 null。 
(14) maxWidth:null: 类 型 为 number ,缩放 时 的 最 大 宽度 ,默认 为 null。 
(15) minHeight:10: 类 型 为 number, 缩 放 时 的 最 小 高 度 ,默认 为 10。 
(16) minWidth:10: 类 型 为 number, 缩 放 时 的 最 小 宽度 .默认 为 10。 
(17) zIndex:IE3: 类 型 为 number, 缩 放 时 的 最 大 高 度 . 默 认为 null。 
需要 说 明 的 是 ,在 使 用 resizable() 方 法 缩放 图 像 前 必须 添加 jquery-ui. min. js 和 jquery-ui. min. 
css 两 个 文件 。 
此 实例 的 源 文件 名 是 myHtmlA129. html。 
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095 ”以 拖 动 方式 将 图 像 移动 到 页 面 中 的 任意 位 置 


此 实例 主要 使 用 jquery-ui. min. js 和 jquery-ui. min. css 中 的 draggable() 方 法 ,从 而 实现 拖 动 图 
像 即 可 移动 图 像 到 页 面 中 的 任意 位 置 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,小 兔子 位 于 页 
面 的 左上 角 , 如 图 095-1 所 示 ; 使 用 鼠标 拖 动 小 兔子 到 页 面 中 的 任意 位 置 ,例如 右 下 角 , 松 开 鼠 标 之 后 
小 兔子 停留 在 右 下 角 , 如 图 095-2 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<script src= "js/jquery -3.1.1.min. js"></script > 
<script src= "js/jquery - ui. min. js"></script >< script type = "text/javascript"> 
$ (function( ){ // 拖 动 图 像 可 移动 图 像 到 页 面 中 的 任意 位 置 
$ (".myImage"). draggable( {containment: $ (".myContainer"),cursor: "move"});}); 
</script > 
<link rel = "stylesheet" href = "css/jquery ~ ui.min. css">< style type = "text/css"> 
.myContainer { width: 100% ; height: 1500px;} 
.myImage {width: 80px;height: 80px;background: url("img/A130. png"); 
background— size: 100% 100%;} 
</style></head> 
<body>< div class = "myContainer" align = "center"> 
<divclass= "myImage"></div></div></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , $ (". myImage")，draggable 
({containment: $(". myContainer") ,cursor: "move")) 用 于 实现 拖 动 图 像 到 页 面 中 的 任意 位 置 。 除 
此 之 外 ,draggable() 方 法 还 支持 当 移动 到 视 区 外 时 自动 滚动 文档 , 它 通过 设置 scroll 选项 为 true 来 启 
用 自动 滚动 , 当 滚 动 触 发 时 进行 微调 ,滚动 速度 是 通过 scrollSensitivity 和 scrollSpeed 选项 设置 的 , 例 
如 $(".myImage " ). draggable({ scroll: true, scrollSensitivity: 100 })。 

需要 说 明 的 是 ,在 使 用 draggable() 方 法 时 必须 添加 jquery-ui. min. js 和 jquery-ui. min. css 两 个 
文件 。 

此 实例 的 源 文件 名 是 myHtmlA130. html。 


096 ”以 拖 遇 方式 自动 调整 九宫 格 中 的 图 像 


此 实例 主要 使 用 jquery-ui. min. js 和 jquery-ui. min. css 中 的 sortable() 方 法 ,从 而 实现 以 拖 电 的 
方式 将 九宫 格 中 的 字母 图 像 拖 中 到 新 的 位 置 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,默认 的 
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字母 图 像 顺序 如 图 096-1 所 示 ; 使 用 鼠标 拖 动 *A” 到 “C” 和 “1” 之 间 , 如 图 096-2 所 示 , 然 后 松 开 鼠 标 ， 
则 “A” 就 会 被 插入 *C” 和 ”1” 之 间 。 有 关 此 实例 的 主要 代码 如 下 。 


本 -0o 
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<!doctype html ><html >< head >< meta charset = "UTF — 8"> 

<script src= "js/jquery - 3.1.1.min. js"></script > 

<script src= "js/jquery - ui.min. js"></script >< script type = "text/javascript"> 
$ (function() { // 以 拖 生 的 方式 将 图 像 插 入 九宫 格 的 指定 位 置 

$ ("#sortable"). sortable(); 
$(" 间 sortable").disableSelection(); // 禁 用 选择 匹配 的 元 素 集合 内 的 文本 内 容 

DD); 

</script> 

<link rel = "stylesheet" href = "css/jquery ~ ui.min.css"><style type = "text/css"> 
/* 设 置 盒子 的 基本 样式 * / 
. myContainer { width: 100% ; height: 1500px; } 
/* 设 置 无 序列 表 的 基本 样式 * / 
#sortable { list- style - type: none; margin: 0; padding: 0; width: 455px; } 
/* 设 置 列 表 项 的 基本 样式 * / 
# sortable li { margin: 0; padding: 0; width: 150px; height: 150px;float: left; } 
/* 设 置 列表 项 图 像 的 基本 样式 * / 
li img { - webkit ~ transition: 0.3s ease— out; 

width:150px; height:150px;border:1px solid black; } 
</style></head> 
<body>< div class = "myContainer" align= "center"> 

<ul id="sortable"> 
<1i >< img src="img/Al32A.jpg"></li><1i>< img src="img/Al32B. jpg"></1i> 
<1i>< img src="img/Al32C. jpg"></li><1i>< img src="img/A132D. jpg"></1i> 
<1i>< img src="img/Al32E. jpg"></1i><1i>< img src="img/Al32F. jpg"></li> 
<1i >< img src= "img/A132G.jpg"></1i><1i>< img src="img/Al32H.jpg"></li> 
<1i>< img src= "inmg/AL32I.jpg"></1i></ul></div></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,$$ ("# sortable"). sortable() 用 于 实 
现 以 拖 中 的 方式 将 字母 图 像 移动 到 九宫 格 的 指定 位 置 。sortable() 方 法 是 jQuery UI 的 可 排序 小 部 件 
(Sortable Widget) 的 方法 ,在 任意 的 DOM 元 素 上 启用 sortable 功能 ,通过 鼠标 单 击 并 拖 忠 元素 到 列 
表 中 的 一 个 新 的 位 置 ,其 他 条 目 就 会 自动 调整 。 在 默认 情况 下 .sortable 的 各 个 条 上 日 共享 draggable 属 
性 。 在 此 九宫 格 中 ,除了 sortable () 方 法 以 外 .还 需要 控制 width: 455px、 width: 150px、 height: 
150px float: left 等 属性 。 在 CSS 中 ,float 属性 用 于 定义 元 素 在 哪个 方向 浮动 。 浮 动 元 素 会 生成 一 
个 块 级 框 ,而 不 论 它 本 身 是 何 种 元 素 。 如 果 浮 动 非 替 换 元 素 , 则 要 指定 一 个 明确 的 宽度 ,否则 它们 会 
尽 可 能 地 窗 。 假 如 在 一 行 之 上 只 有 极 少 的 空间 可 供 浮动 元 素 ,那么 这 个 元 素 会 跳 至 下 一 行 ,这 个 过 程 
会 持续 到 某 一 行 拥有 足够 的 空间 为 止 。 需 要 说 明 的 是 ,在 使 用 sortable() 方 法 实现 拖 动 排序 前 必须 添 
加 jquery-ui. min. js 和 jquery-ui. min. css 两 个 文件 。 

此 实例 的 源 文件 名 是 myHtmlA132. html。 


097 以 固定 长 宽 比 例 使 用 鼠标 拖 电 缩放 图 像 


此 实例 主要 在 jquery-ui. min. js 和 jquery-ui. min. css 的 resizable() 方 法 中 传递 参数 aspectRatio， 
从 而 实现 拖 放 图 像 的 边框 线 并 且 以 固定 的 长 宽 比 例 改变 图 像 的 大 小 。 当 在 Google Chrome 浏览 器 中 
显示 该 页 面 时 ,图 像 显示 为 正方 形 ,使 用 鼠标 拖 动 图 像 的 下 边框 线 或 右边 框 线 , 则 图 像 在 缩放 的 过 程 
中 长 宽 比 始终 保持 为 2 : 1, 如 图 097-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 097-1 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<script src= "js/jquery -3.1.1.min.js"></script > 
<script src= "js/jquery - ui. min. js"></script >< script type = "text/javascript"> 


$ (function() { // 拖 放 图 像 的 边框 线 并 且 以 固定 的 长 宽 比例 (2 : 1) 改 变 图 像 的 大 小 
$ (".myImage"). resizable( {aspectRatio: 2/1}); }); 
</script > 


<link rel = "stylesheet" href = "css/jquery — ui.min.css">< style type = "text/css"> 
.myContainer { width: 100% ; height: 1500px; } 
.myImage {width: 150px; height: 150px;background: url("img/A136. jpg"); 
background— size: 100% 100%; border - radius: 5px;} 
</style></head> 
<body >< div class = "myContainer" align= "center"> 
<div class= "myImage"></div></div></body ></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , $ (". mylmage"). resizable 


(faspectRatio: 2/1}) 用 于 拖 放 图 像 的 边框 线 并 且 以 固定 的 长 宽 比 例 (2 : 1) 改 变 图 像 的 大 小 。 
resizable() 方 法 是 可 调整 尺寸 小 部 件 (Resizable Widget) 的 方法 ,因此 在 使 用 resizable( ) 方 法 缩放 图 
像 之 前 必须 添加 jquery-ui. min. js 和 jquery-ui. min. css 两 个 文件 。 


此 实例 的 源 文件 名 是 myHtmlA136. html。 


098 ”在 拖 遇 缩放 图 像 时 限制 拖 遇 的 缩放 范围 


此 实例 主要 在 jquery-ui. min. js 和 jquery-ui. min. css 的 resizable ( ) 方法 中 传递 参数 


containment, 从 而 实现 在 拖 抱 缩放 图 像 时 限制 拖 遇 的 缩放 范围 。 当 在 Google Chrome 浏览 器 中 显示 
该 页 面 时 ,图 像 显 示 为 正方 形 , 使 用 鼠标 拖 动 图 像 的 下 边框 线 或 右边 框 线 即 可 改变 图 像 的 长 宽 尺寸 ， 
但 是 缩放 范围 始终 限制 在 青色 区 域 之 内 ,如 图 098-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 


<!doctype html >< html >< head >< meta charset = "UTF — 8"> 
<script src= "js/jquery - 3.1.1.min. js"></script > 
<script src= "js/jquery - ui. min. js"></script >< script type = "text/javascript"> 
$ (function() { // 限 制 #myImage 的 缩放 范围 只 能 在 并 myBox 中 
$ ("#myImage"). resizable( {containment: "#myBox" }); }); 
</script> 
<link rel = "stylesheet" href = "css/jquery — ui.min.css"> 
<style type= "text/css"> 
##myBox { width: 400px; height: 250px; background— color: cyan;} 
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#myImage { background - position: top left; width: 100px; height: 100px; 
background: url("img/A137. jpg");background— size: 100% 100%;} 
#myImage, #myBox { padding: 0. 5em; } 
</style></head> 
<body>< div id= "myBox" class = "ui- widget - content" align= "center"> 
<div id= "myImage" class= "ui- state — active"></div></div></body></htnl > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , $ (" # mylmage"). resizable 
(fcontainment:"#myBox")) 用 于 限制 #fmyImage 的 缩放 范围 只 能 在 并 myBox 中 。resizable( ) 方 法 
主要 用 于 使 用 鼠标 改变 元 素 的 尺寸 ,该 方法 是 可 调整 尺寸 小 部 件 (Resizable Widget) 的 方法 ,因此 在 
使 用 resizable( ) 方 法 缩放 图 像 之 前 必须 添加 jquery-ui. min. js 和 jquery-ui. min. css 两 个 文件 。 

此 实例 的 源 文 件 名 是 myHtmlA137. html。 
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图 098-1 


099 在 一 组 图 像 中 获取 使 用 鼠标 选择 的 图 像 


此 实例 主要 使 用 jquery-ui. min. js 和 jquery-ui. min. css 的 selectable() 方 法 ,从 而 实现 在 一 组 图 
像 中 获取 用 户 使 用 鼠标 选择 的 一 个 或 多 个 图 像 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,如 果 
使 用 鼠标 选择 第 1.2、3、5 几 个 图 像 , 则 这 些 图 像 的 边框 线 将 变 成 红色 ,并 在 下 面 显示 选择 结果 ,如 
图 099-1 所 示 。 当 然 , 所 有 图 像 都 可 以 任意 测试 。 有 关 此 实例 的 主要 代码 如 下 。 


<! doctype html >< html >< head >< meta charset = "UTF - 8"> 
< script src= "js/jquery — 3.1.1.min. js"></script> 
< script src= "js/jquery - ui. min. js"></script >< script type = "text/javascript"> 
$ (function() { // 获 取 多 重 选择 结果 
$ ("#myItems"). selectable({ 
stop: function() { 
var myResult = $ ("#myResult").empty(); 
$(".ui- selected", this).each(function () { 
var myIndex =$ ("#myItems 1i"). index(this); 
if(myIndex>= 0) 
myResult. append(" 图 " + (myIndex + 1 )); });} 1);}); 
</script> 
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<link rel = "stylesheet" href = "css/jquery- ui.min.css">< style type= "text/css"> 


* { margin: 0; padding: 0; } 

/* 设 置 盒子 的 基本 样式 * / 
.myContainer { margin: 20px 30px;} 
/* 设 置 无 序列 表 的 基本 样式 * / 


井 myItems { list - style— type: none; margin: 0; padding: 0; width: 350px;} 


/* 设 置 列 表 项 的 基本 样式 * / 


#myItems 1i { margin: 5px; padding: Opx; width: 100px; height: 100px;float: left;} 


/* 设 置 列表 项 图 像 的 基本 样式 */ 


1i img { width: 100px; height: 100px;border: Opx solid black;} 


/x 设置 已 经 选择 的 列表 项 基本 样式 x*/ 
#myItems .ui- selected { border: 1px solid red; } 
</style></head> 


<body >< div class = "myContainer" align= "center"><ul id = "myItems"> 


<1li class="ui- state ~ default">< img src = "img/A132A. 
<1li class = "ui- state— default">< img src = "img/R132B. 
<1li class="ui- state— default">< img src = "img/A132C. 
<1li class="ui- state— default">< img src = "img/A132D. 
<1li class="ui- state- default">< img src = "img/R132E. 
<1li class="ui- state— default">< img src = "img/Al32F. 
<1li class= "ui- state— default">< img src = "img/A132G. 
<1li class = "ui- state ~ default">< img src = "img/A132H. 
<1li class="ui- state— default">< img src = "img/A132I. 


jpg"></1i> 
jpg"></1i> 
jpg"></1i> 
jpg"></1i> 
jpg"></1i> 
jpg"></1i> 
jpg"></1i> 
jpg"></1i> 
jpg"></1i></ul> 


<p><span > 您 已 经 选择 了 : </span> < span id = "myResult"></span></p></div> 


</body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 寿 
选择 的 单个 元 素 或 一 组 元 素 ,参数 中 的 stop 表示 在 鼠标 停 





该 部 分 代码 中 ,selectable( ) 方 法 用 于 处 理 使 用 鼠标 
止 动作 后 执行 这 部 分 代码 。 需 要 说 明 的 是 ， 


selectable() 方 法 是 可 选择 小 部 件 (Selectable Widget) 的 方法 ,因此 在 使 用 selectable() 方 法 时 必须 添 


加 jquery-ui. min. js 和 jquery-ui. min. css 两 个 文件 。 
此 实例 的 源 文件 名 是 myHtmlA161. html。 
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图 099-1 
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100 在 移动 鼠标 时 反 色 显示 鼠标 指针 周围 的 图 像 


此 实例 主要 在 mousemove 事件 中 设置 反 色 滤 镜 的 CSS 样式 ,从 而 实现 在 鼠标 移动 时 反 色 显 示 鼠 
标 指针 周围 的 图 像 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,如 果 和 鼠标 指针 在 图 像 上 移动 , 则 将 
对 鼠标 指针 的 当前 位 置 附近 的 50X50 区 域 的 图 像 使 用 反 色 滤 镜 进行 反 色 特效 处 理 , 效 果 如 图 100-1 
所 示 。 有 关 此 实例 的 3 





要 代码 如 下 。 
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图 100-1 
<! doctype html >< html >< head >< meta charset = "UTF - 8"> 
< script src= "js/jquery- 3.1.1.min. js"></script >< script type = "text/javascript"> 
$ (function() { 
// 在 移动 鼠标 时 反 色 滤 镜 跟随 移动 
$ ("img").on("mousemove", function(e) { 
$(".myFilter").css("display", "block"); 
var x= e.offsetX+$ (this).offset(). left; 
var y= e.offsetY + $ (this). offset(). top; 
// 根 据 鼠 标 指针 的 位 置 配置 当前 的 反 色 滤 镜 
$(".myFilter").css("top", y+ "px"); 
$(".myFilter").css("left", x+ "px"); 
$(".myFilter").css("background — position", 
一 e.offsetX+ "px "+(—e.offsetY) + "px"); 
DD);}); 
</script > 
<style type= "text/css"> 
/* 设 置 反 色 滤 镜 的 基本 样式 * / 
-myFilter { position: absolute; width: 50px; height: 50px;display: none; 
— webkit - filter: invert(100% );background - image: url("img/B284. jpg");} 
</style></head> 


<body >< img src= "img/B284. jpg"/><div class = "myFilter"></div> 
</body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,-webkitfilter: invert(100%) 用 于 


F 对 
元 素 进行 完全 的 反 色 处 理 , 即 产生 图 像 的 底片 效果 。 用 户 可 以 根据 不 同 的 需要 调整 反 色 参数 的 取 值 ， 
范围 为 0~100%,100% 为 完全 反 色 。 


此 实例 的 源 文件 名 是 myHtmlAl84. html。 
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101 在 移动 鼠标 时 模糊 显示 鼠标 指针 周围 的 图 像 
此 实例 主要 在 mousemove 事件 中 设置 模糊 渡 镜 的 CSS 样式 .从 而 实现 在 鼠标 移动 时 清晰 地 显示 
鼠标 指针 范围 内 的 图 像 ,模糊 显示 鼠标 指针 周围 的 图 像 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 
时 , 整 幅 图 像 较为 模糊 ,如 果 鼠 标 指针 在 图 像 上 移动 , 则 将 对 鼠标 指针 的 当前 位 置 附近 的 50X 50 区 域 的 
图 像 使 用 模糊 度 为 0 的 滤 镜 进行 特效 清晰 处 理 ,效果 如 图 101-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 101-1 


<!doctype html ><html >< head >< meta charset = "UTF - 8"> 


<script src= "js/jquery -3.1.1.min. js"></script >< script type = "text/javascript"> 
$ (function() { 


$ ("img"). on( "mousemove", function(e) { // 在 移动 鼠标 时 模糊 滤 镜 跟随 移动 
$ (".myFilter").css("display", "block"); 
var x=€.offsetX+$ (this). offset(). left; 
var y= e.offsetY + $ (this). offset(). top; 
// 根 据 鼠 标 指针 的 位 置 配置 当前 的 模糊 滤 镜 
$ (".myFilter").css("top", y+ "px"); 
$(".myFilter").css("left", x+ "px"); 
$ (".myFilter").css("background— position", 
一 e.offsetX+ "px "+(-e.offsetY) + "px"); });}); 
</script> 
<style type= "text/css"> 
/* 设 置 模糊 度 为 0 的 模糊 滤 镜 的 基本 样式 */ 
.myFilter { position: absolute; width: 50px; height: 50px; display: none; 
background — image: url(" img/B284. jpg"); — webkit — filter: blur(0px); } 


/* 以 模糊 滤 镜 处 理 图 像 * / 
img { display: block; - webkit ~ filter: blur(Spx);} 
</style></head> 


<body>< img src = "img/B284. jpg"/><div class = "myFilter"></div></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,-webkitfilter: blur(5px) 用 于 对 元 


素 进 行 模糊 半径 为 5px 的 模糊 特效 处 理 ,blur 的 参数 值 越 大 .图 像 越 模糊 ; 参数 值 越 小 ,图 像 越 清晰 ， 
注意 不 能 为 负数 ,0px 即 是 原始 图 像 。 


此 实例 的 源 文件 名 是 myHtmlA185. html。 
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102 ”使 用 自 定义 方法 对 图 像 导 圆 角 


此 实例 主要 在 CanvasRenderingContext2D 对 象 上 添加 自 定义 方法 roundRect(), 从 而 实现 对 画 
布 上 的 图 像 导 圆 角 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 , 单 击 “直角 显示 图 像 " 按 钮 ,图 像 将 


以 默认 的 直角 效果 显示 ; 单 击 * 圆 角 显 示 图 像 " 按 钮 ,图 像 在 导 圆 角 之 后 的 显示 效果 如 图 102-1 所 示 。 
有 关 此 实例 的 主要 代码 如 下 。 





面 = oo x 
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图 102-1 


<! doctype html >< html >< head >< meta charset = "UTF - 8"> 
<script src= "js/jquery -3.1.1.min. js"></script>< script type = "text/javascript"> 
// 自 定义 对 图 像 进 行 圆 角 的 方法 
CanvasRenderingContext2D. prototype. roundRect = function(x, y, w, hy r) { 
var min size= Math. min(w, h); 
if (r>min size/2) r = min_size/2; 
this. beginPath( ); 
this. moveTo(x+r, y); 
this.arcTo(x+w y, x+w, y+h, r); 
this.arcTo(x+w, y+h, x, y+h, r); 
this.arcTo(x, y+ h, x, y, r); 
this.arcTo(x, y, xt+tw, y, r); 
this. closePath( ); 
return this; } 
$ (function( ){ 
var myContext =$ ("#myCanvas")[0].getContext("2d"); 
var image = new Image(); 
image. src = "img/A128. jpg"; 
$ ("#myBtnRadius"). click( function(){ 
myContext. clearRect(0, 0, 400,250); 
image. onload = function() { 


// 圆 角 显 示 图 像 


var pattern = myContext. createPattern(this, "no— repeat"); 
myContext. roundRect(0, 0, this.width, this. height, 20 || 0); 
myContext. fillStyle = pattern; 

myContext.fill(); }; 

image. onload( ); }); 
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$ (" 井 myBtnDefault") .click(function(){ // 直 角 显 示 图 像 
myContext. clearRect(0, 0, 400,250); 
myContext. drawImage( image, 0,0, 400,250) ; });}); 

</script > 

<style type= "text/css"> 

button{ width:195px; } 
</style></head> 
<body>< div align = "center"> 

<p><button id= "myBtnRadius"> 圆 角 显 示 图 像 </button > 
<button id= "myBtnDefault"> 直 角 显 示 图 像 </button></p> 

<canvas id= "myCanvas" width= "400" height = "250"></canvas ></div></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , CanvasRenderingContext2D. 
prototype. roundRect 是 自 定义 的 圆 角 方法 。 在 HTML5 中 .CanvasRenderingContext2D 对 象 提供 了 
一 组 用 来 在 画布 上 绘制 的 图 形 方法 ,例如 可 以 使 用 该 对 象 的 strokeRect() 和 fillRect() 绘 制 矩形 的 边 
框 和 填充 矩形 ,也 可 以 使 用 clearRect() 清 除 矩 形 所 定义 的 区 域 ,此 外 ,还 可 以 使 用 该 对 象 的 prototype 
属性 添加 自 定义 方法 和 属性 。 通 过 prototype 属性 添加 自 定义 的 方法 与 普通 的 自 定义 方法 基本 一 致 ， 
只 需要 在 prototype 属性 后 面 指定 一 个 自 定义 方法 名 称 和 对 应 的 执行 代码 即 可 。 

此 实例 的 源 文 件 名 是 myHtmlA128. html。 


103 ”将 普通 图 像 的 4 个 直角 改变 为 4 个 圆 角 
此 实例 主要 在 CSS 样式 中 设置 border-radius 属性 ,从 而 实现 将 普通 图 像 的 4 个 直角 改变 为 4 个 


圆 角 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 , 单 击 “对 图 像 进 行 圆 角 ” 按 钮 . 则 图 像 经 过 圆 角 处 
理 之 后 的 效果 如 图 103-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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对 图 像 运行 国 角 











图 103-1 
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<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<script src= "js/jquery - 3.1.1.min. js"></script >< script language = "javascript"> 
$ (document). ready(function() { 
$ ("#myBtnRadius"). click(function() { // 对 图 像 进行 圆 角 
$ ("img").css("border - top— left — radius", "50px"); 
$ ("img").css("border — top— right — radius", "50px" ); 
$ ("img").css("border - bottom - right - radius", "50px"); 
$ ("img").css("border - bottom- left- radius","50px"); });}); 
</script> 
< style type= "text/css"> 
img { margin: 20px;} 
</style></head> 
<body >< input type = "button" value = "对 图 像 进 行 圆 角 ”id = "myBtnRadius" style = "margin - left: 20px; 
width:390px;"/> 
<div>< img src = "img/B002. jpg"/></div ></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , $ ("img"). css("border-top-left 
radius","50px") 用 于 设置 图 像 左 上 和 角 的 圆 角 半径 为 50px, 其 余 以 此 类 推 。border-radius 属性 是 一 个 
简写 属性 ,用 于 设置 元 素 的 4 个 border- * -radius 属性 ,例如 borderradius:60px 表示 设置 图 像 左 上 
角 、 右 上 角 、 右 下 角 和 左下 角 的 圆 角 半径 都 为 60px。 如 果 省 略 bottom-left, 则 与 top-right 相同 ; 如 果 
省 略 bottom-right, 则 与 top-left 相同 ; 如 果 省 略 top-right, 则 与 top-left 相同 。 

此 实例 的 源 文件 名 是 myHtmlB002. html。 


104 ”对 圆 角 图 像 添加 可 定制 模糊 效果 的 阴影 


此 实例 主要 在 CSS 样式 中 设置 box-shadow 属性 ,从 而 实现 在 圆 角 图 像 上 定制 具有 模糊 效果 的 阴 
影 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 , 单 击 "为 图 像 添加 阴影 "按钮 , 圆 角 图 像 添 加 阴影 之 
后 的 效果 如 图 104-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 104-1 


<!doctype html >< html >< head ><meta charset = "UTF — 8"> 
<script src= "js/jquery — 3.1.1.min. js"></script >< script language = "javascript"> 
$ (document). ready(function() { 
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$ ("#myBtnShadow"). click(function() { // 为 图 像 添 加 阴影 
$ ("img").css("box— shadow","10px 10px 5px gray"); });}); 
</script ></head> 


<body >< input type= "button" value = "为 图 像 添 加 阴影 " id = "myBtnShadow" style = "margin - left: 10px; 
width:390px;"/> 

<div>< img src = "img/B004. jpg" style= "margin: 10px;border— radius:20px;"/></div> 

</body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , $ ("img"). css("box-shadow"。 
"10px 10px 5px gray") 用 于 设置 圆 角 图 像 的 阴影 为 灰色 , 它 与 $ ("img"). css("box-shadow","10px 
10px 5px #888888") 实 现 的 功能 类 似 。box-shadow 的 语法 说 明 如 下 。 


box - shadow: inset x— offset y— offset blur— radius spread— radius color 


box-shadow 属性 最 多 有 6 个 参数 设置 ,说 明 如 下 。 

(1) 阴影 类 型 : 此 参数 是 一 个 可 选 值 ,如 果 不 设置 ,其 默认 的 投影 方式 是 外 阴影 ; 如 果 取 其 唯一 
值 “inset” ,就 是 将 外 阴影 变 成 内 阴影 ,也 就 是 说 设置 阴影 类 型 为 “inset” 时 其 投影 就 是 内 阴影 。 

(2) x-offset: 此 参数 是 指 阴影 的 水 平 偏 移 量 .其 值 可 以 是 正 、 负 值 , 如 果 为 正 值 , 则 阴影 在 对 象 的 
右边 ,反之 其 为 负 值 时 阴影 在 对 象 的 左边 。 

(3) y-offset: 此 参数 是 指 阴影 的 垂直 偏 移 量 , 其 值 也 可 以 是 正 ` 负 值 , 如 果 为 正 值 ,阴影 在 对 象 的 
底部 ,反之 其 值 为 负 值 时 阴影 在 对 象 的 顶部 。 

(4) 阴影 模糊 半径 : 此 参数 可 选 ,但 其 值 只 能 是 正 值 ,如果 其 值 为 0, 表 示 阴 影 不 具有 模糊 效果 ,其 
值 越 大 阴影 的 边缘 越 模糊 。 

(5) 阴影 扩展 半径 : 此 参数 可 选 , 其 值 可 以 是 正 、 负 值 ,如 果 为 正 值 , 则 整个 阴影 都 延展 扩大 ,反之 
为 负 值 , 则 缩小 。 

(6) 阴影 颜色 : 此 参数 可 选 , 如 果 不 设 定 任何 颜色 ,浏览 器 会 取 默 认 色 ,但 各 浏览 器 的 默认 颜色 不 
一 样 ,建议 用 户 不 要 省 略 此 参数 。 

此 实例 的 源 文件 名 是 myHtmlB004. html。 


105 在 圆 角 图 像 外 围 添 加 扩散 型 的 阴影 


此 实例 主要 在 CSS 样式 中 将 box-shadow 属性 的 x-offset 和 yoffset 设置 为 0, 仅 设置 模糊 半径 
blurradius 和 扩散 颜色 color, 从 而 实现 在 圆 角 图 像 的 外 围 添加 扩散 型 的 模糊 阴影 。 当 在 Google 
Chrome 浏览 器 中 显示 该 页 面 时 , 单 击 * 在 图 像 的 外 围 添加 扩散 型 的 阴影 ”按钮 ,将 在 圆 角 图 像 的 外 围 
添加 绿色 的 模糊 阴影 ,效果 如 图 105-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 





<!doctype html >< html >< head>< meta charset = "UTF - 8"> 
<script src= "js/jquery - 3.1.1.min. js"></script >< script language = "javascript"> 
$ (document). ready(function() { 
$ ("#myBtnShadow"). click( function() { // 在 图 像 的 外 围 添 加 扩散 型 的 阴影 
$ ("img").css("box— shadow"，"0px 0px 30px green" ) 7 
1D);}); 
</script ></head> 
<body>< input type = "button” value = "在 图 像 的 外 围 添 加 扩散 型 的 阴影 ”id = "myBtnShadow" style = "margin 
— left: 10px;width: 390px;"/> < div > < img src = " img/B004. jpg" style = "margin: 10px; border - radius: 
20px;"/></div ></body ></html > 


从 HTML5+CSS3 炫 酷 应 用 实例 集锦 
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图 105-1 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , $ ("img"). css("box-shadow"， 
"0px 0px 30px green") 用 于 设置 圆 角 图 像 的 扩散 颜色 为 绿色 、 模 糊 半径 为 30px。box-shadow 的 语法 
格式 如 下 。 


box - shadow: inset x- offset y— offset blur- radius spread— radius color 


在 设置 box-shadow 属性 值 时 ,如 果 x-offset 和 y-offset 的 值 为 0, 则 将 在 盒子 的 周围 绘制 阴影 , 即 
该 实例 所 示 的 效果 。 用 户 也 可 以 将 阴影 离开 盒子 的 横向 ( 偏 移 量 ) 距 离 x-offset 或 阴影 离开 盒子 的 纵 
向 距离 y-offset 设 定 为 负数 ,如 果 将 阴影 离开 盒子 的 横向 距离 x-offset 设 定 为 负数 , 则 向 左 绘制 阴影 ; 
如 果 将 阴影 离开 盒子 的 纵向 距离 y-offset 设 定 为 负数 , 则 向 上 绘制 阴影 。 

此 实例 的 源 文件 名 是 myHtmlB044. html。 


106 在 圆 角 图 像 四 周 添加 扩散 的 内 置 阴影 


此 实例 主要 在 CSS 样式 中 设置 box-shadow 属性 的 inset 和 模糊 半径 blurradius、 阴 影 颜 色 
color, 从 而 实现 在 圆 角 图 像 的 内 部 添加 扩散 型 的 模糊 阴影 。 当 在 Google Chrome 浏览 器 中 显示 该 页 
面 时 , 单 击 “ 在 图 像 的 四 周 添加 扩散 型 的 内 置 阴影 按钮 , 则 将 在 圆 角 图 像 的 四 周 添加 向 内 扩散 的 绿色 
的 模糊 阴影 ,效果 如 图 106-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<script src= "js/jquery - 3.1.1.min. js"></script >< script language = "javascript"> 
$ (document). ready(function() { 
$ ("#myBtnShadow"). click( function() { // 在 图 像 的 四 周 添加 扩散 型 的 内 置 阴影 
$ ("div").css("box— shadow", "0px Opx 150px rgba(45,255,98,0.8) inset");});}); 
</script> 
<style> 
div {width: 390px; height: 250px; margin: 10px; border — radius: 20px; 
background - image: url(img/B004. jpg) ;background - size: 100% 100%;} 
</style></head> 


<body>< input type = "button"” value = "在 图 像 的 四 周 添加 扩散 型 的 内 置 阴影 " id= "myBtnShadow" style = 
"margin - left: 10px;width:390px;"/><div></div></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,$ ("div"). css("box-shadow", "0px 
0px 150px rgba(45,255,98,0.8) inset") 用 于 设置 圆 角 图 像 的 扩散 颜色 为 绿色 、 模 糊 半 径 为 150px, 并 
上 且 是 内 置 阴影 ,因为 目标 是 图 像 ,所 以 颜色 应 该 设置 一 定 的 透明 度 。box-shadow 的 语法 格式 如 下 。 


box - shadow: inset x— offset y— offset blur— radius spread - radius color 


box-shadow 默认 是 外 置 阴影 ,因此 可 以 省 略 inset; 当 需 要 设置 内 置 阴影 时 应 该 明确 指定 inset。 
inset 可 以 在 后 面 ( 如 该 实例 所 示 ), 也 可 以 在 前 面 ,例如 “$ ("div"). css("box-shadow", "inset 0px 
0px 150px rgba(45,255,98,0. 8) ")”, 测 试 表 明 均 正确 。 

此 实例 的 源 文件 名 是 myHtmlB046. html。 


107 在 图 像 的 下 端 添 加 阴影 凸 出 显示 图 像 


此 实例 主要 在 CSS 样式 中 设置 box-shadow 属性 的 纵向 偏 移 量 y-offset、 模 糊 半径 blur-radius 和 
阴影 颜色 color, 从 而 实现 在 圆 角 图 像 的 下 端 添加 阴影 以 西 出 样式 显示 图 像 。 当 在 Google Chrome 浏 
览 器 中 显示 该 页 面 时 , 单 击 * 在 图 像 的 下 端 添 加 阴影 "按钮 ,将 在 圆 角 图 像 的 下 端 产生 凸 出 阴影 ,效果 
如 图 107-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 107-1 


<!doctype html >< html >< head >< meta charset = "UTF — 8"> 
<script src= "js/jquery - 3.1.1.min. js"></script>< script language = "javascript"> 
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$ (document). ready(function() { 
// 在 图 像 的 下 端 添加 阴影 凸 出 显示 图 像 
$ ("#myBtnShadow"). click( function() { 
$ ("img").css("box— shadow", "0 15px 10px rgba(13,30,4,0.8) ");});}); 
</script ></head> 
<body>< input type = "button" value = "在 图 像 的 下 端 添 加 阴影 " id= "myBtnShadow" style = "margin - left: 
10px;width:390px;"/><div>< img src= "img/B004. jpg" style= "margin: 10px;border ~ radius:20px;"/></div> 
</body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , $ ("img"). css("box-shadow"， 
"0 15px 10px rgba(13,30,4,0.8) ") 用 于 在 圆 角 图 像 的 下 端 设置 凸 出 阴影 。box-shadow 的 语法 格式 
如 下 。 


box - shadow: inset x— offset y— offset blur— radius spread - radius color 


在 此 实例 中 ,15px 表示 y-offset 的 偏 移 量 ,10px 表示 模糊 半径 blur-radius,rgba(13,30,4,0. 8) 表 
示 阴 影 颜 色 color。 
此 实例 的 源 文件 名 是 myHtmlB047. html。 


108 在 圆 角 图 像 四 周 添加 扩展 的 外 置 阴影 


此 实例 主要 在 CSS 样式 中 设置 box-shadow 属性 的 模糊 半径 blur-radius、 扩 展 半 径 spread-radius 
和 阴影 颜色 color, 从 而 实现 在 圆 角 图 像 的 外 部 添加 扩展 的 模糊 阴影 。 当 在 Google Chrome 浏览 器 中 
显示 该 页 面 时 , 单 击 “在 图 像 的 四 周 添加 阴影 "按钮 ,将 在 圆 角 图 像 的 四 周 添加 淡淡 的 模糊 阴影 ,如 
图 108-1 所 示 ; 单 击 “ 在 图 像 的 四 周 扩展 阴影 按钮 ,将 在 圆 角 图 像 的 四 周 添加 厚重 的 模糊 阴影 ,如 
图 108-2 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 108-1 图 108-2 


<!doctype html >< html >< head >< meta charset = "UTF — 8"> 
<script src= "js/jquery - 3.1.1.min. js"></script>< script language = "javascript"> 
$ (document). ready(function() { 
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$ ("#myBtnShadow"). click( function() { // 在 图 像 的 四 周 添加 阴影 
$ ("img").css("box— shadow", "0 0 10px rgba(13,30,4,0.8) "); 
D; 
$ ("#myBtnExpand"). click( function() { // 在 图 像 的 四 周 扩展 阴影 
$ ("img").css("box— shadow", "0 0 10px 15px rgba(13,30,4,0.8) "); });}); 
</script ></head> 


<body >< input type = "button" value= "在 图 像 的 四 周 添加 阴影 " id = "myBtnShadow" style = 
"margin - left: 10px;width:190px;"/> 


< input type = "button" value= "在 图 像 的 四 周 扩展 阴影 " id = "myBtnExpand" style = "margin - left: 10px; 
width:190px;"/><div> 


< img src= "img/B004. jpg" style = "margin: 20px;border - radius:20px;"/> </div></body> 
</html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,$ ("img"). css("box-shadow"，"0 0 
10px 15px rgba(13,30,4,0.8) ") 用 于 设置 圆 角 图 像 的 外 围 扩展 阴影 。box-shadow 的 语法 格式 如 下 。 

box - shadow: inset x- offset y— offset blur~ radius spread - radius color 

在 此 实例 中 ,10px 表示 模糊 半径 blur-radius,15px 表示 扩展 半径 spread-radius,rgba(13,30,4， 
0.8) 表 示 阴 影 颜 色 color。 

此 实例 的 源 文件 名 是 myHtmlB048. html。 


109 通过 对 图 像 进行 圆 角 实 现 裁剪 椭圆 图 像 


此 实例 主要 在 CSS 样式 中 以 百分比 的 形式 设置 border-radius 属性 ,从 而 把 任意 图 像 裁剪 为 椭 
圆 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 , 单 击 “ 按 照 10% 裁 剪 圆 角 ?按钮 ,图 像 按照 10% 的 
比例 裁剪 圆 角 之 后 的 效果 如 图 109-1 所 示 ; 单 击 "按照 50% 裁 剪 圆 角 ” 按 钮 ,图 像 按照 50% 的 比例 裁 
前 圆 角 之 后 将 成 为 一 个 标准 的 椭圆 ,效果 如 图 109-2 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
百 - 0o 诺 百 - co x 
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图 109-1 图 109-2 


<!doctype html >< html >< head>< meta charset = "UTF — 8"> 


< script src= "js/jquery - 3.1.1.min. js"></script>< script language = "javascript"> 
$ (document). ready(function() { 
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$ ("#myBtnRadius10"). click(function() { // 按 照 10 裁剪 圆 角 
$("img").css("border- radius", "10% "); 
D; 
$ ("#myBtnRadius25"). click(function() { // 按 照 25 名 裁剪 圆 角 
$ ("img").css("border — radius", "25 % "); 
上 
$ ("#myBtnRadius50"). click(function() { // 按 照 50% 裁 剪 圆 角 
$ ("img").css("border — radius", "50%"); });}); 
</script ></head> 
<body >< input type = "button”value = "按照 10% 裁剪 圆 角 ”id = "myBtnRadius10" style = "margin - left: 
10px; width:120px;"/> 
<input type = "button”value = "按照 25% 裁剪 圆 角 ”id = "myBtnRadius25" style = "margin - left: 10px; 
width:120px;"/> 
<input type = "button” value = "按照 50% 裁剪 圆 角 ”id = " myBtnRadius50" style = "margin - left: 10px; 
width:120px;"/> 
<div>< img src = "img/B003. jpg" style= "margin: 10px;"/></div></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , $ ("img"). css("border-radius"， 
"50%") 表 示 按 照 图 像 的 长 度 和 宽度 的 50% 作 为 4 个 角 的 圆 角 半径 进行 裁剪 ,而 不 论 图 像 的 长 度 和 宽 
度 的 具体 值 是 多 少 。 这 种 情况 特别 适用 于 在 图 像 未 知 的 情况 下 进行 圆 角 ,例如 允许 用 户 对 上 传 的 图 
像 进行 圆 角 特效 处 理 。 

此 实例 的 源 文件 名 是 myHtmlB003. html。 


110 设置 border-image 属性 实现 重复 边框 图 案 


此 实例 主要 在 CSS 样式 中 设置 border-image 属性 ,从 而 实现 使 元 素 的 边框 线 呈 现 不 同 的 图 案 。 
当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 , 单 击 “ 左 右 重 复 风格 ”按钮 , 则 div 元 素 的 边框 图 案 的 显 
示 风 格 如 图 110-1 所 示 ; 单 击 “ 四 边 重 复 风格 "按钮 , 则 div 元 素 的 边框 图 案 的 显示 风格 如 图 110-2 所 
示 ; 单 击 “ 四 边 拉 伸 风 格 ” 按 钮 , 则 div 元 素 的 边框 图 案 的 显示 风格 如 图 110-3 所 示 ; 单 击 “ 四 边 平 铺 风 
格 ” 按 钮 , 则 div 元 素 的 边框 图 案 的 显示 风格 如 图 110-4 所 示 。 需 要 说 明 的 是 ,虽然 在 4 幅 图 中 显示 了 
4 种 不 同 的 边框 风格 ,但 4 种 风格 采用 的 均 是 同一 张 边框 图 案 , 如 图 110-5 所 示 。 有 关 此 实例 的 主要 
代码 如 下 。 





百 -o x 


D myHtmlBO0L html x\ 


DD) myHtmlB001.html x _ _ 
3 CC Dfie///Dp/myWork/myHtmlB001. 字 三 
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[二 看重 夏 风 格 | [ 下边 重 夏 风 格 | | 四边 拉 信 风格 | | 下边 平 铺 风格 | [ 去 丰 一 丰 风 格 | [ 西边 重 夏 风 格 | | 西边 拉 贫 风格 | | 四 边 科 铺 风格 | 











4 “eo 人 PO 
祝 日 色欲 尽 花 含 烟 ， 月 明 如 素 悉 不 忠 。 六 过。 日 色欲 尽 花 含 烟 ， 月 明 如 素 于 不 呢 。 六 
: 赵 茵 初 停 风骨 柱 ， 基 芋 答 大 短 党 弦 。 ; : 赵 茵 初 停 风骨 柱 ， 匀 蓉 徐 大 乱 党 弦 。 : 
3 此 曲 有 意 无 人 传 ， 愿 随 在 风 寄 问 然 - 3 ; 此 曲 有 意 无 人 传 ， 愿 随 存 风 寄 巷 然 。 
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图 110-1 图 110-2 
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人 > CDfiley/DymyWorymyHtmi6001 交 | 三 
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| 去 右 重 夏 风 格 | | 四 边 重 夏 风 格 | | 四 边 拉 佛 风 格 | | 四 边 插 铺 风 格 | | 声 右 重 夏 风格 | | 四 边 重复 风格 | | 四 边 拉 伸 风格 | | 四 边 平 铺 风 格 | 
人 一 0 © 

日 色欲 尽 花 含 烟 ， 月 明 如 素 秋 不眠- : 日 色欲 尽 花 含 烟 ， 月 明 如 素 悉 不 眠 。 

赵 瑟 初 停 风骨 柱 ， 蜀 有 和 欲 卖 雹 省 弦 。 赵 感 初 停 风 风 柱 ， 简 琴 欲 奏 短 洗 弦 。 


此 曲 有 意 无 人 传 ， 愿 随 春风 寄 巷 然 。 : 此 曲 有 意 无 人 传 ， 愿 随 春风 寄 巷 然 。 
一 = 4 








图 110-3 
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<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<script src= "js/jquery- 3.1.1.min. js"></script >< script language = "javascript"> 
$ (document). ready(function() { 
$ ("#myBtnRepeat"). click(function() { // 左 右 重 复 风格 
$ ("#myBorder").css("border - image"， 
"url (img/myBorder. jpg) 27/17px stretch repeat"); }); 
$ ("#myBtnFull").click(function() { // 四 边 重复 风格 
$ ("#myBorder").css("border - image", 
"url(img/myBorder. jpg) 27/17px repeat"); }); 
$ ("#myBtnStretch"). click(function() { // 四 边 拉 伸 风格 
$ ("#myBorder").css("border - image"， 
"url(img/myBorder. jpg) 27/17px stretch"); }); 
$ ("#myBtnRound"). click(function() { // 四 边 平 铺 风格 
$ ("#myBorder").css("border - image”", 
"url( img/myBorder. jpg) 27/7px round"); });}); 
</script > 
< style type = "text/css"> 
#myBorder { width: 390px; height: 185px; text ~ align: center;} 
</style></head> 
<body><p>< input type = "button" value = "左右 重复 风格 ”id = "myBtnRepeat"/> 
< input type = "button” value = "四 边 重 复 风 格 " id = "myBtnFull"/> 
< input type = "button" value = "四 边 拉 伸 风格 ”id = "myBtnStretch"/> 
< input type = "button” value = "四 边 平 铺 风 格 ”id = "myBtnRound"/></p> 
<div id= "myBorder"> 
<h3 ><br> 日 色欲 尽 花 含 烟 ,月 明 如 素 悉 不眠 。< br> 
<br > 赵 瑟 初 停 凤凰 柱 , 蜀 琴 和 欲 奏 移 郑 弦 。<br> 
<br > 此 曲 有 意 无 人 传 , 愿 随 春风 寄 燕 然 。<br></h3a3 ></div></body></html > 
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上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , $ ("#myBorder"). css ("border- 
image" ,，"url(img/ myBorder. jpg) 27/17px stretch repeat") 中 的 url() 为 图 片 链接 ,然后 设置 元 素 的 边 距 
为 27、 宽 度 为 17, 上 下 边框 拉 伸 (stretch) ,左右 边框 重复 (repeat); $ ("#myBorder"). css("border- 
image", "url(img/myBorder. jpg) 27/17px repeat") 中 的 repeat 表示 边框 的 4 边 均 重复 。border- 
image 的 重复 性 有 别 于 background 的 背景 重复 ,差别 较 大 。background 图 片 包含 重复 .不 重复 ,水平 
重复 .垂直 重复 。 而 对 于 borderimage,repeat 只 是 其 中 之 一 ,其 余 两 个 分 别 是 round 和 stretch ,其 中 
stretch 是 默认 值 。 

此 实例 的 源 文件 名 是 myHtmlB001. html。 


111 旋转 多 个 图 像 模拟 照片 的 不 规则 排列 


此 实例 主要 通过 在 CSS 样式 中 设置 box-shadow 属性 和 使 用 rotate() 方 法 实现 按照 一 定 的 角度 
旋转 图 像 并 设置 阴影 ,以 散 列 的 效果 显示 多 幅 图 像 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 , 带 
阴影 的 散 列 图 像 效 果 如 图 111-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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~ 3 © D file///D/myWork/myHtmlB00S.html 安 轩 
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<!doctype html >< html >< head > < meta charset = "UTF - 8"> 
<style> 

body{margin:30px; background - color:white;} 

div. myFrame{ /* 创建 有 阴影 的 盒子 * / 
width:190px;padding:10px; border:1px solid # BFBFBF; 
background — color:white;box — shadow:2px 2px 3px gray;} 

div. rotate left{ /* 向 左旋 转 7° x*/ 
float :left; transform:rotate(7deg);} 

div. rotate right{ /* 向 右 旋转 8 */ 
float :left;transform:rotate( - 8deg);} 

</style></head> 
<body ><div class = "myFrame rotate left"> 
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< img src = "img/B005R. jpg" width = "190" height = "213" /> 


<p style= "color:darkred"> 中 国 中 央 电 视 台 ,简称 央视 ,英语 China Central Television, 简称 CCTV, 是 中 华人 
民 共和 国 国家 电视 台 。</p></div> 


<div class = "myFrame rotate right">< img src = "img/B005B. jpg" width= "190" height = "213" /><p style = 
"color:darkred"> 中 国 国家 大 剧院 , 由 法 国 建筑 师 保罗 安德鲁 主持 设计 ,设计 方 为 法 国 巴 黎 机 场 公司 ,是 亚洲 最 
大 的 剧院 综合 体 。</p></div> </body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 .box-shadow:2px 2px 3px gray 用 于 
创建 有 灰色 阴影 的 盒子 ; transform:rotate(7deg) 用 于 使 元 素 (向 左 ) 旋 转 7"。rotate(7deg) 方 法 只 有 
一 个 参数 一 一 角度 ,单位 deg 为 度 的 意思 , 正 数 为 顺 时 针 旋 转 , 负 数 为 逆 时 针 旋 转 。 

此 实例 的 源 文件 名 是 myHtmlB005. html。 


112 通过 扭曲 和 旋转 实现 纸张 的 曲线 投影 


此 实例 主要 在 CSS 样式 中 设置 box-shadow 属性 和 transform 属性 ,通过 产生 扭曲 和 旋转 来 实现 
纸张 的 曲线 投影 特效 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,两 张 简历 的 左下 角 和 右 下 角 出 
现 的 曲线 投影 特效 如 图 112-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 112-1 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<style> 
.Curved box { display: inline- block; width: 200px;height: 248px; 
margin: 20px; background — color: #FFF; border: lpx solid # EEE; 
box — shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 
:0 0 40px rgba(0, 0, 0, 0.06) inset; 
position: relative;border — radius: lpx;} 
.curved box:before {transform: skew( - 15deg) rotate( - 6deg) ;left: 15px;} 
.Curved box:after{transform: skew(15deg) rotate(6deg);right: 15px;} 
.Curved box:before, .curved box:after {width: 70% ; height: 55%; 
content: ''; box - shadow: 0 8px 16px rgba(0, 0, 0, 0.3); 
position: absolute; bottom: 10px; z — index: — 1;} 
p{padding — left: 15px; padding — right: 10px; font — size: 14px;} 
h3{text - align: center;} 
</style></head> 
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<body>< div class = "curved box">< h3 > 徐 海 东 </h3 ><p> 徐 海 东 (1900 年 6 月 17 日 -1970 年 3 月 25 日 ), 原 
名 元 清 , 湖北 省 大 悟 县 新 城镇 ( 原 黄陂 县 淄 源 乡 会 夏 店 里 滚石 岭 会 ) 人 。 中 国共 产 党 的 优秀 党 员 , 我 军 卓 越 的 军 
事 家 , 久 经 考验 的 无 产 阶级 忠诚 战士 ,中 国 工农 红军 及 中 国人 民 解 放 军 主要 领导 人 之 一 , 军事 家 、 中 国人 民 解 放 
军 大 将 。</p></div> 

<div class = "curved_box">< h3 > 徐 海 东 </h3><p> 徐 海 东 (1900 年 6 月 17 日 -1970 年 3 月 25 日), 原 名 元 清 , 
湖北 省 大 悟 县 新 城镇 ( 原 黄 陂 县 溉 源 乡 会 夏 店 里 滚石 岭 会 ) 人 。 中 国共 产 党 的 优秀 党 员 , 我 军 卓 越 的 军事 家 , 久 
经 考验 的 无 产 阶 级 忠诚 战士 , 中国 工 农 红军 及 中 国人 民 解 放 军 主要 领导 人 之 一 , 军事 家 ,中 国人 民 解 放 军 大 将 。 
</p></div></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,box-shadow 用 于 向 元 素 添加 一 个 或 
多 个 阴影 ; transform: skew(15deg) rotate(6deg) 中 的 skew(15deg) 表 示 元 素 绕 坐 标 轴 倾斜 15 ， 
rotate(6deg) 表 示 元 素 沿 顺 时 针 方 向 旋转 6 ,负数 表示 反 向 旋转 。 

此 实例 的 源 文件 名 是 myHtmlB050. html。 


113 ”通过 旋转 和 圆 角 创建 异形 风格 的 头像 


此 实例 主要 通过 设置 元 素 的 border-radius、transition、transform 等 属性 创建 异形 风格 的 头像 。 
当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,头像 显示 的 状态 如 图 113-1 所 示 ; 如 果 将 鼠标 指针 放 在 
左上 角 的 头像 上 ,会 出 现 如 图 113-2 所 示 的 异形 效果 ; 如 果 将 鼠标 指针 放 在 其 他 头像 上 ,也 会 出 现 不 
同 的 异形 效果 。 有 关 此 实例 的 主要 代码 如 下 。 





<!doctype html >< html >< head>< meta charset = "UTF - 8"> 
< style type = "text/css"> 
.myRvatar {margin: 10px; display: inline— block; width: 168px; height: 168px; 
border: 4px solid #00C7E9 ;border ~ radius: 87% 91% 98% 100%; 
— webkit ~ transition: all .35s;overflow: hidden;} 
. myAvatar:hover {border - radius: 95% 70% 100% 80% ;transform: rotate( - 2deg);} 
/* 通 过 选择 器 定制 头像 * / 
.myAvatar:nth— child(2n+1) {border — radius: 59% 52% 56 59%; 
transform: rotate( - 6deg);} 
.myAvatar:nth— child(2n + 1):hover {border -radius: 51% 67% 56% 64% ; 
transform: rotate( - 4deg);} 
.myAvatar:nth— child(3n + 2) {border ~ radius: 84% 94% 83% 72%; 
transform: rotate(S5deg);} 
.myAvatar:nth— child(3n + 2):hover {border -radius: 69% 64% 53% 70%; 
transform: rotate(0deg);} 
.myAvatar:nth— child(5n + 3) {border ~ radius: 73% 100% 82% 100%; 
transform: rotate(7deg);} 
.myAvatar:nth— child(5n + 3) :hover {border - radius: 73%; 
transform: rotate(7deg);} 
.myAvatar:nth— child(7n + 5) {border ~ radius: 93% 90% 85% 78%; 
transform: rotate( - 2deg);} 
.myAvatar:nth— child(7n + 5):hover {border - radius: 53% 70% 85 68%; 
transform: rotate( - 2deg) ;} 
.myAvatar:nth— child(11n+ 7) {border-radius: 68% 68% 83% 53%; 
transform: rotate( ~ 2deg);} 
.myAvatar:nth— child(11n + 7):hover {border — radius: 58% 98% 78% 83%; 
transform: rotate(3deg);} 
</style></head> 
<body><div><div class = "myAvatar">< img src = "img/a043. jpg"></div> 
<div class= "myAvatar">< img src = "img/a043. jpg"></div> 
<div class= "myAvatar">< img src = "img/a043. jpg"></div> 
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<div class = "myAvatar">< img src 
<div class= "myAvatar">< img src = "img/a043 
<div class= "myAvatar">< img src = "img/a043. 
<div class= "myAvatar">< img src = "img/a043. 
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img/a043. jpg"></div> 
.jpg"></div> 


jpg"></div> 
jpg"></div> 
jpg"></div> 
jpg"></div> 
jpg"></div> 
jpg"></div> 
jpg"></div></div></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,border-radius: 59% 52% 56% 59% 
表示 以 百分比 的 形式 设置 头像 的 border-top-left-radius、border-top-right-radius、border-bottom-right 
radius、border-bottom-left-radius 几 个 位 置 的 圆 角 半 径 ; transform: rotate( 一 6deg) 表 示 反 方向 旋转 
webkit-transition: all . 35s 表示 头像 的 所 有 属性 在 0. 35 秒 内 完成 从 某 个 值 改变 到 另 一 个 值 。 


此 实例 的 源 文件 名 是 myHtmlB130. html。 
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114 以 水 平 或 垂直 翻转 的 方式 显示 图 像 


此 实例 主要 通过 使 用 
Google Chrome 浏览 器 中 
后 的 效果 如 图 114-1 所 示 
实例 的 主要 代码 如 下 。 





rotateY() 和 rotateX() 方 法 实现 对 元 素 进行 水 平 翻转 或 垂直 翻转 。 当 在 
显示 该 页 面 时 将 显示 未 翻转 的 图 像 ; 单 击 * 水 平 翻转 ”按钮 , 则 水 平 翻转 图 像 
; 单 击 “ 垂 直 翻 转 ” 按 钮 , 则 垂直 翻转 图 像 后 的 效果 如 图 114-2 所 示 。 有 关 此 
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图 114-1 
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图 114-2 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<script src= "js/jquery -3.1.1.min. js"></script > 


< script language = "jav: 


ascript"> 


$ (document). ready(function() { 
$ ("#myBtnFlipH"). click(function() { // 水 平 翻转 
$ ("img").css("— webkit ~ transform", "rotateY(180deg)"); 


DD); 
$ ("#myBtnFlipy").c. 


lick(function() { // 垂 直 翻 转 


$ ("img").css("— webkit — transform", "rotateX(180deg)"); 


1D); 1); 
</script > 


< style type = "text/css"> 
img { width: 405px; height: 250px; border - radius: 5px; } 


input { width: 195px; 


border - radius: 2px; 


padding: 3px; margin: 2px;} 


</style></head> 


<body>< div>< input type = "button" value = "水 平 翻 转 " id= "myBtnFlipH"/> 


< input type = "button" value = "垂直 翻转 ”id = "myBtnFlipV"/></div> 
< img src= "img/B147.jpg"> 


</body></html> 


上 面 有 底 纹 的 代码 是 此 


实例 的 核心 代码 。 在 该 部 分 代码 中 ,rotateY (angle) 方 法 用 于 使 元 素 实现 


沿 着 Y 轴 的 3D 旋转 ,参数 angle 表示 旋转 角度 ,范围 为 0 一 360°, 当 angle 为 180deg 时 则 水 平 翻转 元 
素 ; rotateX(angle) 方 法 用 于 使 元 素 实 现 沿 着 X 轴 的 3D 旋转 ,参数 angle 表示 旋转 角度 ,范围 为 0 一 





360°, 当 angle 为 180deg 时 导 
此 实例 的 源 文件 名 是 m 


E 直 翻转 元 素 。 
yHtmlB147. html。 
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115 使 用 旋转 等 方法 创建 心 形 风格 的 图 形 


此 实例 主要 通过 设置 元 素 的 borderradius .transform transform-origin 等 属性 创建 心 形 图 形 。 
当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,创建 的 心 形 图 形 效果 如 图 115-1 所 示 。 有 关 此 实例 的 
主要 代码 如 下 。 

[ BE x 
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图 115-1 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
< style type= "text/css"> 
#heart { position: relative; } 
##heart:before, #heart:after { position: absolute; content: ""; left: 250px; 
top: 30px; width: 250px; height: 400px; background: darkred; 
border - radius: 250px 250px 0 0; - webkit — transform: rotate( - 45deg); 
— webkit ~ transform— origin: 0 100% ;} 
#heart:after {left: 0; — webkit— transform: rotate(45deg); 
— webkit - transform — origin: 100% 100%;} 
body{ background: green;} 
</style></head> 
<body><div id = "heart" ></div></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,transform 属性 用 于 向 元 素 应 用 2D 
或 3D 转换 , 即 对 元 素 进行 旋转 ,缩放 、 移 动 或 倾斜 ; -webkit-transform: rotate(45deg) 表 示 将 元 素 旋 
转 45"。transform-origin 属性 用 于 改变 被 转换 元 素 的 位 置 ,其 语法 格式 如 下 。 

transform- origin: x- axis y- axis z- axis; 

其 中 ,x-axis 用 于 定义 视图 被 置 于 X 轴 的 何 处 ; y-axis 用 于 定义 视图 被 置 于 Y 轴 的 何 处 ; z-axis 
用 于 定义 视图 被 置 于 2Z 轴 的 何 处 。 

border-radius 属性 是 一 个 简写 属性 ,用 于 设置 元 素 的 border-top-left-radius、border-top-right- 
radius、border-bottom-right-radius ,border-bottom-left-radius(4 个 角 的 半径 值 ) ,以 产生 圆 角 效果 。 

此 实例 的 源 文件 名 是 myHtmlB149. html。 
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116 ”使 用 旋转 等 方法 创建 无 穷 大 符号 


此 实例 主要 通过 设置 元 素 的 border-radius、transform 等 属性 创建 无 穷 大 符号 。 当 在 Google 
Chrome 浏览 器 中 显示 该 页 面 时 ,创建 的 无 穷 大 符号 效果 如 图 116-1 所 示 。 有 关 此 实例 的 主要 代码 
如 下 。 








图 116-1 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<style type= "text/css"> 
# infinity { position: relative; width: 750px; height: 200px; 
— webkit ~ transform: scale(0.5,0.5); } 
# infinity:before, #infinity:after { content: ""; position: absolute; 
top: 0; left: 0; width: 240px; height :240px; 
border: 50px solid deepskyblue; border — radius: 200px 200px 0 200px; 
— webkit — transform: rotate( - 45deg) ;} 
# infinity:after {left: auto; right: 0;border - radius: 200px 200px 200px 0; 
— webkit — transform: rotate(45deg); } 
body { background: lightgray;} 
</style></head> 
<body><div id = "infinity"></div></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,transform 属性 用 于 向 元 素 应 用 2D 
或 3D 转换 , 即 对 元 素 进行 旋转 ,缩放 、 移 动 或 倾斜 ; -webkit-transform: rotate(45deg) 表 示 将 元 素 旋 
转 45"; -webkit-transform:scale(0. 5,0. 5) 表 示 将 元 素 缩小 一 半 ; border-radius 属性 是 一 个 简写 属 
性 ,用 于 设置 元 素 的 border-top-left-radius、border-top-right-radius、border-bottom-right-radius、 
border-bottom-left-radius(4 个 角 的 半径 值 ) .以 产生 圆 角 效果 。 

此 实例 的 源 文件 名 是 myHtmlB150. html。 


117 根据 图 形 裁剪 绝对 定位 元 素 的 局 部 区 域 


此 实例 主要 通过 设置 绝对 定位 元 素 的 clip 属性 实现 根据 指定 的 图 形 裁剪 元 素 的 部 分 区 域 。 当 在 
Google Chrome 浏览 器 中 显示 该 页 面 时 将 显示 带 背 景 图 像 的 绝对 定位 元 素 (div 块 ), 单 击 “ 剪 切 图 像 








第 2 部 分 (> 


的 左右 两 端 " 按 钮 ,该 div 块 的 左 、 右 两 端 被 裁剪 ,保留 中 间 部 分 ,如 图 117-1 所 示 。 有 关 此 实例 的 主要 
代码 如 下 。 
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图 117-1 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<script src= "js/jquery- 3.1.1.min. js"></script >< script language = "javascript"> 
$ (document). ready(function() { 
$ ("#myBtnClip").click(function() { // 剪 切 图 像 的 左 、 右 两 端 
$ ("div").css("clip", "rect(auto 370px auto 60px)"); });}); 
</script> 


<style type= "text/css"> 
div { width: 428px; height: 283px; border - radius: 5px; position: absolute; 
background - image: url(img/B088. jpg) ;text - align: center;} 
input { width: 420px;border - radius: 5px; margin: Spx;} 
</style></head> 
<body>< input type= "button” value= " 剪 切 图 像 的 左右 两 端 ” id = "myBtnClip"/> 
<div><h3 > 世界 历史 文化 遗产 </h3 ></div></body></htnl > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , $ ("div"). css("clip", "rect(auto 
370px auto 60px)") 用 于 指定 裁剪 或 保留 的 区 域 。 在 CSS3 中 ,clip 属性 用 于 检索 或 设置 对 象 的 可 视 
区 域 ,区 域外 的 部 分 是 透明 的 ,在 使 用 此 属性 时 必须 将 元 素 的 position 属性 值 设 为 absolute 或 者 
fixed ,这样 此 属性 才 可 使 用 。clip 属性 的 语法 格式 如 下 。 





clip: auto | <shape> 
< shape>: rect(< number >|auto < number >|auto < number >|auto < number >|auto) 
其 中 ,各 属性 值 的 意义 如 下 。 
(1) auto: 该 值 表 示 对 象 无 剪 切 。 

(2) rect(<number >|auto <number >|auto <number >|auto <number >|auto): 该 值 表 示 依 据 上 - 
右 - 下 - 左 的 顺序 提供 自 对 象 左 上 角 为 (0.0) 坐 标 计 算 的 4 个 偏 移 数值 ,其 中 任 一 数值 都 可 用 auto 蔡 
换 , 即 此 边 不 剪 切 。 例 如 clip:rect(auto 50px 20px auto) 表 示 上 边 不 剪 切 ,右边 从 左 起 第 50 个 像素 开 


始 剪 切 直到 最 右边 ,下 边 从 上 起 第 20 个 像素 开始 剪 切 直到 最 底部 ,左边 不 剪 切 。 
此 实例 的 源 文件 名 是 myHtmlB088. html。 
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118 将 绝对 定位 元 素 的 区 域 裁剪 成 六 边 形 


此 实例 主要 通过 设置 绝对 定位 元 素 的 clip-path 属性 把 元 素 的 中 心 部 分 裁剪 成 一 个 六 边 形 。 当 在 
Google Chrome 浏览 器 中 显示 该 页 面 时 将 显示 带 背 景 图 像 的 绝对 定位 元 素 (div 块 ). 单 击 “ 将 图 像 裁 
剪 成 一 个 正六 边 形 ” 按 钮 , 则 该 div 块 的 周围 被 裁剪 ,中 间 部 分 保留 成 一 个 六 边 形 ,如 图 118-1 所 示 。 
有 关 此 实例 的 主要 代码 如 下 。 
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将 图 像 才 萝 成 一 个 正六 边 形 ] 














<!doctype html >< html >< head ><meta charset = "UTF - 8"> 
< script src= "js/jquery -3.1.1.min. js"></script >< script language = "javascript"> 
$ (document). ready(function() { 
$ ("#myBtnClip").click(function() { // 将 图 像 裁剪 成 一 个 正六 边 形 
$ ("div").css("— webkit — clip— path", 
"polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%)"); });}); 
</script> 
<style type= "text/css"> 
div {width: 428px; height: 283px;border— radius: 5px;position: absolute; 
background — image: url(img/B088. jpg); text— align: center; 
/* ~webkit ~-clip— path: polygon(0% 50%, 25% 0%, 75% Og%, 100% 50%, 75% 100%, 25% 100%);*/ 
} 
input{width:420px; border - radius: 5px; margin: 5px;} 
</style></head> 
<body>< input type = "button” value= "将 图 像 裁 前 成 一 个 正六 边 形 " id= "myBtnClip"/> 
<div><h3 > 世界 历史 文化 遗产 </h3 ></div></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , $$("div"). css("-webkit-clip-path"， 
"polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%)") 用 于 指定 裁剪 或 
保留 的 区 域 是 一 个 六 边 形 。 在 CSS3 中 ,clip-path 属性 是 一 个 通过 屏蔽 和 裁剪 来 隐藏 元 素 的 一 部 分 的 
工具 。 尽 管 clip-path 属性 目前 并 没有 被 大 多 数 浏览 器 支持 ,但 在 谷歌 浏览 器 中 它 仍然 是 一 个 实现 时 
尚 效果 的 小 工具 。clip-path 简单 的 工作 原理 是 提供 一 系列 的 x 和 y 值 来 创建 路 径 。 当 使 用 这 些 值 创 
建 一 条 完整 路 径 时 会 把 图 像 按 照 路 径 内 部 的 尺寸 进行 裁剪 。 使 用 clip-path 可 以 创建 圆 形 .椭圆 、 多 边 
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形 等 不 同 的 形状 ,用 户 的 创造 力 是 唯一 的 限制 。 从 上 面 的 实例 可 以 看 出 ,每 一 对 坐标 描述 的 即 是 多 边 
形 每 一 个 点 的 位 置 。 
此 实例 的 源 文件 名 是 myHtmlB089. html。 


119 将 绝对 定位 元 素 的 区 域 裁剪 成 五 角 星 


此 实例 主要 通过 设置 绝对 定位 元 素 的 clip-path 属性 把 元 素 的 中 心 部 分 裁剪 成 一 个 五 角 星 。 当 在 
Google Chrome 浏览 器 中 显示 该 页 面 时 将 显示 带 背 景 图 像 的 绝对 定位 元 素 (div 块 ), 单 击 “ 将 图 像 裁 
剪 成 一 个 正 五 角 星 ”按钮 ,该 div 块 的 周围 被 裁剪 ,中 间 部 分 保留 成 一 个 五 角 星 ,如 图 119-1 所 示 。 有 
关 此 实例 的 主要 代码 如 下 。 
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<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<script src= "js/jquery — 3.1.1.min. js"></script >< script language = "javascript"> 
$ (document). ready(function() { 
$ ("#myBtnClip").click(function() { // 将 图 像 裁剪 成 一 个 正 五 角 星 
$ ("div").css("— webkit ~ clip—- path", "polygon(50% 0%, 63% 38%, 100% 38%, 69% 59%, 82% 
100%, 50% 75%, 18% 100%, 31% 59%, 038%, 37% 38%)"); });}); 
</script > 
< style type= "text/css"> 
div {width: 330px; height: 330px; border — radius: 5px;position: absolute; 
background — image: url(img/B090. jpg) ;text - align: center;} 
input {width:325px; border - radius: 5px;margin: 2px;} 
</style></head> 
<body >< input type = "button” value = "将 图 像 裁剪 成 一 个 正 五 角 星 " id= "myBtnClip"/> 
<div><h3 > 世界 建筑 精品 </h3 ></div></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , $("div"). css("-webkit-clip-path"， 
"polygon(50% 0%, 63% 38%, 100% 38%, 69% 59%, 82% 100%, 50% 75%, 18% 100%, 31% 
59% ,0 38%，37% 38%)") 用 于 指定 裁剪 或 保留 的 区 域 是 一 个 五 角 星 ,每 一 对 坐标 描述 的 即 是 五 角 
星 的 10 个 点 的 位 置 。 





HTML5+CSS3 炫 酷 应 用 实例 集锦 


此 实例 的 源 文件 名 是 myHtmlB090. html。 
120 ”将 绝对 定位 元 素 的 区 域 裁剪 成 椭圆 


此 实例 主要 使 用 ellipse() 方 法 设置 绝对 定位 元 素 的 clip-path 属性 ,从 而 把 元 素 的 中 心 部 分 裁剪 
成 一 个 椭圆 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 将 显示 带 背 景 图 像 的 绝对 定位 元 素 (div 
块 ), 单 击 “ 将 图 像 裁 前 成 一 个 椭圆 ”按钮 , 则 该 div 块 的 周围 被 裁剪 ,中 间 部 分 保留 成 一 个 椭圆 ,如 
图 120-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 120-1 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<script src= "js/jquery -3.1.1.min. js"></script >< script language = "javascript"> 
$ (document). ready(function() { 
$ ("#myBtnClip").click(function() { // 将 图 像 裁剪 成 一 个 椭圆 
$("div").css("- webkit-clip-path"，"ellipse(49% 48% at 50% 50%)"); 
]) 
</script> 
< style type = "text/css"> 
div { width: 413px; height: 287px;border - radius: 5px; position: absolute; 
background - image: url(img/B091. jpg); text — align: center;} 
input{ width:410px;border- radius: 5px;margin: 2px; } 
</style></head> 
<body >< input type = "button”value = "将 图 像 裁剪 成 一 个 椭圆 ”id = "myBtnClip"/> 
<div><h3a > 世界 建筑 精品 </Hh3 ></div></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , $("div"). css("-webkit-clip-path"， 
"ellipse(49% 48% at 50% 50%)") 用 于 指定 裁剪 或 保留 的 区 域 是 一 个 椭圆 ,其 中 ellipse() 是 绘制 椭 
圆 的 方法 ,49% 表 示 椭 圆 的 X 轴 半 径 是 $ ("div") 宽 度 的 49% ,48% 表 示 椭 圆 的 Y 轴 半 径 是 $ ("div") 
高 度 的 48% ,at 关键 字 后 面 的 50% 50% 用 于 指定 椭圆 中 心 的 x 坐标 和 y 坐标 占 宽度 和 高 度 的 比例 均 
是 50%。 

此 实例 的 源 文件 名 是 myHtmlB091. html。 
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121 将 绝对 定位 元 素 的 区 域 裁剪 成 圆 形 


此 实例 主要 使 用 circle() 方 法 设置 绝对 定位 元 素 的 clip-path 属性 ,从 而 把 元 素 的 中 心 部 分 裁剪 成 
一 个 圆 形 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 将 显示 带 背 景 图 像 的 绝对 定位 元 素 (div 块 )， 


单 击 “ 将 图 像 裁剪 成 一 个 圆 形 "按钮 , 则 该 div 块 的 周围 被 裁剪 ,中 间 部 分 保留 成 一 个 圆 形 , 如 图 121-1 
所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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将 图 急 天 要 成 一 个 图 形 ] 


A 





图 121-1 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<script src= "js/jquery - 3.1.1.min. js"></script >< script language = "javascript"> 
$ (document). ready(function() { 
$ ("#myBtnClip").click(function() { // 将 图 像 裁剪 成 一 个 圆 形 


$("div").css("- webkit -clip— path", "circle(45% at 50% 50%)"); 
D2}); 


</script > 
< style type= "text/css"> 
div { width: 385px; height: 356px;border - radius: 5px;position: absolute; 
background - image: url(img/B092. jpg) ;text - align: center; } 
input{ width:385px;border — radius: 5px; margin: 2px;} 
</style></head> 


<body >< input type = "button" value = "将 图 像 裁剪 成 一 个 圆 形 ”id = "myBtnClip"/> 
<div><h3 > 世界 绝 美 风光 </h3 ></div></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , $ ("div"). css("-webkit-clip-path"， 
"circle(45% at 50% 50%)") 用 于 指定 裁剪 或 保留 的 区 域 是 一 个 圆 , 其 中 circle() 是 绘制 圆 的 方法 ， 


45% 表 示 圆 的 半径 是 $C"div") 宽 度 的 45% ,at 关键 字 后 面 的 50% 50% 用 于 指定 圆 中 心 的 x 坐标 和 y 
坐标 占 宽度 和 高 度 的 比例 均 是 50% 。 


此 实例 的 源 文件 名 是 myHtmlB092. html。 
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122 ”将 绝对 定位 元 素 的 区 域 裁剪 成 三 角形 


此 实例 主要 使 用 polygon( ) 方 法 设置 绝对 定位 元 素 的 clip-path 属性 ,从 而 把 元 素 的 中 心 部 分 裁 前 
成 一 个 三 角形 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 将 显示 带 背 景 图 像 的 绝对 定位 元 素 (div 
块 ), 单 击 “ 将 图 像 裁剪 成 一 个 三 角形 ”按钮 . 则 该 div 块 的 周围 被 裁剪 ,中 间 部 分 保留 成 一 个 三 角形 ,如 
图 122-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 122-1 


<!doctype html >< html >< head >< meta charset = "UTF — 8"> 
<script src= "js/jquery -3.1.1.min. js"></script >< script language = "javascript"> 
$ (document). ready(function() { 
$ ("#myBtnClip").click(function() { // 将 图 像 裁剪 成 一 个 三 角形 
$ ("div").css("— webkit— clip— path", "polygon(0 99%, 50% 0, 98% 98%)"); 
D2}); 
</script > 
< style type= "text/css"> 
div {width: 382px; height : 273px; border ~ radius: 5px;position: absolute; 
background — image: url(img/B093. jpg) ;text - align: center;} 
input{ width:382px;border- radius: 5px; margin: 2px;} 
</style></head> 
<body >< input type= "button” value= "将 图 像 裁剪 成 一 个 三 角形 " id= "myBtnClip"/> 
<div><h3a > 世界 绝 美 风光 </h3 ></div></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , $ ("div"). css("-webkit-clip-path"， 
"polygon(0 99%,50% 0, 98% 98%)") 用 于 指定 裁剪 或 保留 的 区 域 是 一 个 三 角形 ,其 中 polygon() 
是 绘制 多 边 形 的 方法 ,0 99% 表 示 三 角形 左下 角 顶 点 的 x 坐标 是 $$ ("div") 宽 度 的 0%、y 坐标 是 $(" 
div") 高 度 的 99%; 50% 0 表示 三 角形 上 端 顶 点 的 x 坐标 是 $$ ("div") 宽 度 的 50%、y 坐标 是 $$(" 
div" ) 高 度 的 0%; 98% 98% 表 示 三 角形 右 下 角 顶 点 的 x 坐标 是 $$ ("div") 宽 度 的 98% 、y 坐标 是 $$(" 
div") 高 度 的 98%。 

此 实例 的 源 文 件 名 是 myHtmlB093. html。 
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123 ”将 绝对 定位 元 素 裁剪 成 内 投影 图 形 


此 实例 主要 使 用 inset() 方 法 设置 绝对 定位 元 素 的 clip-path 属性 ,从 而 将 绝对 定位 元 素 的 部 分 区 
域 裁剪 成 内 投影 风格 的 图 形 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 将 显示 带 背 景 图 像 的 绝对 
定位 元 素 (div 块 ) , 单 击 * 将 图 像 裁剪 成 一 个 内 投影 图 形 ” 按 钮 ,该 div 块 的 周围 被 裁剪 ,指定 部 分 保留 
成 一 个 内 投影 风格 的 图 形 , 如 图 123-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 123-1 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<script src= "js/jquery - 3.1.1.min. js"></script>< script language = "javascript"> 
$ (document). ready(function() { 
$ ("#myBtnClip").click(function() { // 将 图 像 裁 前 成 一 个 内 投影 图 形 
$ ("div").css("— webkit— clip- path"”, "inset(35% 0 15% 0 round 0 24% 0 26%)");});}); 
</script > 
< style type = "text/css"> 
div { width: 382px; height: 273px;border — radius: 5px;position: absolute; 
background - image: url(img/B094. jpg); text - align: center; } 
input{width:382px; border - radius: 5px;margin: 2px;} 
</style></head> 
<body >< input type = "button”value = "将 图 像 裁 前 成 一 个 内 投影 图 形 " id= "myBtnClip"/> 
<div><h3 > 世界 绝 美 风光 </h3 ></div></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , $ ("div"). css("-webkit-clip-path"， 
"inset(35% 0 15% 0 round 0 24% 0 26%)") 用 于 指定 裁剪 或 保留 的 区 域 是 一 个 内 投影 图 形 , 其 中 
inset(35% 0 15% 0 round 0 24% 0 26%) 的 值 对 应 inset(< top > <right > <bottom> < left > round 
<top-radius> <right-radius > < bottom-radius > < left-radius >) 。 


此 实例 的 源 文 件 名 是 myHtmlB094. html。 


124 ”将 绝对 定位 元 素 裁剪 成 手柄 式 图 形 


此 实例 主要 使 用 polygon() 方 法 设置 绝对 定位 元 素 的 clip-path 属性 ,从 而 将 绝对 定位 元 素 的 部 分 
区 域 裁剪 成 手柄 风格 的 图 形 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 将 显示 带 背 景 图 像 的 绝对 
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定位 元 素 (div 块 ), 单 击 “ 将 图 像 裁剪 成 一 个 手柄 图 形 ” 按 钮 . 则 该 div 块 的 周围 被 裁剪 ,指定 部 分 保留 
成 一 个 手柄 风格 的 图 形 ,如 图 124-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 124-1 


<! doctype html >< html >< head >< meta charset = "UTF - 8"> 
< script src= "js/jquery - 3.1.1.min. js"></script>< script language = "javascript"> 
$ (document). ready(function() { 
$ ("#myBtnClip").click(function() { // 将 图 像 裁剪 成 一 个 手柄 图 形 
$("div").css("- webkit ~ clip ~ path", "polygon(0% 0%, 100% 0%, 100% 75%, 78% 75%, 90% 
100%, 40% 75%, 0% 75%)"); 
D2}); 
</script > 


<style type= "text/css"> 


div {width: 412px; height: 323px; border - radius: 5px;position: absolute; 


background - image: url( img/B095. jpg) ;text - align: center;} 
input {width:410px; border ~ radius: 5px;margin: 2px;} 
h3{color:yellow;} 


</style></head> 


<body>< input type = "button"” value = "将 图 像 裁 前 成 一 个 手柄 图 形 " id= "myBtnClip"/> 
<div><h3> 世 界 绝 美 风光 </h3 ></div></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , $ ("div"). css("-webkit-clip-path"， 
"polygon(0% 0%, 100% 0%, 100% 75%, 78% 75%, 90% 100%, 40% 75%, 0% 75%)") 用 于 指 
定 裁剪 或 保留 的 区 域 是 一 个 手柄 风格 的 图 形 , 其 中 polygon(0% 0%, 100% 0%, 100% 75%,，78% 
75%，90% 100%, 40% 75%, 0% 75%) 以 逗号 分 隔 的 每 对 值 表示 以 图 像 的 左上 角 为 起 点 沿 顺 时 针 
方向 的 每 个 拐点 的 坐标 值 , 该 坐标 值 的 前 一 个 x 坐标 是 $$ ("div") 宽 度 的 百分比 值 ,后 一 个 y 坐标 是 
$C"div") 高 度 的 百分比 值 。 


此 实例 的 源 文 件 名 是 myHtmlB095. html。 


125 根据 指定 的 位 置 和 大 小 截取 图 片 内 容 


此 实例 主要 设置 子 元 素 的 object-position 属性 ,从 而 实现 根据 指定 的 位 置 和 大 小 截取 图 片 的 内 
容 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,如 果 在 文本 框 中 输入 或 选择 一 个 数字 ,将 在 下 面 以 
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带 圈 的 形式 显示 输入 的 数字 ,如 图 125-1 所 示 。 例 如 2、9、9、6 这 带 圈 数 字 实 际 上 是 4 幅 图 像 , 它 
们 都 是 根据 指定 的 位 置 和 大 小 从 一 幅 图 像 中 截取 出 来 的 。 et te 
百 2 口 x 
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<!doctype html >< html ><head >< meta charset = "UTF - 8"> 
<script src= "js/jquery-3.1.1.min. js"></script>< script language = "javascript"> 
$ (document). ready(function() { 
$ ("input"). change(function() { 
var value = this. value. trim() #1; 
if (!value || value <1000 || value > 9999) { value = 1283; } 
this. value = value; 
this. value. split(""). forEach(function (num, index) { 
$ (".num")[index].className = "num num" + num; });});}); 
</script> 
<style> 
.num { width: 40px;height: 40px; object - fit: none;object - position: 0 0; 
— webkit ~ transition: object - position .25s;} 
-num0 { } 
.numl {object - position; 
.num2 {object - position: 
.num3 {object - position: 0 - 120px;} 
.num4 {object - position: 0 — 160px;} 


0 -40px;} 
0 
0 
0 
.num5 {object ~ position: 0 ~ 200px;} 
0 
0 
0 


— 80px;} 


.num6 {object - position: 0 — 240px;} 
.num7 {object - position: 0 - 280px;} 
.num8 {object - position: 0 - 320px;} 
.num9 {object - position: 0 — 360px;} 
.myContainer { margin: auto;width: - webkit ~ fit - content; } 
div { width: 300px; } 
</style></head> 
<body><p>< strong> 支 持 显 示 的 数字 是 (1000 一 9999) : < input type = "number" value = "1283" min = "1000" 
max= "9999"></strong></p> 
<div><p class = "myContainer"> 
< img src= "img/B139.png”class = "num numl"> 
< img src= "img/B139. png" class = "num num2"> 
< img src = "img/B139. png" class = "num num8"> 
< img src= "img/B139. png" class = "num num3"></p></div></body></html> 





上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,< img src 一 "img/B139. png”class 一 
"num numl"> 表 示 在 B139. png 图 像 中 的 “0 一 40px” 位 置 截 取 “width: 40px;height: 40px” 大 小 的 图 
像 , 即 带 圈 数字 1。 

此 实例 的 源 文件 名 是 myHtmlB139. html。 
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126 ”通过 裁剪 方式 获取 大 图 像 的 局 部 内 容 


此 实例 主要 通过 设置 clip 属性 实现 以 裁剪 的 方式 显示 整个 图 像 的 部 分 内 容 。 当 在 Google 
Chrome 浏览 器 中 显示 该 页 面 时 ,默认 的 五 角 星 以 灰色 显示 ,如 图 126-1 所 示 ; 将 鼠标 指针 放 在 五 角 星 
上 , 则 显示 黄色 的 五 角 星 ,如 图 126-2 所 示 。 灰 色 的 五 角 星 和 黄色 的 五 角 星 实际 上 都 在 B163. png 中 ， 
只 是 在 显示 时 进行 了 裁剪 。 有 关 此 实例 的 主要 代码 如 下 。 

面 = 已 文 
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请 将 鼠标 放 在 五 角 星 图 片上 试 试 ， 奖 
javascript 
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<!doctype html ><html >< head >< meta charset = UIF -8> 
< style type = "text/css"> 
.clip a { width: 20px;height: 20px; } 


/* 剪裁 上 半 部 分 的 五 角 星 */ 

.clip a img { border: 0;position: absolute; clip: rect(0 20px 20px 0);} 

/* 剪裁 下 半 部 分 的 五 角 星 * / 

.clip_a:hover img { margin- top: - 20pxiclip: rect(20px 20px 40px 0); } 
</style></head> 


<body >< span > 请 将 鼠标 放 在 五 角 星 图 片上 试 试 : </span> 
<a href = "javascript:" class = "clip_a">< img src = "img/B163. png"/></a></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,clip: rect(0 20px 20px 0) 用 于 裁剪 
灰色 的 五 角 星 。 在 CSS 中 ,clip 属性 用 于 剪裁 绝对 定位 元 素 , 对 于 一 个 绝对 定位 元 素 ,在 这 个 矩形 内 
的 内 容 才 可 见 , 超 出 了 这 个 剪裁 区 域 的 内 容 会 根据 overflow 属性 的 值 来 处 理 , 剪 裁 区 域 可 能 比 元 素 的 
内 容 区 大 ,也 可 能 比 内 容 区 小 。clip 属性 的 语法 格式 如 下 。 


clip:shape| auto| inherit 


其 中 ,各 属性 值 的 意义 如 下 。 

(1) shape: 该 属性 值 设 置 元 素 的 形状 ,例如 rect (top right bottom left) 。 
(2) auto: 默认 值 , 表 示 不 应 用 任何 剪裁 。 

(3) inherit : 该 属性 值 规定 应 该 从 父 元 素 继承 clip 属性 的 值 。 

此 实例 的 源 文件 名 是 myHtmlB188. html。 


127 使 用 谈 思 实现 以 不 规则 形状 裁剪 图 像 


此 实例 主要 通过 设置 -webkit-mask-box-image 属性 实现 根据 不 规则 形状 裁剪 图 像 。 当 在 Google 
Chrome 浏览 器 中 显示 该 页 面 时 将 显示 未 裁剪 的 图 像 ; 单 击 “ 裁 前 图像 ”按钮 ,将 按照 如 图 127-1 所 示 
的 形状 裁剪 图 像 ,效果 如 图 127-2 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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<!doctype html >< html >< head >< meta charset = "UTF — 8"> 
< script src= "js/jquery- 3.1.1.min. js"></script>< script type= "text/javascript"> 
$ (function(){ 
$ ("#myInitial").click(function(){ // 原 始 图 像 
$(".myImage").css(" — webkit — mask ~ box — image","initial"); 
DD); 
$ ("#myMask").click(function(){ // 裁 前 图 像 
$(".myImage").css(" — webkit — mask — box — image", "url(img/B302. png)"); 
1);}); 
</script > 
<style type= "text/css"> 
.myImage{ margin - top:2px; overflow: hidden; width: 350px; height:256px; 
background ~ image: url(img/B114. jpg) ;background- size: 100% 100%;} 
button{ width:170px; } 
</style></head> 
<body>< div align = "center"> 
<button id = "myInitial"> 原 始 图 像 </button> <button id = "myMask"> 裁 前 图 像 </button> 
<div class = "myImage"></div></div></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , $ (". mylmage"). css ("-webkit- 


mask-box-image","url(img/B302. png)") 用 于 按照 B302. png 图 像 的 形状 裁剪 当前 $('img'") 图 像 。 
需要 说 明 的 是 ,-webkit-mask-box-image 不 是 标准 属性 ,在 正式 产品 中 使 用 时 需要 慎重 考虑 。 
-webkit-mask-box-image 的 语法 格式 如 下 。 


— webkit ~ mask — box — image: < mask ~ box ~- image> [< top> <right > < bottom> < left> <x— repeat > <y- repeat >] 














中 ,<mask-box-image > 可 以 是 <uri> | <gradient > | none,<top ><right><bottom ><left> 可 以 


是 <length> | <percentage >,< x-repeat > < y-repeat > 可 以 是 repeat | stretch | round。 


此 实例 的 源 文件 名 是 myHtmlB339. html。 


128 ”使 用 谈 时 实现 以 png 图 像 形状 裁剪 图 像 


此 实例 主要 通过 设置 -webkit-mask-image 属性 实现 使 用 遮 单 技术 根据 png 图 像 的 形状 裁剪 图 





像 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 将 显示 未 裁剪 的 图 像 ; 单 击 “ 使 用 Google Glass 眼 
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镜 PNG 图 标 裁剪 图 像 特效 一 "按钮 , 则 图 像 按照 png 图 标的 形状 裁剪 后 的 效果 如 图 128-1 所 示 ; 单 击 
“使 用 Google Glass 眼镜 PNG 图 标 裁剪 图 像 特效 二 "按钮 ,图 像 按照 png 图 标的 形状 裁剪 后 的 效果 如 
图 128-2 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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<! doctype html >< html >< head >< meta charset = "UTF - 8"> 
< script src= "js/jquery- 3.1.1.min. js"></script >< style type = "text/css"> 
button { width: 512px; margin: 2px; } 
p { text— align: center; } 
* { margin: 0; } 
</style></head> 
<body><p><button onclick =" $ ('img').css('— webkit — mask — image','url( img/B207A.png)')"> 使 用 Google 
Glass 眼镜 PNG 图 标 裁剪 图 像 特效 一 </button> 
<button onclick =" $ ('img').css('— webk 让 - mask- image'，'url(img/B207B. png)')"> 使 用 Google Glass 
眼镜 PNG 图 标 裁 前 图像 特效 二 </button> 
<p><img src = "img/B207. jpg"/></p></p></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,$ ("img'). css('-webkit-mask-image' ， 
"url(img/B207A. png)')" 用 于 实现 当前 $('img') 图 像 按照 B207A. png 图 标的 形状 进行 裁剪 。 在 
CSS 中 , 遮 单 提供 了 一 种 基于 像素 级 别 的 可 以 控制 元 素 透 明度 的 能 力 , 类 似 于 24 位 png 或 32 位 png 
中 的 alpha 透明 通道 的 效果 。 图 像 是 由 R.G、B 几 个 通道 以 及 在 每 个 像素 上 定义 的 颜色 组 成 的 。 在 它 
们 之 上 还 有 第 4 个 通道 , 即 alpha 通道 ,通过 亮度 定义 每 个 像素 上 的 透明 度 。 白 色 意味 着 不 透明 ,黑色 
意味 着 透明 , 介 于 黑白 之 间 的 灰色 表示 半 透 明 。 在 html 元 素 中 使 用 css 遮 单 时 不 需要 给 图 片 应 用 一 
个 alpha 通道 ,只 需要 设置 元 素 的 -webkitrmask-image 属性 .例如 -webkit-mask-image: url(mouse. 
png) ,这 样 就 能 够 从 图 片 遮 音 里 读 出 图 片 的 透明 信息 ,然后 应 用 到 html 元 素 上 。 

此 实例 的 源 文件 名 是 myHtmlB207. html。 
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129 ”以 不 同位 置 为 原点 放大 或 缩小 图 像 


此 实例 主要 通过 设置 元 素 的 transform-origin 属性 实现 以 左上 角 ( 或 中 心 位 置 ) 为 原点 对 图 像 进 
行 放 大 或 缩小 。 在 CSS3 中 ,zoom 和 scale 这 两 个 方法 都 是 用 于 对 元 素 进 行 缩放 ,但 两 者 除了 兼容 性 
之 外 还 有 一 些 不 同 的 地 方 , 例 如 zoom 缩放 会 将 元 素 保持 在 左上 角 ,而 scale 默认 是 中 间 位 置 ,可 以 通 
过 transform-origin 来 设置 ; 另外 两 者 执行 的 泻 染 顺序 也 不 同 ,zoom 可 能 影响 到 盒子 的 计算 。 当 在 
Google Chrome 浏览 器 中 显示 该 页 面 时 , 单 击 “ 以 左上 角 为 原点 缩小 图 像 ”按钮 .图像 缩 小 至 80% 后 的 
效果 如 图 129-1 所 示 ; 单 击 * 以 图 像 中 心 为 原点 缩小 图 像 "按钮 ,图 像 缩 小 至 80% 后 的 效果 如 图 129-2 
所 示 。 有 关 此 实例 的 主要 代码 如 下 。 

:| 口 x [ 酝 一 口 x 
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图 129-1 图 129-2 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<script src= "js/jquery -3.1.1.min. js"></script >< script language = "javascript"> 
$ (document). ready(function() { 
$ ("#myBtnLeft").click(function() { // 以 左上 角 为 原点 缩小 图 像 
$ ("img").css("transform— origin", "top left"); 
$ ("img").css("transform", "scale(0.8)"); 
D); 
$ ("#myBtnCenter"). click(function() { // 以 图 像 中 心 为 原点 缩小 图 像 
$ ("img").css("transform— origin"”, ""); 
$ ("img").css("transform", "scale(0.8)"); });}); 
</script > 
<style type = "text/css"> 
divf width:400px; height:250px;border: 1px solid gray; border - radius: 5px; } 
img{ border - radius: 5px; } 
input { width: 195px;} 
</style></head> 
<body><p>< input type= "button" value= "以 左上 角 为 原点 缩小 图 像 ” id = "myBtnLeft"/> 
< input type = "button" value = "以 图 像 中 心 为 原点 缩小 图 像 ”id = "myBtnCenter"/></p> 
<div>< img src = "img/B128. jpg"></div></body></html > 





上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , transform-origin 属性 用 于 设置 
transform 元 素 的 基点 位 置 transform-origin 属性 的 语法 格式 如 下 。 
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transform ~ origin: x- axis y- axis z- axis; 


其 中 ,各 属性 值 的 说 明 如 下 。 

(1) x-axis: 用 于 定义 视图 被 置 于 X 轴 的 何 处 ,可 能 的 值 为 left、center.right、length、% 等 。 
(2) y-axis: 用 于 定义 视图 被 置 于 立轴 的 何 处 ,可 能 的 值 为 top、center、bottom,length、”%。 
(3) z-axis: 用 于 定义 视图 被 置 于 2Z 轴 的 何 处 ,可 能 的 值 为 length。 

此 实例 的 源 文件 名 是 myHtmlB128. html。 


130 通过 上 下 按 动 鼠标 滚轮 实现 图 像 缩放 


此 实例 主要 在 img 元 素 的 鼠标 滚轮 mousewheel 事件 中 使 用 scale( ) 方 法 ,从 而 实现 上 下 按 动 鼠 
标 滚轮 放大 或 缩小 图 像 的 效果 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,如 果 和 鼠标 指针 悬浮 在 
图 像 上 ,向 下 滑动 深 轮 则 缩小 图 像 ,如 图 130-1 所 示 ; 向 上 滑动 滚轮 则 放大 图 像 , 如 图 130-2 所 示 。 有 
关 此 实例 的 主要 代码 如 下 。 
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图 130-1 图 130-2 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<script src= "js/jquery -3.1.1.min.js"></script >< script type = "text/javascript"> 
$ (function() { 


var myWheel = 0, myFactor = 1; //myFactor 为 缩放 因子 
$ ('img').on( 'mousewheel', function() { // 为 img 元 素 添加 鼠标 滚轮 监测 事件 
myWheel = event. wheelDelta>0?1: -1; 
if (myWheel> 0) { // 鼠 标 滚轮 向 上 滚动 
myFactor += 0.1; 
} else if (myWheel <0) { // 鼠 标 滚轮 向 下 滚动 


myFactor -= 0.1; } 
$ ('img').css('— webkit ~ transform', 'scale('+ myFactor +')"'); });}); 
</script > 
<style type= "text/css"> 
div { width: 400px; height: 250px; 
/x* 超出 盒子 范围 自动 裁剪 * / 
overflow: hidden; margin: 10px auto;border — radius: Spx; } 
img { border - radius: 5px; } 
</style></head> 
<body>< div>< img src = "img/B262. jpg"/></div></body ></html > 
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上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 .$('img'). css('-webkit-transform'， 
'scale(' 十 myFactor 十 ')") 表 示 根 据 缩放 因子 myFactor 放大 或 缩小 图 像 ,缩放 因子 myFactor 是 根据 鼠 


标 滚轮 mousewheel 的 状态 进行 设置 的 。 在 CSS3 中 scale() 方 法 用 于 对 元 素 进行 缩放 ,该 方法 的 语法 
格式 如 下 。 




















scale(x, y) 
其 中 ,x 表示 水 平方 向 的 缩放 倍数 ; y 表示 垂直 方向 的 缩放 倍数 ,y 是 一 个 可 选 参数 ,如 果 没 有 设 


置 此 参数 , 则 表示 x、y 两 个 方向 的 缩放 倍数 是 一 样 的 。 
此 实例 的 源 文 件 名 是 myHtmlB262. html。 





131 对 图 像 局 部 区 域 进行 毛 玻璃 状 的 模糊 


此 实例 主要 设置 子 元 素 的 background 属性 值 为 inherit, 从 而 实现 对 图 片 的 局 部 区 域 进行 毛 玻 璃 
状 的 模糊 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 , 拖 动 左上 角 的 方块 到 图 像 的 任意 位 置 ,例如 
人 像 的 左 脸 , 则 该 左 脸 以 模糊 状态 显示 ,其 他 部 分 仍然 以 清晰 状态 显示 ,如 图 131-1 所 示 。 有 关 此 实例 
的 主要 代码 如 下 。 
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图 131-1 


<!doctype html >< html >< head >< meta charset = "UTF — 8"> 
<script src= "js/jquery -3.1.1.min.js"></script >< script language = "javascript"> 
$ (function() { 
var _move = false; // 移 动 标记 
Var _x, _y; // 鼠 标 指针 离 元 素 左上 角 的 相对 位 置 
$(".drag").click(function() { 
//alert("click"); // 单 击 ( 松 开 后 触发 ) 
}). mousedown(function(e) { 
_move= true; 
_X= e.pageX- parseInt( $ (".drag").css("left")); 
_Y= e.pageY- parseInt( $ (".drag").css("top")); 
]) 
$ (document). mousemove(function(e) { 
if (_move) { 
var x=e.pageX — _x; // 移 动 时 根据 鼠标 指针 的 位 置 计算 元 素 左 上 角 的 绝对 位 置 
Var y= e.pageY— _y; 
$(".drag").css({ top: Y left: x });  // 元 素 的 新 位 置 
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// 动 态 偏 移 . drag 元 素 背 景 图 片 的 backgroundPosition 位 置 ,使 其 与 背景 图 片 重合 
var myX= (—1xx); var myY= (—1xy); 
$ (".drag").css("backgroundPosition", myX+ "px " +myY+ "px"); 
} }).mouseup(function() { 
_move = false; });}); 
</script > 
<style> 
.box { width: 385px; height: 235px;background: url(img/B004. jpg) no - repeat; 
position: relative; overflow: hidden;} 
.drag { width: 100px; height: 100px; background: inherit; 
— webkit — filter: blur(5px); cursor: — webkit — grab; 
position: absolute;overflow: hidden;top: 1px;left: 1px;} 
.drag:active { cursor: - webkit ~ grabbing; } 
</style></head> 
<body>< div class ="box"> <div id= "drag" class = "drag"></div></div> 
</body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,-webkit-filter: blur(5px) 用 于 
模糊 子 元 素 ; background: inherit 表示 子 元 素 的 背景 图 像 来 自 容器 的 背景 图 像 ; $ (". drag"). 
css("backgroundPosition",myX 十 "px" 十 myY 十 "px") 表 示 在 拖 动 子 元 素 时 从 backgroundPosition 
指定 的 位 置 截取 容器 的 背景 图 像 , 因 此 在 拖 动 方块 时 方块 显示 的 模糊 图 像 始终 是 下 面容 器 的 对 应 位 
置 的 背景 图 像 。 

此 实例 的 源 文件 名 是 myHtmlB140. html。 


132 ”对 图 像 和 颜色 以 差 值 混合 模式 生成 特效 


此 实例 主要 设置 元 素 的 mix-blend-mode 属性 为 difference, 从 而 实现 以 差 值 模式 混合 容器 的 背景 
颜色 和 图 像 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,<img > 元 素 显示 的 图 像 位 于 蓝 色 背 景 的 
容器 < div > 中 ; 单 击 “ 以 差 值 模式 混合 图 像 和 颜色 "按钮 . 则 图 像 和 蓝 色 经 过 差 值 模式 混合 后 的 效果 如 
图 132-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 132-1 
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<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<script src= "js/jquery - 3.1.1.min. js"></script >< script language = "javascript"> 
$ (document). ready(function() { 
$ ("#myBtnDifference") .click(function() { // 以 差 值 模式 混合 图 像 和 颜色 
$ ("img").css("mix— blend— mode", "difference"); 
D2})s 
</script> 
<style type= "text/css"> 
.box { width: 400px; height: 250px; border - radius: 10px; margin: 3px; 
background:blue; } 
img{ width: 350px; height: 200px; border - radius: 10px;} 
input { width: 400px; border — radius: 2px; padding: 3px; margin: 2px;} 
</style></head> 
<body >< div>< input type= "button" value = "以 差 值 模式 混合 图 像 和 颜色 "id= 
"myBtnDifference"/></div> 
<div class = "box">< img src = "img/B156B. jpg"></div></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , $("img"). css("mix-blend-mode"， 
"difference") 表 示 以 difference 模式 混合 图 像 和 颜色 。 在 CSS3 中 mix-blend-mode 属性 主要 用 于 源 
与 背景 颜色 或 背景 图 像 的 混合 ,目前 浏览 器 支持 16 种 混合 模式 , 即 normal、multiply、screen、overlay、 
darken lighten colordodge color-burn hard-light, soft-light .difference、exclusion .hue saturation 、 
color\luminosity, 其 中 每 一 种 混合 模式 都 有 其 各 自 的 计算 模式 。 各 混合 模式 的 功能 如 下 。 

(1) normal: 正常 模式 ,此 模式 将 混合 色 的 像素 通过 所 用 的 颜色 显示 出 来 。 

(2) multiply: 正片 释 底 模式 ,此 模式 将 查看 每 个 通道 中 的 颜色 信息 ,并 将 基色 与 混合 色 复 合 。 

(3) screen: 滤 色 模式 , 滤 色 模式 与 正片 稚 底 模式 正好 相反 , 它 将 图 像 的 基色 与 混合 色 结 合 起 来 产 
生 比 两 种 颜色 都 浅 的 第 3 种 颜色 。 

(4) overlay: 登 加 模式 , 谷 加 模式 把 图 像 的 基色 与 混合 色相 混合 产生 一 种 中 间 色 。 

(5) darken: 变 暗 模式 ,此 模式 将 查看 每 个 通道 的 颜色 信息 ,并 选择 基色 或 混合 色 中 较 暗 的 颜色 
作为 结果 色 。 

(6) lighten: 变 亮 模式 ,此 模式 将 查看 每 个 通道 的 颜色 信息 ,并 选择 基色 或 混合 色 中 较 亮 的 颜色 
作为 结果 色 。 

(7) color-dodge: 颜色 减 淡 模 式 , 此 模式 将 查看 每 个 通道 的 颜色 信息 ,并 通过 减 小 对 比 度 使 基色 
变 亮 以 反映 混合 色 , 与 黑色 混合 不 会 发 生变 化 。 

(8) color-burn: 颜色 加 深 模式 ,此 模式 将 查看 每 个 通道 的 颜色 信息 ,并 通过 增加 对 比 度 使 基色 变 
瞳 以 反映 混合 色 ,与 白色 混合 不 会 产生 变化 。 

(9) hard-light: 强 光 模式 , 强 光 模 式 将 产生 一 种 强 光 照射 的 效果 。 如 果 混 合 色 的 颜色 比 基 色 的 
颜色 的 像素 更 亮 一 些 ,那么 结果 色 的 颜色 将 更 亮 ; 如 果 混 合 色 的 颜色 比 基 色 的 颜色 的 像素 更 暗 一 些 ， 
那么 结果 色 将 更 暗 。 

(10) soft-light: 柔 光 模 式 , 柔 光 模式 会 产生 一 种 柔 光 照射 的 效果 。 如 果 混 合 色 的 颜色 比 基 色 的 
颜色 的 像素 更 亮 一 些 , 那 么 结果 色 将 更 亮 ; 如 果 混 合 色 的 颜色 比 基 色 的 颜色 的 像素 更 暗 一 些 ,那么 结 
果 色 的 颜色 将 更 暗 , 使 图 像 的 亮度 反差 增 大 。 

(11) difference: 差 值 模式 ,此 模式 将 查看 每 个 通道 的 颜色 信息 , 差 值 模式 将 从 图 像 中 基色 的 颜色 
的 亮度 值 减 去 混合 色 的 颜色 的 亮度 值 . 如 果 结 果 为 负 . 则 取 正 值 .产生 反 相 效果 。 

(12) exclusion: 排除 模式 ,排除 模式 与 差 值 模式 相似 ,但 是 具有 高 对 比 度 和 低 饱和 度 的 特点 , 比 
用 差 值 模式 获得 的 颜色 要 柔和 ,明亮 一 些 。 
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(13) hue: 色相 模式 ,色相 模式 只 用 混合 色 的 颜色 的 色相 值 进行 着 色 , 而 使 饱和 度 和 亮度 值 保持 
不 变 。 
(14) saturation: 饱和 度 模式 ,饱和 度 模式 的 作用 方式 与 色相 模式 相似 , 它 只 用 混合 色 的 颜色 的 
饱和 度 值 进行 着 色 , 而 使 色相 值 和 亮度 值 保持 不 变 。 

(15) color: 颜色 模式 ,颜色 模式 能 够 使 用 混合 色 的 颜色 的 饱和 度 值 和 色相 值 同 时 进行 着 色 ,而 使 
基色 的 颜色 的 亮度 值 保持 不 变 。 颜 色 模 式 可 以 看 成 是 饱和 度 模式 和 色相 模式 的 综合 效果 。 

(16) luminosity: 亮度 模式 ,亮度 模式 能 够 使 用 混合 色 的 颜色 的 亮度 值 进行 着 色 ,而 保持 基色 的 
颜色 的 饱和 度 值 和 色相 值 不 变 ,其 实 就 是 用 基色 中 的 色相 和 饱和 度 以 及 混合 色 的 亮度 创建 结果 色 。 

此 实例 的 源 文件 名 是 myHtmlB159. html。 


133 ”综合 两 种 滤 镜 实现 以 X 光 效 果 显 示 图 像 


此 实例 主要 通过 使 用 grayscale() 和 invert() 两 种 滤 镜 方法 实现 以 X 光 效果 显示 图 像 。 当 在 
Google Chrome 浏览 器 中 显示 该 页 面 时 将 显示 未 使 用 滤 镜 处 理 的 图 像 ; 单 击 * 灰 度 滤 镜 ”按钮 ,图 像 在 
使 用 灰 度 滤 镜 处 理 后 的 效果 如 图 133-1 所 示 ; 单 击 “ 反 色 滤 镜 " 按 钮 ,图 像 在 使 用 反 色 滤 镜 处 理 后 的 效 
果 如 图 133-2 所 示 ; 单 击 *X 光 滤 镜 ” 按 钮 ,图 像 在 同时 使 用 灰 度 滤 镜 和 反 色 滤 镜 处 理 后 的 效果 如 
图 133-3 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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© Dfile///D/myWork/myHtmlB148. 冤 三 


藉 度 光 注 反 色 送 讽 XX 更 仙 
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© Dfile///D/myWork/myHtmlB148. 祝 三 © Dfile///D/myWork/myHtmlB8148. 字 三 
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厅 度 划 广 | 反 包 尖 镇 | | 。 ”X 光 六 针 























图 133-2 图 133-3 
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<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<script src= "js/jquery - 3.1.1.min. js"></script>< script language = "javascript"> 
$ (document). ready(function() { 
$ ("#myBtnGray").click(function() { // 灰 度 滤 镜 
$ ("img").css("— webkit- filter", "grayscale(100% ) "); 
Ds; 
$ ("#myBtnInvert"). click(function() { // 反 色 滤 镜 
$ ("img").css("— webkit- filter", " invert(100% )"); 


D); 
$ ("#myBtnXLight"). click( function() { //X 光 滤 镜 
$ ("img").css(" — webkit- filter", "grayscale(100% ) invert(100% )"); });}); 
</script> 
<style type= "text/css"> 
img { width: 405px;height: 250px; border - radius: 5px; } 
input { width: 126px;border - radius: 2px;padding: 3px; margin: 2px;} 
</style></head> 
<body>< div>< input type = "button” value = " 灰 度 滤 镜 ”id = "myBtnGray"/> 
< input type= "button" value = " 反 色 滤 镜 " id = "myBtnInvert"/> 
< input type = "button”value = "X 光 滤 镜 ”id= "myBtnXLight"/></div> 
< img src= "img/B148. jpg"> 
</body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , $ ("img"). css("-webkit-filter"， 
"grayscale(100%)") 表 示 以 灰 度 滤 镜 处 理 图 像 ,grayscale(100%) 方 法 的 参数 值 在 0 一 100% 之 间 , 参 
数值 越 大 , 灰 度 等 级 越 高 ; $ ("img"). css("-webkit-filter","invert(100%)") 表 示 以 反 色 滤 镜 处 理 图 
像 ,invert(100%) 方 法 的 参数 值 为 0 一 100% ,参数 值 越 大 , 反 色 程 度 越 高 ; $ ("img"). css("-webkit- 
filter", "grayscale(100%) invert(100%)") 表 示 同 时 使 用 灰 度 滤 镜 和 反 色 滤 镜 处 理 图 像 , 从 而 使 图 像 
产生 XX 光 效 果 。 

此 实例 的 源 文件 名 是 myHtmlB148. html。 


134 对 元 素 下 层 的 其 他 元 素 使 用 滤 镜 特效 


此 实例 主要 通过 设置 元 素 的 backdroprfilter 属性 实现 对 元 素 下 层 的 其 他 元 素 使 用 滤 镜 特效 。 当 
在 Google Chrome 浏览 器 中 显示 该 页 面 时 , 单 击 * 反 相 滤 镜 ”按钮 ,在 指定 元 素 中 使 用 反 相 滤 镜 对 下 层 
元 素 产 生 的 特效 如 图 134-1 所 示 ; 单 击 * 模 糊 滤 镜 ”按钮 ,在 指定 元 素 中 使 用 模糊 滤 镜 对 下 层 元 素 产 生 
的 特效 如 图 134-2 所 示 ; 单 击 “ 反 色 滤 镜 ” 按 钮 在 指定 元 素 中 使 用 反 色 滤 镜 对 下 层 元 素 产生 的 特效 如 
图 134-3 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 


站 myHtmlB131heml x 
§ 3 CC Dfile///D/myWorW/myHtn 字 三 


重负 于 广 后 色 直入 | 














<> HTML5+CSS3 炫 酷 应 用 实例 集锦 









DD myHtmls131html x 
3 CC Dfile///D/myWork/myHtnYY 三 


口 myHtmlBl31html x 
3 C Dfie///D/myWork/myHtniY 三 


反 相 雪 午 模 糙 迁 资 ”| 反 色相 入 _] 











图 134-2 图 134-3 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<script src= "js/jquery- 3.1.1.min. js"></script>< script language = "javascript"> 
$ (document). ready(function() { 
$ ("#myBtnHue"). click(function() { // 反 相 滤 镜 
$(".content").css("backdrop— filter", "hue - rotate(180deg)"); 
DD); 
$ ("#myBtnBlur").click(function() { // 模 糊 滤 镜 
$(".content").css("backdrop— filter", "blur(3px)"); 
Ds; 
$ ("#myBtnInvert").click(function() {  // 反 色 滤 镜 
$ (".content").css("backdrop— filter", "invert(1)"); });}); 
</script >< style type = "text/css"> 
.backdrop { width:350px; height:200px;background: url('img/A106.jpg');} 
.content {width:350px;height :150px; position: relative;top: 25$%; 
background: rgba(100, 150,100,0.35); } 
h3, p{padding - left: 10px;padding— top: 10px;color: yellow; font - size: 16px;} 
input{width:108px; border ~ radius: 5px;margin: 2px;} 
</style></head> 
<body >< input type = "button” value= " 反 相 滤 镜 ”id= "myBtnHue"/> 
< input type = "button" value = "模糊 滤 镜 ”id= "myBtnBlur"/> 
< input type = "button" value=" 反 色 滤 镜 " id= "myBtnInvert"/> 
<div class= "backdrop"><div class= "content"> 
<h3> 罗 帅 等 编著 </h3 ><p> HTML5 炫 酷 实例 集锦 </p></div></div></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,backdrop-filter 属性 用 于 对 添加 此 滤 
镜 的 元 素 的 下 层 元 素 实现 滤 镜 特效 ,而 filter 属性 只 能 对 添加 此 滤 镜 的 元 素 本 身 生效 ,无 法 应 用 到 其 
下 层 元 素 。 

backdrop-filter 可 以 使 用 的 滤 镜 主要 如 下 。 

(1) blur() 滤 镜 : 实现 高 斯 模糊 。 

(2) brightness() 滤 镜 : 实现 亮度 调整 。 

(3) contrast() 滤 镜 : 实现 对 比 度 调整 。 

(4) drop-shadow() 滤 镜 : 实现 阴影 特效 。 

(5) grayscale( ) 滤 镜 : 实现 灰 度 特效 。 

(6) hue-rotate() 滤 镜 : 实现 色相 旋转 。 
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(7) invert() 滤 镜 : 实现 反 色 。 

(8) opacity() 滤 镜 : 实现 透明 度 调 整 。 
(9) sepia() 滤 镜 : 实现 褐色 复古 特效 。 
(10) saturate() 滤 镜 : 调整 饱和 度 。 

此 实例 的 源 文 件 名 是 myHtmlB131. html。 


135 ”使 用 alpha 通道 对 元 素 实 现 半 透明 显示 


此 实例 主要 通过 设置 元 素 的 背景 颜色 的 alpha 通道 实现 以 半 透 明 的 效果 显示 文本 。 当 在 Google 
Chrome 浏览 器 中 显示 该 页 面 时 , 单 击 “ 不 透明 显示 ”按钮 .文本 的 不 透明 显示 效果 如 图 135-1 所 示 ; 单 
击 “ 半 透明 显示 ”按钮 ,文本 的 半 透 明显 示 效 果 如 图 135-2 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 





D myHtmlB106 html x DD myHtmlB106 html x 


“3 © Dfie///D/myWork/myHtmlB106 窜 三 ”3 © Dfie///D/myWork/myHtmlB1067Y? 
"+ | 











图 135-1 图 135-2 


<!doctype html >< html >< head > <meta charset = "UTF - 8"> 
<script src= "js/jquery - 3.1.1.min. js"></script > < script language = "javascript"> 
$ (document). ready(function() { 
$ ("#myBtnColor"). click(function() { // 不 透明 显示 
$("p").css("background— color", "rgb(93,91,205)"); 
D); 


$("#myBtnAlpha").click(function() { // 半 透明 显示 
$ ("p").css("background— color"，"rgba(93,91,205,0.5)"); });}); 
</script >< style> 


.box { background: #0099CC; width: 400px; height: 250px; 
background — image: url(img/B106.jpg); 
background — repeat: no— repeat; 
background - size: 100% 100%; display: flex; 
justify— content: center;align— items: center; 
border — radius: 5px;} 
p {text - indent: 35px; width: 300px; color: yellow; 
border - radius: 5px; padding: 20px; margin: 30px;} 
input {width: 193px;border - radius: 2px;margin: 2px;} 
</style></head> 
<body>< input type = "button” value = "不 透明 显示 ”id= "myBtnColor"/> 
< input type = "button" value=" 半 透明 显示 " id = "myBtnAlpha"/> 
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<div class= "box"><p> 朝 天 门 位 于 重庆 城 东北 长 江 、 嘉 陵 江 交汇 处 , 襟 带 两 江 ; 壁 牟 三 面 , 地 势 中 高 ,两 侧 渐 次 
向 下 倾斜 , 人 行 石 阶 沿 山 而 上 。 明 初 戴 易 扩建 重庆 旧 城 , 按 九 宫 八 卦 之 数 造 城 门 17 座 , 其 中 规模 最 大 的 一 座 城 
门 即 朝 天 门 。 门 上 原 书 四 个 大 字 " 古 渝 雄关 " 。 朝 天 门 ,为 历代 官 接 皇 帝 圣旨 的 地 方 , 因 古代 称 皇 帝 为 天 子 , 故 此 


而 得 名 。</p></div> </body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , $ ("p"). css ("background-color"， 
"rgba(93,91,205,0. 5)") 用 于 设置 p 元 素 的 背景 颜色 的 透明 度 为 0.5, 即 半 透 明 。 在 CSS3 中 ,可 以 通 
过 对 RGB 颜色 设 定 alpha 通道 的 方法 来 定义 RGBA 颜色 。 所 谓 RGBA 颜色 ,是 指使 用 红色 值 (R)、 
绿色 值 (G) 、 蓝 色 值 (B) .alpha 通道 值 (A) 来 定义 的 颜色 。 其 中 ,alpha 通道 值 的 范围 为 0 一 1. 0,0 表示 


完全 透明 ,1 表示 不 透明 。 
此 实例 的 源 文 件 名 是 myHtmlB106. html。 


136 通过 设置 HSLA 实现 元 素 的 半 透 明显 示 





此 实例 主要 通过 对 元 素 背 景 的 HSLA 颜色 设置 alpha 通道 实现 以 半 透 明 的 效果 显示 文本 。 当 在 
Google Chrome 浏览 器 中 显示 该 页 面 时 , 单 击 “不 透明 显示 ”按钮 ,文本 的 不 透明 显示 效果 如 图 136-1 
所 示 ; 单 击 “ 半 透明 显示 ”按钮 ,文本 的 半 透 明显 示 效 果 如 图 136-2 所 示 。 有 关 此 实例 的 主要 代码 


如 下 。 








DD myHtmlB107 .html x 


全 3 C Dfiley//D/myWork/myHtmlB107 字 


+ 
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D filey//D/myWork/myHtmlB107 


直送 明志 不 过 明 8 示 








<!doctype html >< html >< head >< meta charset = "UTF - 8"> 


< script src= "js/jquery- 3.1.1.min. js"></script>< script language = "javascript"> 


$ (document). ready(function() { 
$ ("#myBtnColor"). click(function() { // 不 透明 显示 
$ ("p").css("background— color", "hsl(120,100% ,50%)"); 
//$ ("p").css("color", "hsl(0,100% ,100%)"); 


D; 
$ ("#myBtnHsla").click(function() { // 半 透明 显示 
$("p").css("background— color", "hsla(120,100% ,50% ,0.5)"); });}); 
</script> 
<style> 


.box { background: #0099CC;width: 400px; height: 250px; 
background - image: url(img/B106. jpg); 
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background — repeat: no - repeat;background— size: 100% 100%; 
display: flex; justify- content: center; 
align- items: center;border — radius: 5px;} 
p {text — indent: 35px;width: 300px; color: yellow; 
border - radius: 5px;padding: 20px;margin: 30px;} 
input {width: 193px;border - radius: 2px;margin: 2px;} 
</style></head> 
<body>< input type = "button” value = "不 透明 显示 " id= "myBtnColor"/> 
< input type = "button" value = " 半 透 明显 示 " id = "myBtnHsla"/> 
<div class = "box"><p> 朝 天 门 位 于 重庆 城 东北 长 江 、 嘉 陵 江 交汇 处 , 襟 带 两 江 ; 壁 全 三 面 ,地 势 中 高 ,两 侧 渐次 
向 下 倾斜 , 人行 石 阶 沿 山 而 上 。 明 初 戴 占 扩 建 重庆 旧 城 , 按 九 宫 八卦 之 数 造 城 门 17 座 , 其 中 规模 最 大 的 一 座 城 
门 即 朝 天 门 。 门 上 原 书 四 个 大 字 " 古 渝 雄关 " 。 朝 天 门 ,为 历代 官 接 皇 帝 圣旨 的 地 方 , 因 古 代称 皇帝 为 天 子 ,故此 
而 得 名 。</p></div></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , $ ("p"). css("background-color"， 
"hsla(120,100%,50% ,0.5)") 用 于 以 HSLA 颜色 的 形式 设置 半 透 明 的 p 元 素 背 景 颜色 。 在 CSS3 中 
除了 可 以 使 用 RGB 颜色 外 ,还 可 以 使 用 HSL 颜色 。HSL 颜色 使 用 色调 (H) 饱和 度 (S)、 亮 度 (L) 来 
定义 颜色 。 其 中 ,色调 值 用 0 或 360 表示 红色 、120 表示 绿色 、240 表示 蓝 色 。 当 色调 值 大 于 360 时 
(如 480), 则 实际 值 等 于 480 除 以 360 之 后 的 余数 120( 取 模 运 算 ) 。 饱 和 度 和 亮度 的 取 值 范围 均 为 
0% 到 100%。 用 户 可 以 通过 对 HSL 颜色 设 定 alpha 通道 的 方法 来 定义 HSLA 颜色 。HSLA 颜色 是 
使 用 色调 (H) .饱和 度 (S) ,亮度 (L)、alpha 通道 值 (A) 来 定义 颜色 ,alpha 通道 值 的 范围 为 0 一 1.0.0 
表示 完全 透明 ,1 表示 不 透明 。 

此 实例 的 源 文件 名 是 myHtmlB107. html。 


137 以 多 种 混合 模式 处 理 图 像 和 文字 颜色 


此 实例 主要 通过 设置 元 素 的 mix-blend-mode 属性 实现 以 多 种 混合 模式 将 容器 的 背景 图 像 和 文 
字 颜 色 混 合 以 生成 特效 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 将 显示 默认 的 背景 图 像 和 文 
字 , 单 击 “ 正 片 释 底 模式 "按钮 ,背景 图 像 和 文字 颜色 经 过 正片 释 底 模式 混合 后 的 效果 如 图 137-1 所 示 ; 
单 击 “ 排 除 模式 ”按钮 ,背景 图 像 和 文字 颜色 经 过 排除 模式 混合 后 的 效果 如 图 137-2 所 示 ; 单 击 “ 亮 度 
模式 "按钮 ,背景 图 像 和 文字 颜色 经 过 亮度 模式 混合 后 的 效果 如 图 137-3 所 示 ; 单 击 “ 强 光 模式 "按钮 ， 
背景 图 像 和 文字 颜色 经 过 强 光 模 式 混合 后 的 效果 如 图 137-4 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 











百 一 口 x 百 = DO x 
[DD myHtmlB160 html x 请 myHemlB160 html x 
© Dfile///D/myWork/myHtml8160. 字 | 三 © D filey//D/myWork/myHtmlB160. 字 三 
| 正片 台 记 模式 | 。 扣除 模式 高 度 模式 强 光 模式 正片 大 放 模 式 | | “排除 模式 亮度 模式 强 光 模 式 
”了 下 + 




















图 137-1 图 137-2 
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桓 -=- go x | - x 


[DD myHemlB150 html x DY myHtmlB160 html x 
© DD file///D/myWork/myHtml8160. 冤 © D file///D/myWork/myHtmlB160. 守 


正片 短语 模式 | 。 排除 模式 “| | ” 雄 度 模式 | 。 强 光 模 式 正片 天 二 模式 | 。 排除 模式 于 度 模式 | | 强 光 模 式 | 
3 + 
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<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<script src= "js/jquery - 3.1.1.min. js"></script >< script language = "javascript"> 
$ (document). ready(function() { 
$ ("#myBtnMultiply"). click(function() { // 正 片 琶 底 模 式 
$ ("p").css("mix ~ blend- mode"”, "multiply"); }); 
$ ("#myBtnExclusion").click(function() { // 排 除 模式 
$("p").css("mix -blend- mode", "exclusion"); }); 
$ ("#myBtnLuminosity").click(function() { // 亮 度 模式 
$ ("p").css("mix — blend— mode", "luminosity"); }); 
$ ("#myBtnHard- light").click(function() { // 强 光 模式 
$("p").css("mix ~ blend— mode"”, "hard— light"); });}); 
</script > 
<style type = "text/css"> 
p{ -webkit— text— stroke: 1px green;font— size: 90px; margin: 30px; color: green; 
text - shadow: lpx 1px lpx rgba(0, 0, 0, 0.15), 2px 2px lpx rgba(0, 0, 0, 0.25), 3px 3px 1px rgba(0, 
0, 0, 0.35), 4px 4px lpx rgba(0, 0, 0, 0.5); 
font - weight: bold; margin: 0;text — transform: capital ize; 
text - align: center;line - height: 250px; } 
.box { width: 400px; height : 250px; border - radius: 10px; margin: 3px; 
background: url( img/B158B. jpg) no - repeat center; } 
input { width: 92px; border - radius: 2px; padding: 3px;margin: 1px;} 
</style></head> 
<body><div> 
< input type= "button" value = "正片 琶 底 模式 ”id = "myBtnMultiply"/> 
< input type = "button" value = "排除 模式 ”id = "myBtnExclusion"/> 
< input type = "button" value = "亮度 模式 ”id = "myBtnLuminosity"/> 
< input type= "button" value = " 强 光 模式 " id = "myBtnHard light"/></div> 
<div class = "box"><p> 炫 酷 实例 </p></div></body></html > 





上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , $ ("p"). css("mix-blend-mode"， 
"multiply") 表 示 以 正片 释 底 模式 混合 容器 的 背景 图 像 和 文字 颜色 ; $("p"). css("mix-blend-mode"， 
"exclusion") 表 示 以 排除 模式 混合 容器 的 背景 图 像 和 文字 颜色 ; $ ("p"). css("mix-blend-mode"， 
"luminosity") 表 示 以 亮度 模式 混合 容器 的 背景 图 像 和 文字 颜色 ; $ ("p"). css("mix-blend-mode"， 
"hard-light") 表 示 以 强 光 模式 混合 容器 的 背景 图 像 和 文字 颜色 。 在 CSS3 中 ,mix-blend-mode 属性 
主要 用 于 源 与 背景 颜色 或 背景 图 像 的 混合 。 目 前 浏览 器 支持 16 种 混合 模式 , 即 normal、maultiply、 
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Screen .Overlay darken, lighten color-dodge color-burn, hard-light 、softrlight difference exclusion 、 


hue、saturation、color、luminosity, 其 中 每 一 种 混合 模式 都 有 各 自 的 计算 模式 。 
此 实例 的 源 文件 名 是 myHtmlB160. html。 


138 ”使 用 对 比 度 和 模糊 滤 镜 实现 相互 粘 滞 


此 实例 主要 通过 使 用 对 比 度 滤 镜 和 模糊 滤 镜 实现 两 球 相遇 时 的 粘 滞 特 效 。 当 在 Google Chrome 
浏览 器 中 显示 该 页 面 时 ,在 黑 球 向 左 、 蓝 球 向 右 相 背 离开 之 前 ,相互 之 间 会 产生 类 似 于 拖 尾 的 难 分 难 
舍 的 粘 灌 效 果 , 如 图 138-1 所 示 ; 在 黑 球 向 右 、 蓝 球 向 左 相 背 离开 之 前 ,相互 之 间 也 会 产生 类 似 于 拖 尾 
的 难 分 难 舍 的 粘 滞 效 果 ,如 图 138-2 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 138-1 图 138-2 


<! doctype html >< html >< head >< meta charset = "UTF - 8"> 
< style type = "text/css"> 

.myFilter{ position: absolute; top: 50%;1left: 50% ;transform: translate( ~ 50%, 
300px; height: 200px; — webkit- filter:contrast(20);background:white;} 

/* 绘 制 黑 球 */ 

.myFilter: :before{ content:""; position: absolute; border - radius: 50% ; width:120px; height:120px; 
background: black; top:40px; left:Opx;z— index:2; — webkit — filter:blur(6px); animation:moveLeft 20s 
ease— out infinite; } 

/* 绘 制 蓝 球 * / 

.myFilter: :after{ content:""; position: absolute; width: 80px; height: 80px; border - radius: 50%; 


background:blue; top:60px; right:0px; z- index:2; - webkit - filter:blur(6px); animation:moveRight 20s 
ease — out infinite; } 


— 50%); width: 


@keyframes moveLeft{ 50% { left:200px; } } /* 左 移 关 键 帧 位 置 */ 
@keyframes moveRight{ 50% { right:200px; } } /¥ 右 移 关键 帧 位 置 */ 
</style></head> 


<body>< div class = "myFilter"></div></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,contrast() 用 于 设置 对 象 的 对 比 度 ， 
如 果 在 . myFilter{ } 中 省 略 -webkitr-filter: contrast(20) 这 行 代码 , 则 运行 效果 如 图 138-3 所 示 ; blur() 
用 于 设置 对 象 的 模糊 程度 ,如 果 在 . myFilter: :before{ ) 和 . myFilter::after{) 中 省 略 -webkit-filter: 
blur(6px) 这 行 代码 , 则 运行 效果 如 图 138-4 所 示 。 

此 实例 的 源 文 件 名 是 myHtmlB300. html。 
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图 138-3 图 138-4 


139 ”使 用 滤 镜 对 不 规则 图 像 轮廓 添加 阴影 


此 实例 主要 通过 使 用 drop-shadow () 实 现 阴 影 沿 着 不 规则 的 图 像 轮廓 环绕 。 当 在 Google 
Chrome 浏览 器 中 显示 该 页 面 时 , 单 击 * 以 正常 效果 显示 图 像 " 按 钮 将 显示 png 图 像 在 未 添加 阴影 前 的 
效果 ; 单 击 “ 以 阴影 效果 显示 图 像 " 按 钮 ,png 图 像 添加 阴影 后 的 效果 如 图 139-1 所 示 。 有 关 此 实例 的 
主要 代码 如 下 。 
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图 139-1 图 139-2 


<!doctype html >< html >< head ><meta charset = "UTF - 8"> 


< script src= "js/jquery — 3.1.1.min.js"></script >< script language = "javascript"> 
$ (document). ready(function(){ 


$ ("#myBtnnormal"). click(function() { // 以 正常 效果 显示 图 像 
$ ("img").css(" ~ webkit- filter", "drop— shadow(Opx Opx Opx black)"); }); 
$ ("#myBtndrop") .click(function() { // 以 阴影 效果 显示 图 像 
$("img").css(" - webkit- filter", "drop— shadow(5px 5px 10px black)"); });}); 
</script> 
< style type = "text/css"> 


img { ~ webkit- filter: drop— shadow(5px 5px 10px black); } 
button { width: 190px; } 
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div { width: 400px; margin: 20px auto; text -align: center; } 
</style></head> 
<body><p><button id= "myBtnnormal"> 以 正常 效果 显示 图 像 </button > 
<button id= "myBtndrop"> 以 阴影 效果 显示 图 像 </button ></p> 
<div>< img src = "img/B302. png"></div></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 .-webkit-filter: drop-shadow (5px 5px 


10px black) 用 于 对 元 素 (图 像 ) 添 加 阴影 ,就 好 像 太阳 照 在 图 像 上 使 其 产生 影子 一 样 。drop-shadow() 
的 参数 格式 如 下 。 


drop - shadow(x 偏 移 量 , y 偏 移 量 ,模糊 半径 ,颜色 值 ) 

在 CSS3 中 ,大 多 数 时候 可 以 使 用 box-shadow 属性 来 实现 阴影 ,如 果 对 此 实例 中 的 图 像 使 用 
box-shadow: 5px 5px 10px black 来 实现 阴影 , 则 会 产生 如 图 139-2 所 示 的 阴影 ,这 可 能 有 违 初衷 。 

此 实例 的 源 文件 名 是 myHtmlB302. html。 


140 ”使 用 skew( ) 方 法 模拟 3D 风格 的 阴影 


此 实例 主要 在 after 选择 器 中 使 用 skew() 方 法 倾斜 阴影 ,从 而 使 阴影 呈现 3D 投影 的 特殊 效果 。 
当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,在 图 像 的 背后 将 呈现 一 块 倾斜 的 阴影 ,如 同 阳光 照射 在 
展板 图 像 上 产生 的 阴影 一 样 , 如 图 140-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 








[DD myHtmlB303 html 六 
3 © Dfiley/DVmyWorwmyHtmlt 安 三 





<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<style type= "text/css"> 
.myBox { top: 50% ;left: 50% ;transform: translate( — 50%, -50%); 
position: absolute; padding: 2px; background: white;border — radius: 5px; 
box - shadow: lpx 2px 4px rgba(0, 0, 0, 0.5); } 
.myBox img { border — radius: 5px; } 
.myBox:after { content: ''; position: absolute; width:100px; height: 80px; 
box - shadow: 100px 0 10px rgba(0, 0, 0, 0.2); 
bottom: 0;right:65px;z — index: - 1;transform: skew( - 40deg); } 
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</style></head> 





<body>< div class = "myBox">< img src = 'img/B268A. jpg'/></div></body > </htnl > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,box-shadow: 100px 0 10px rgba(0， 
0.2) 用 于 产生 阴影 ,100px 表示 阴影 偏离 X 轴 的 距离 ,10px 表示 阴影 半径 ,0. 2 表示 阴影 的 透明 


度 ; transform: skew( 一 40deg) 用 于 将 阴影 逆 时 针 倾斜 40° ,如 果 省 略 此 行 代码 , 则 阴影 将 以 矩形 效果 
显示 。 


此 实例 的 源 文件 名 是 myHtmlB303. html。 


141 在 圆 角 图 像 下 方 添加 渐变 的 倒影 图 像 


此 实例 主要 通过 设置 元 素 的 box-reflect 属性 实现 在 圆 角 图 像 的 下 方 添加 一 个 渐变 的 倒影 图 像 。 
当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 , 单 击 “添加 渐变 的 倒影 图 像 ” 


按钮 ,将 在 该 图 像 的 下 方 添 
加 一 个 渐变 的 倒影 图 像 ,如 图 141-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 141-1 


<!doctype html >< html >< head >< meta charset = "UTF — 8"> 
<script src= "js/jquery - 3.1.1.min. js"></script>< script language = "javascript"> 
$ (document). ready(function() { 
$("#myBtnReflect").click(function() { // 添 加 渐变 的 倒影 图 像 
$ ("img").css("— webkit- box - reflect", "below 0px linear — gradient(transparent, white)"); });}); 
</script > 
<style> 
img { border — top— left- radius: 5px; border ~ top — right ~ radius: Spx;} 
button{ width: 448px; margin: lpx; } 
</style></head> 


<body> <div>< button id = "myBtnReflect"> 添 加 渐变 的 倒影 图 像 </button></div> 
< img src= "img/B190. jpg"></body></html > 
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上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 . $ ("img"). css("-webkit-box- 
reflect", "below 0px linear-gradient(transparent, white)") 用 于 在 $ ("img") 元 素 的 下 方 以 0px 间 
隔 距 离 添 加 渐变 的 倒影 图 像 。 在 CSS3 中 ,box-reflect 属性 用 于 设置 或 检索 对 象 的 倒影 ,该 属性 的 语 
法 格式 如 下 。 








box - reflect: none | <direction> <offset >? <mask— box- image >? 


其 中 ,none 是 默认 值 ,表示 无 倒影 。< direction > 有 4 个 属性 值 ,above 指定 倒影 在 对 象 的 上 边 ; 
below 指定 倒影 在 对 象 的 下 边 ; left 指定 倒影 在 对 象 的 左边 ; right 指定 倒影 在 对 象 的 右边 。 

<offset > 表示 对 象 与 倒影 之 间 的 间隔 ,有 两 种 表示 方式 ,< length > 指 用 长 度 值 来 定义 倒影 与 对 象 
之 间 的 间隔 ,可 以 为 负 值 ; <percentage > 指 用 百分比 来 定义 倒影 与 对 象 之 间 的 间隔 ,可 以 为 负 值 。 

<mask-box-image > 表示 倒影 上 的 遮 音 层 , 有 6 种 形式 ,none 指 无 庶 蛙 图 像 ; < url > 指使 用 绝对 或 
相对 地 址 指定 遮 音 图像 ; < linear-gradient > 指使 用 线性 渐变 创建 遮 单 图 像 ; <radial-gradient > 指使 用 
径 向 (放射 性 ?渐变 创 建 遮 单 图 像 , <repeating-linear-gradient > 指使 用 重复 的 线性 渐变 创建 遮 音 图像 
<repeating-radial-gradient > 指使 用 重复 的 径 向 (放射 性 ?渐变 创 建 遮 音 图像 。 

此 实例 的 源 文 件 名 是 myHtmlB190. html。 


142 ”通过 创建 多 层 内 置 阴影 高 仿 打靶 图 案 


此 实例 主要 设置 元 素 的 -webkit-box-shadow 属性 为 内 置 阴影 ,从 而 创建 类 似 于 打靶 的 多 层 符 套 
的 圆 环 图 案 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 , 单 击 * 圆 形 模式 "按钮 ,将 在 下 面 显示 类 似 
于 打靶 的 多 层 幅 套 的 圆 环 图 案 , 如 图 142-1 所 示 ; 单 击 “ 矩 形 模式 ”按钮 ,将 在 下 面 显示 多 层 骨 套 的 矩 
形 图 案 , 如 图 142-2 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 142-1 图 142-2 


<!doctype html >< html >< head >< meta charset = "UTF — 8"> 
<script src= "js/jquery — 3.1.1.min.js"></script >< script language = "javascript"> 
$ (document). ready(function() { 
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$ ("#myBtnRect").click(function() { // 矩 形 模式 
$ (".myNest").css("border — radius", "0"); }); 
$ ("#myBtnCircle"). click(function() { // 圆 形 模式 
$ (".myNest").css("border — radius", "50% "); });}); 
</script> 
<style> 


.myNest{ width: 350px; height: 350px; border - radius: 50% ; background— color: orange; — webkit - box 
— shadow: inset 0 0 0 30px brown, inset 0 0 0 60px yellow, inset 0 0 0 90px green, inset 0 0 0 120px blue, 
inset 0 0 0 150px red; } 


input{ width:165px; margin: 5px;} 
</style></head> 
<body>< center>< div>< input type = "button" value = "和 矩形 模式 ”id= "myBtnRect"/> 
< input type = "button"” value= " 圆 形 模式 ”id = "myBtnCircle"/></div> 
<div class= "myNest"></div></center></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,-webkit-box-shadow: inset 0 0 0 
30px brown, inset 0 0 0 60px yellow，inset 0 0 0 90px green, inset 0 0 0 120px blue，inset 0 0 0 
150px red 用 于 以 棕 、 黄 、 绿 、 蓝 , 红 创建 多 层 嵌 套 的 内 置 阴影 。 在 默认 情况 下 ,box-shadow 创建 的 阴 
影 是 外 置 阴影 ,如 果 指 定 属性 值 inset, 则 会 创建 内 置 阴影 。 

此 实例 的 源 文件 名 是 myHtmlB229. html。 


143 ”通过 旋转 和 平移 阴影 实现 纸张 的 卷 角 ` 翘 边 


此 实例 主要 通过 使 用 旋转 、 平 移 、 倾 斜 对 阴影 实施 2D 变换 来 实现 纸张 的 卷 角 、 攻 边 特 效 。 当 在 
Google Chrome 浏览 器 中 显示 该 页 面 时 ,纸张 卷 角 、 旋 边 (左上 角 和 右 下 角 ) 的 效果 如 图 143-1 所 示 。 
有 关 此 实例 的 主要 代码 如 下 。 
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<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
< style type= "text/css"> 
* { margin: 0; padding: 0; } 
body { margin: 0; padding: 20px 30px; background— color: #F4F4F4;} 
.myBox { width: 250px; height: 350px; margin: 10px; display: inline— block; 
background: #FFF; border: 1px solid #CCC;position: relative; 
/x* 设 置 纸张 的 内 置 阴影 */ 
— webkit — Box — shadow: Opx 3px 90px rgba(0, 0, 0, 0.15) inset; 
/* 右 下 角 才 ( 圆 ) 角 <* / 
一 webkit- border — radius: 0 0 6px 0/0 0 50px 0; } 
.myBox p { margin: 10px; padding: 50px; color: #AAA; } 
. myBox:before { content: ''; width: 50px; height: 100px; z- index: —1; 
position: absolute; bottom: 0; right: 0; 
/* 通过 transform 设置 右 下 角 的 翘 角 阴 影 * / 
— webkit - Box — shadow: 20px 20px 10px rgba(0, 0, 0, 0.1); 
— webkit — transform: translate( - 35px，- 40px) skew(0deg, 30deg) rotate( - 25deg); } 
.myBox:after { content: ''; width: 100px; height: 100px; 
top: 0; left: 0; position: absolute; display: inline - block; z ~ index: — 1; 
/* 通 过 transform 设 置 左上 角 的 翘 角 阴 影 * / 
— webkit — Box — shadow: — 10px — 10px 10px rgba(0, 0, 0, 0.2); 
— webkit ~ transform: rotate(2deg) translate(20px, 25px) skew(20deg); } 
</style></head> 
<body>< div class = "myBox"><p>< img src = "img/B306. jpg"></p></div></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,-webkit-transform: rotate (2deg) 


translate(20px， 25px) skew (20deg) 用 于 将 产生 的 阴影 旋转 2 ,平移 到 参数 指定 的 位 置 (20px， 
25px) ,然后 倾斜 20"。 在 CSS3 中 ,transform 属性 用 于 对 元 素 应 用 2D 或 3D 转换 ,该 属性 允许 对 元 素 


进 和 


了 了 旋转、 缩放、 移动 或 倾斜 。 在 一 般 情 况 下 ,transform 属性 值 通常 指定 一 种 操作 ,例如 rotate 


(2deg) ,也 可 以 像 实 例 这 样 并 列 指定 多 种 操作 方法 ,这 些 方法 包括 matrix(n,n.n,n,n,n)、matrix3d 


(Cn， 


nynynvnvnvnvnvnvnvn',n'vn,n，nvn) translate(x,y) translate3d (x,y.z), translateX (x)、 


translateY(y) scale(x,y) translateZ(z) 、scale3d(x,y,z)、scaleX(x) 、scaleY(y) 、scaleZ(z) rotate 


(angle) ,rotate3d(x,y,z,angle) rotateZ (angle), skew (x-angle, y-angle) rotateX (angle) rotateY 


(angle) ,skewX(angle) ,skewY (angle) ,perspective(n) 等 。 


此 实例 的 源 文 件 名 是 myHtmlB306. html。 


144 ”以 多 重 阴影 创建 Firefox 浏览 器 的 logo 


此 实例 主要 通过 在 box-shadow 属性 值 中 指定 多 重 阴影 来 创建 Firefox 浏览 器 的 logo。 当 在 





Google Chrome 浏览 器 中 显示 该 页 面 时 .创建 的 Firefox 浏览 器 的 logo 如 图 144-1 所 示 。 有 关 此 实例 
的 主要 代码 如 下 。 





<!doctype html ><html >< head >< meta charset = "UTF — 8"> 
<style type= "text/css"> 

/* 创建 黄色 的 圆 饼 * / 

.myFirefox{ position: absolute; top: 50% ;left: 50%; 
width: 200px;height:200px;transform: translate( —- 50%, — 50%); 
border: 8px solid #EEE; border — radius:50 % ; background: #F48D00; 
overflow:hidden; box— shadow:0 0 2px 0 #999; } 

/* 通 过 多 重 阴 影 产生 蓝 色 的 异形 * / 
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.myFirefox: :before{ content: ""; width: 46px; height: 46px; 
background: lightblue; border - radius: 100% ; margin: auto; 
position: absolute;top: 90px;left: 50px; border: 1px solid lightblue; 
box - shadow: — 10px 0 0 5px rgba(164, 223, 239, 0.2), 
16px — 60px 0 8px rgba(164, 223, 239, 0.2), — 30px 一 50px 0 8px #F48D00, 
25px — 38px 0 Opx lightblue, — 30px — 30px 0 12px #F48D00, 
15px — 60px 0 8px lightblue, 33px 31px 0 — 15px lightblue, 
30px 17px 0 —13px #F48D00,20px — 10px 0 Opx lightblue, 
— 8px — Opx 0 19px #F48D00, 30px 17px 0 Opx lightblue, 
24px 30px 0 15px #F48D00, 20px — 6px 0 28px lightblue, 
45px 10px 0 35px #F48D00, — 5px —57px 0 8px #F48D00, 
20px — 23px 0 45px lightblue, — 5px 一 80px 0 8px lightblue, 
— 30px -70px 0 8px #F48D00, - 5px — 57px 0 8px #F48D00, 
43px — 11px 0 55px #F48D00, 22px — 39px 0 55px lightblue; } 
</style></head> 
<body>< div class = "myFirefox"></div></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,. myFirefox{ width: 200px; height: 
200px; border:8px solid # EEE;border-radius:50% ;background: # F48D00; box-shadow:0 0 2px 0 
#999;} 用 于 创建 黄色 背景 的 圆 饼 ,如 图 144-2 所 示 ; . myFirefox:: before{} 中 的 box-shadow 用 于 创 
建 多 个 异形 的 图 案 ,如 图 144-1 所 示 。 在 CSS3 中 ,box-shadow 属性 用 于 向 指定 的 元 素 添加 一 个 或 多 
个 阴影 ,该 属性 由 逗号 分 隔 的 阴影 列表 ,每 个 阴影 由 2 一 4 个 长 度 值 .可 选 的 颜色 值 以 及 可 选 的 inset 
关键 字 来 规定 ,省 略 长 度 的 值 是 0。 

此 实例 的 源 文 件 名 是 myHtmlB297. html。 
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图 144-1 图 144-2 


145 ”通过 选择 器 创建 Sogou 浏览 器 的 logo 


此 实例 主要 使 用 before 选择 器 向 指定 元 素 ( 圆 饼 ) 中 插入 文字 *S”, 从 而 创建 Sogou 浏览 器 的 
logo。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 .创建 的 Sogou 浏览 器 的 logo 如 图 145-1 所 示 。 
有 关 此 实例 的 主要 代码 如 下 。 





<!doctype html >< html ><head >< meta charset = "UTF — 8"> 
<style type= "text/css"> 
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/* 创建 蓝 色 的 圆 饼 * / 

. mySogou{ position: absolute;top: 50% ;left: 50% ;width: 200px;height: 200px; 
transform: translate( - 50%, -50%); border: 8px solid white; 
box — shadow: 2px 1px 2px 2px gray;border - radius: 50%; 
overf low: hidden;background: deepskyblue;} 

/x* 创 建 Sx/ 

.mySogou: before { content: "S"; position: absolute; line- height: 185px; 
top: 0; left: 0;right: 0;bottom: 0; font - weight: 600;font - size: 320px; 
color: white; font ~ family: 'Microsoft Yahei'; text ~ align: center; 

text - shadow:/* S 左 下 角 的 浅 灰色 阴影 * / 
一 5px Opx Opx # CDE4FO, 
/*S 的 深蓝 色 阴 影 * / 
Opx 8px Opx #387FBF; overflow: hidden;} 
</style></head> 
<body>< div class = "mySogou"></div ></body ></html > 





上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 本 [二 区 
代码 中 ,. mySogou{ width: 200px;height: 200px;border: DmyHemlB296html x\ 





8px solid white; box-shadow: 2px lpx 2px 2px gray; 全 日 fleWDymyWorkymyHtmlt 安 于 
border-radius: 50% ;background: deepskyblue;) 用 于 创 
建 蓝 色 背 景 的 圆 饼 , 如 图 145-2 所 示 ; . mySogou: before{ 


content: " S"; position: absolute; line-height: 185px; 





top: 0;left: 0;right: 0;bottom: 0; color: white; font- 
family: 'Microsoft Yahei' ;font-weight: 600; font-size: 
320px; text-align: center; text-shadow: Opx 8px 0px 
#387FBF; overflow: hidden;) 用 于 在 蓝 色 背景 的 圆 饼 上 
添加 文字 *S”, 如 图 145-3 所 示 ,注意 S 的 左下 角 和 右上 角 
的 阴影 都 是 深蓝 色 的 ,如果 加 上 了 一 5px 0px 0px 图 145-1 

# CDE4F0, 则 S 的 左下 角 的 部 分 深蓝 色 阴 影 将 变 成 浅 灰 

色 , 如 图 145-1 所 示 。 在 CSS3 中 ,before 选择 器 用 于 在 被 选 元 素 的 内 容 前 面 插入 新 内 容 。 

此 实例 的 源 文件 名 是 myHtmlB296. html。 





口 myHtmlB296 html 
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146 ”通过 渐变 创建 Safari 浏览 器 的 logo 


此 实例 主要 通过 使 用 径 向 渐变 、 线 性 渐变 以 及 旋转 和 平移 等 多 种 CSS 方法 创建 Safari 浏览 器 的 
logo。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,创建 的 Safari 浏览 器 的 logo 如 图 146-1 所 示 。 有 关 
此 实例 的 主要 代码 如 下 。 
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图 146-1 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<style type= "text/css"> 
.mySafari{ position: absolute; top: 50% ;left: 50 % ;border— radius:50%; 
width:200px; height:200px;transform: translate( -50%, — 50%); 
/* 最 外 层 的 灰色 圆 环 */ 
border: 5px solid # E8E8E8; 
box - shadow: — lpx 3px 1px 2px #999, /* 最 外 层 的 灰色 圆 环 下 面 的 外 阴影 * / 
一 lpx 3px 1px 2px #999 inset; /* 最 外 层 的 灰色 圆 环 上 面 的 内 阴影 * / 
background — image: 
/x* 中 心 的 白色 圆 环 */ 
radial ~ gradient(transparent 30% ,white 30 % ,white 34%, transparent 34% ), 
/*3 点 钟 指示 线 * / 
linear- gradient( rgba(255, 255,255,0.8) 100 %, transparent 100% ), 
/*9 点 钟 指示 线 * / 
linear - gradient(rgba(255, 255,255,0.8) 100 % ，transparent 100%), 
/* 6 点 钟 指示 线 * / 
linear - gradient( rgba(255, 255,255,0.8) 100% ，transparent 100%), 
/* 12 点 钟 指示 线 */ 
linear - gradient( rgba(255, 255,255,0.8) 100 %, transparent 100%), 
/* 产 生 圆 环 内 部 的 蓝 色 线性 渐变 背景 x / 
linear- gradient( #1DE3FF 0 %, #1F52EF 100 %); 
/*6 组 尺寸 必须 与 background image 中 的 6 个 背景 图 像 完 全 对 应 * / 
background - size: 50 % 50%,20px 2px, 20px 2px,2px 20px,2px 20px,100%,100%; 
background - repeat :no — repeat; 
/*6 组 位 置 坐标 必须 与 background image 中 的 6 个 背景 图 像 完全 对 应 * / 
background - position:center center, 175px center, 5px center,center 175px, center 5px,0 0;} 
.mySafari: :before{ content:""; position: absolute; z— index:— 1; 
top: 10px;left: 50% ; border- radius:10px; 
/* 通过 切 分 边框 线 的 策略 创建 白色 的 三 角形 指针 */ 
border - bottom: 100px solid rgba(255, 255, 255,0.9); 
border - left :10px solid transparent; border - right:10px solid transparent; 
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transform - origin:center 90px; 
/x* 旋转 和 平移 白色 的 三 角形 指针 指向 右上 角 * / 
transform:translate( ~ 50%, 0%) rotate(40deg); } 
.mySafari: :after{ content:""; position: absolute; 
top: 10px; left: 50% ; border — radius:10px; 
/* 通 过 切 分 边框 线 的 策略 创建 红色 的 三 角形 指针 * / 
border - bottom: 100px solid rgba(255, 0,0, 0.9); 
border - left :10px solid transparent; 
border — right:10px solid transparent; 
transform — origin:center 90px; 
/x* 旋转 和 平移 红色 的 三 角形 指针 指向 左下 角 * / 
transform:translate( ~ 50 %, 0%) rotate(220deg);} 
/* 当 鼠标 指针 悬浮 时 旋转 白色 的 三 角形 指针 * / 
.mySafari:hover: :before{transition:transform 1s; 
transform:translate( ~ 50%, 0% ) rotate(70deg);} 
/* 当 鼠 标 指针 悬浮 时 旋转 红色 的 三 角形 指针 */ 
.mySafari:hover: :after{transition:transform 1s; 
transform:translate( ~ 50%, 0%) rotate(250deg);} 
</style></head> 
<body>< div class = "mySafari"></div></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,. mySafari{ width:200px; height: 
200px; border-radius:50%; border:5px solid # E8E8E8; box-shadow: 一 1px 3px lpx 2px # 999， 
一 1px 3px lpx 2px #999 inset; background-image: radial-gradient (transparent 30%, white 30%, 
white 34%, transparent 34%),linear-gradient(# 1DE3FF 0%, #1F52EF 100%);background-size: 
50% 50% ,100% ,100% ;background-repeat :no-repeat;background-position:center center,0 0;} 用 于 
创建 线性 渐变 的 蓝 色 背 景 的 圆 盘 , 如 图 146-2 所 示 ; . mySafari: :before{ border-radius: 10px; border- 
bottom:100px solid rgba(255,255,255,0. 9); border-left:10px solid transparent; border-right: 10px 
solid transparent;transform-origin: center 90px; transform:translate(— 50% .0%) rotate(40deg);} 
用 于 创建 右上 角 的 白色 指针 , 如 图 146-3 所 示 ; . mySafari: : after {border-radius: 10px; border- 
bottom:100px solid rgba(255.0.0.0. 9);border-left:10px solid transparent; border-right: 10px solid 





transparent; transform-origin:center 90px;transform: translate(—50% ,0%) rotate(220deg) ;} 用 了 
创建 左下 角 的 红色 指针 ,如 图 146-1 所 示 。 
此 实例 的 源 文件 名 是 myHtmlB295. html。 
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图 146-2 图 146-3 
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147 ”通过 渐变 和 阴影 创建 IE 浏览 器 的 logo 


此 实例 主要 通过 径 向 渐变 和 盒子 阴影 创建 IE 浏览 器 的 logo。 当 在 Google Chrome 浏览 器 中 显 
示 该 页 面 时 ,创建 的 IE 浏览 器 的 logo 如 图 147-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 





<! doctype html ><html >< head >< meta charset = "UTF - 8"> 
<style type= "text/css"> 
.myIE { margin: 10px auto; position: absolute; 
top: 50% ;left: 50% ;width: 200px;height: 200px; 
transform: translate( - 50%, —50%);border- radius: 50%; 
background - image: radial - gradient (white 38% , #09C 38%);} 
. myIE:before { content: ""; width: 285px; 
height: 122px; position: absolute; 
border - radius: 100% ; top: 33px; left: ~ 45px; margin: auto; 
box - shadow: inset 0 12px 0 13px #09C, - 35px - 8px 0 — 5px white; 
transform: rotate( - 35deg); } 

.myIE:after { content: ""; width: 120px; height: 25px;background: #09C; 
position: absolute; top: 80px; left: 0; right: 0; margin: auto; 
box — shadow: 42px 23px 0 — 2px white; } 

</style></head> 
<body>< div class = "myIE"></div ></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,. mylE {width: 200px; height: 
200px;border-radius: 50%; background-image: radial-gradient (white 38%， #09C 38%);} 用 于 创 
建 蓝 色 的 圆 环 ,如 图 147-2 所 示 ; . myIE:before { width: 285px;height: 122px;border-radius:100%; 
box-shadow:inset 0 12px 0 13px #09C, 一 35px 一 8px 0 一 5px white;} 用 于 创建 水 平 的 卫星 轨迹 和 
彗星 轨迹 ,如 图 147-3 所 示 ,然后 使 用 transform: rotate( 一 35deg) 将 其 逆 时 针 旋 转 35", 使 其 与 IE 的 
角度 一 致 ,如 图 147-4 所 示 ; . mylE:after { width: 120px; height: 25px; background: #09C;} 用 于 
实现 字母 e 中 间 那 条 蓝 色 的 水 平 线 ,box-shadow: 42px 23px 0 一 2px white 则 以 白色 阴影 的 形式 实现 
e 右 侧 的 缺口 ,如 图 147-1 所 示 。 

此 实例 的 源 文件 名 是 myHtmlB294. html。 

百 - 6 x 面 = 5o x 
DD myHtml8294 html 其 DD myHeml8294html 其 
¢ 3 © BD file///D/myWork/myHtmlEY 





5 3 © Dfile///D/myWork/myHtmlt 安 











图 147-1 图 147-2 
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图 147-3 图 147-4 


148 ”以 椭圆 全 加 方式 创建 Opera 浏览 器 的 logo 


此 实例 3 





要 以 椭圆 至 加 方式 绘制 Opera 浏览 器 的 logo。 当 在 Google Chrome 浏览 器 中 显示 该 页 
面 时 ,创建 的 Opera 浏览 器 的 logo 如 图 148-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 148-1 
<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<style type= "text/css"> 
/* 渐 变 的 红色 椭圆 * / 
.myOpera{ position: absolute;top: 50% ;left: 50%; 
width: 170px; height: 200px; transform: translate( - 50%, -50%); 
border - radius:50 % ; box— shadow:0 2px 4px black; 
background — image: linear - gradient(rgb(254, 135, 138) 0%, rgb(231, 22, 22) 50%, rgb 
(128, 0, 0) 85%, rgb(184, 3, 4) 100% ); } 
/* 在 红色 椭圆 里 面 创建 白色 小 椭圆 x / 
. myOpera:after{ content:""; position: absolute; top:50 % ;left:50%; 


width: 60px;height: 180px;transform: translate( - 50%, -50%); 
border - radius:50 % ; background:white; } 


/* 在 红色 椭圆 与 白色 小 椭圆 之 间 谋 套 半 透 明 椭圆 ,突出 显示 全 加 的 椭圆 边框 x / 
.myOpera:before{ content:""; position: absolute; top:50% ;left:50% ; 
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width: 72px;height: 185px; transform: translate( — 50%, -50%); 
border - radius:50 % ; background:rgba(0,0,0,0.4); } 

</style></head> 

<body >< div class = "myOpera"></div ></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,. myOpera{width: 170px; height: 
200px;border-radius:50% ;background-image:linear-gradient(rgb(254,135,138) 0%, rgb(231，22， 
22) 50%, rgb(128, 0, 0) 85%, rgb(184, 3, 4) 100%);} 用 于 创建 渐变 红色 椭圆 ,如 图 148-2 所 示 ; 
. myOpera:after{ width: 60px;height: 180px; border-radius: 50% ;background:white; ) 用 于 在 红色 
椭圆 里 面 创建 白色 小 椭圆 ,如 图 148-3 所 示 ; . myOpera: before {width: 72px; height: 185px; border- 
radius:50% ;background: rgba(0, 0,0,0.4);} 用 于 在 红色 椭圆 与 白色 小 椭圆 之 间 谋 套 半 透 明 椭圆 ， 
突出 显示 盔 加 的 椭圆 边框 ,这 主要 是 因为 0.4 不 透明 度 产生 的 边框 线 效果 ,如 图 148-1 所 示 。 

此 实例 的 源 文件 名 是 myHtmlB293. html。 
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图 148-2 图 148-3 


149 通过 渐变 创建 Chrome 浏览 器 的 logo 


此 实例 主要 通过 使 用 radial-gradient() 方 法 和 lineargradient() 方 法 创建 Chrome 浏览 器 的 logo。 
当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,创建 的 Chrome 浏览 器 的 logo 如 图 149-1 所 示 。 有 关 
此 实例 的 主要 代码 如 下 。 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
< style type = "text/css"> 
. myChrome{ position: absolute;top: 50% ;left: 50% ;width: 180px;height: 180px; 
transform: translate( -50%, -50%); border — radius:50%; 
box— shadow:0 0px 4px #999,0 0 2px # DDD inset; 
background - image: 
/* 创建 中 心 的 蓝 圆 * / 
radial - gradient(blue 0% ,blue 28%, transparent 28% ), 
/x* 在 蓝 圆 外 面 创建 5px 宽 的 白 环 * / 
radial - gradient (white 33%, transparent 33 % ), 
/* 创建 右 下 角 的 黄色 部 分 * / 
linear - gradient( - 50deg, Yellow 34% ，transparent 34$% ), 
/* 创建 左下 角 的 绿色 部 分 * / 
linear ~ gradient(60deg, green 33 %, transparent 33% ), 





第 2 部 分 昌 便 < 


/* 创建 上 端的 红色 部 分 * / 
linear - gradient(180deg, red 0%, red 30%, transparent 30% )， 
/x* 使 用 黄色 补 填 右 下 角 与 红 白 相 接 的 空白 部 分 */ 
linear - gradient( - 120deg, yellow 40 %, transparent 40% ), 
/* 使 用 绿色 补 填 左 下 角 与 黄白 相 接 的 空白 部 分 */ 
linear - gradient (0deg, green 45 % , transparent 45% ), 
/x* 使 用 红色 补 填 右 上 角 与 绿 白 相 接 的 空白 部 分 * / 
linear - gradient(120deg, red 50 %, transparent 50% ); } 
</ style></head> 
<body>< div class = "myChrome"></div></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,background-image: radial- gradient 
(blue 0%, blue 28%, transparent 28%), radial-gradient (white 33% ，transparent 33%), linear- 
gradient( 一 50deg,yellow 34%, transparent 34%) 创 建 的 图 形 如 图 149-2 所 示 。 绿 色 部 分 和 红色 部 
分 也 是 按照 同样 的 思路 来 实现 的 , 仅 有 角度 和 颜色 值 的 差异 。 在 CSS3 中 ,radial-gradient() 方 法 用 于 
以 径 向 渐变 的 方式 创建 图 像 ,lineargradient( ) 方 法 则 以 线性 渐变 的 方式 创建 图 像 。 

此 实例 的 源 文 件 名 是 myHtmlB292. html。 
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150 ”通过 径 向 渐变 和 线性 渐变 创建 穿线 纽扣 


此 实例 主要 使 用 radial-gradient( ) 方 法 创建 针眼 .使 用 linear-gradient() 方 法 创建 穿线 ,从 而 创建 
穿线 纽扣 的 图 案 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,穿线 纽扣 的 图 案 如 图 150-1 所 示 。 
有 关 此 实例 的 主要 代码 如 下 。 


<!doctype html >< html >< head ><meta charset = "UTF - 8"> 
< style type = "text/css"> 
.myButton{position: absolute;top: 50% ;left: 50% ; background: # 87CEEB; 
transform: translate( - 50%, — 50%); border— radius: 50% ; width: 180px;height:180px; 
box — shadow: inset 0 5px 5px #87CEEB, inset 0 17px 5px rgba(255,255,255,0.7), 
inset 0 -3px 3px rgba(255,255,255, 0.3), inset 0 - 10px 10px rgba(0,0,0,0.3), 
inset 0 — 15px 10px #45B3E0,0 7px 10px rgba(0,0,0,0.3); } 
.myButton: :before{ content: ''; position:absolute; 
top: 50% ;left: 50% ; width: 110px;height: 106px; 
margin— left: — 55px;margin— top: — 55px; 
/x* 绘制 纽扣 上 的 4 个 针眼 */ 
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background - image: 
radial - gradient(circle at 38px 38px, black 10px, transparent 10px), 
radial - gradient(circle at 73px 73px, black 10px, transparent 10px), 
radial - gradient(circle at 38px 73px, black 10px, transparent 10px), 
radial - gradient(circle at 73px 38px, black 10px, transparent 10px); 
border - radius: 50% ;border - top: 1px solid rgba(0,0,0,0.6); 
border - bottom: 1px solid rgba(255,255,255,0.6); 
box - shadow: inset 0 20px 2px rgba(255,255, 255, 0. 3), 
3px —15px 7px — 4px rgba(0,0,0,0.3), 0 — 14px 10px 5px #45B3E0, 
0 2px 5px 5px #87CEEB, 0 10px 5px 5px rgba(255,255, 255,0.6); } 
. myButton: :after{ content: ''; position:absolute; top: 50%;left: 50%; 
width: 50px;height: 50px; margin- left: ~ 25px; margin - top: — 23px; 
/x* 绘制 纽扣 上 的 十 字 交 叉 穿线 * / 
background — image: 
linear - gradient (to right, transparent 35%, 六 000080 35%， 提 4682B4 40%， 间 000080 45%， 
并 4682B4 50%， 提 000080 55%%， 间 4682B4 60%， 并 000080 65%，transparent 65$%),， 
linear - gradient (to bottom, transparent 35%, #000080 35%， 提 4682B4 40 当 ， 井 000080 45%， 
并 4682B4 50%， 提 000080 55%%， 间 4682B4 60%， 并 000080 65%，transparent 65$); 
border - radius: 50%; 
/x* 将 穿线 旋转 45 对 准 针眼 * / 
transform: rotate(45deg);} 
</style></head> 
<body>< div class = "myButton"></div ></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,radial-gradient (circle at 38px 38px， 
black 10px，transparent 10px) 表 示 在 (38px 38px) 位 置 创建 一 个 半径 为 10px 的 圆 , 即 左上 角 针 眼 ,其 
他 3 个 针眼 的 创建 原理 类 似 ,只 是 位 置 不 同 ; linear-gradient (to right, transparent 35%， #000080 
35%， #4682B4 40% ， 井 000080 45%， #4682B4 50 听 ， 井 000080 55%， #4682B4 60%， #000080 
65%，transparent 65%) 表 示 按 照 从 左 到 右 的 顺序 通过 线性 渐变 创建 垂直 的 穿线 ,linear-gradient(to 
bottom, transparent 35%， #000080 35%，, #4682B4 40%， 井 000080 45%， #4682B4 50%,# 
000080 55%， 并 4682B4 60%，#000080 65%，transparent 65%) 表 示 按 照 从 上 到 下 的 顺序 通过 线性 
渐变 创建 水 平 的 穿线 ,如 图 150-2 所 示 。 最 后 通过 transform: rotate(45deg) 将 刚才 创建 的 十 字 交 又 
穿线 旋转 45 ,从 而 正好 落 在 4 个 针眼 。 在 CSS3 中 ,radial-gradient( ) 方 法 用 于 以 径 向 渐变 的 方式 创 
建 图 像 ,lineargradient() 方 法 则 以 线性 渐变 的 方式 创建 图 像 。 

此 实例 的 源 文件 名 是 myHtmlB291. html。 


口 myHtml8291html x\ | D myHtmlB291html x\ 
S 3 C Dfile///D/myWork/myHtmll 窑 三 3 © Dfie///D/myWork/myHtml 安 三 
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151 通过 线性 渐变 创建 充电 状态 的 电池 图 案 


此 实例 主要 使 用 linear-gradient( ) 方 法 创建 多 个 渐变 图 形 ,从 而 创建 充电 状态 的 电池 图 案 。 当 在 
Google Chrome 浏览 器 中 显示 该 页 面 时 ,创建 的 充电 状态 的 电池 图 案 如 图 151-1 所 示 。 有 关 此 实例 的 
主要 代码 如 下 。 





<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<style type= "text/css"> 
body{ background - color: black;} 
/* 创建 电池 外 形 轮 廓 和 充电 部 分 的 渐变 图 案 * / 
.myBattery{ position: absolute; top: 50% ;left: 50% ; width: 250px;height :120px; 
transform: translate( ~ 50%, -50%);border— radius: 10px/30px; 
/ * 创建 电池 上 、 下 两 端的 边框 */ 
border - left: 2px solid rgba(255,255,255, 0.2); 
border - right: 2px solid rgba(255,255, 255, 0. 2); 
background — image: 
/* 创建 充电 及 其 他 垂直 部 分 的 轮廓 * / 
linear - gradient (to right, transparent 5%, #316D08 5%, #316D08 7%, 
间 60B939 8 名 ， 林 60B939 10 和 %， 提 51AA31 11%， 亲 51AA31 60 和， 并 64CE11 61%%， 提 64CE11 63%， 
255405 63 %, black 68%, black 95%, transparent 95 % ), 
/* 创建 电池 水 平 部 分 的 外 形 轮廓 x / 
linear - gradient (to bottom, rgba(255,255,255,0.5) 0%, rgba(255,255, 255,0.4) 4%, 
rgba(255,255,255, 0.2) 7%, rgba(255, 255, 255, 0.2) 14%, rgba(255,255, 255,0.8) 14%, rgba(255, 255, 
255,0.2) 40%, rgba(255,255,255,0) 41 %, rgba(255,255, 255,0) 80%, rgba(255,255,255,0.2) 80%, rgba 
(255, 255, 255,0. 4) 86 %, rgba(255,255, 255,0.6) 90%, rgba(255,255,255,0.1) 92%, rgba(255,255,255, 
0.1) 95%, rgba(255,255, 255,0.5) 98% );} 
/* 创建 电 池 右 端的 电 芯 图 案 */ 
.myBattery: :before{ content: ''; position:absolute; top: 32px;right: — 14px; 
width: 12px;height: 55px;border ~- top— right — radius: 6px 10px; 
border - bottom— right - radius: 6px 10px; 
background — image: linear — gradient(to bottom, rgba(255,255, 255,0.5) 0%, rgba(255,255,255,0) 
14%, rgba(255,255,255,0.8) 14%, rgba(255,255, 255,0.3) 40%, rgba(255,255,255,0) 41 %, rgba(255, 
255,255,0) 80% ，rgba(255, 255，255, 0. 2) 80%, rgba(255,255, 255, 0. 4) 86%, rgba(255,255, 255, 0. 6) 
90%, rgba(255,255, 255,0.1) 92%, rgba(255,255,255,0.1) 95%, rgba(255,255,255,0.5) 98% );} 
/* 创建 电 池 外 部 的 透明 图 案 */ 
.myBattery: :after{ content: ''; position:absolute;width: 220px; height :120px; 
left: 10px;border ~ radius: 5px/30px; 
border - left: 4px solid black; border - right: 4px solid black; 
background - image: linear - gradient(to bottom, rgba(255,255,255,0.3) 4%, rgba(255,255,255, 
0.2) 5%, transparent 5%, transparent 14%, rgba(255,255,255,0.3) 14%, rgba(255,255,255,0.12) 40%, 
rgba(0,0,0,0.05) 42%, rgba(0, 0,0,0.05) 48%, transparent 60%, transparent 80%, rgba(255, 255,255, 
0.3) 87% , rgba(255,255,255,0.3) 92%, transparent 92%, transparent 97%, rgba(255,255,255,0.4) 97% ), 
linear - gradient (to left, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255,255, 
0.2) 2%, black 2%, black 6%, transparent 6 %), 
linear — gradient( to bottom, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0) 
35%, rgba(255,255,255,0.3) 90%, rgba(255,255,255,0) 90% );} 
</style></head> 
<body>< div class = "myBattery"></div ></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,. myBattery{ background- image: 
linear-gradient(to bottom, iDaK255，2553255.0. 8) 0%, reba(255.255,255,0.4) 4% ,rebut 
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rgba( ,0.1) 95%, rgba(2: ,0. 5) 98%);) 中 的 线性 渐变 方法 linear-gradient() 
用 于 创建 电池 的 水 平 外 形 轮廓 ,如 图 151-2 所 示 ; . myBattery(background-image: linear-gradient (to 
right, transparent 5%%, #5316D08 5%, #5316D08 7%, #60B939 8%, #60B939 10%, #51AA31 





11%, #51AA31 60%, #64CE1l1 61%, 闪 64CE11 63%,# 
transparent 95%)) 中 的 线性 渐变 方 ; 
轮廓 ,如 图 151-3 所 示 ; . myBattery:: 


5, 255,0.5) 0»%, rgba(255, 





5405 63%，black 68%，black 95%, 
inear-gradient() 用 于 创建 电池 的 充电 及 其 他 垂直 部 分 的 外 形 
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0.5) 98%%);} 中 的 线性 渐变 方法 linear 
gradient() 用 于 创建 电池 右 端的 电 芯 的 外 形 轮廓 ,如 图 151-4 所 示 ; . myBatte 
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电池 的 透明 图 案 , 如 图 151-1 所 示 
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图 151-3 图 151-4 
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在 CSS3 中 ,linear-gradient() 方 法 用 于 以 线性 渐变 方式 创建 图 像 ,在 该 方法 中 通常 使 用 to、top、 
left 这 样 的 关键 字 来 指示 渐变 方向 。 
此 实例 的 源 文 件 名 是 myHtmlB298. html。 


152 ”通过 径 向 渐变 实现 邮票 边缘 的 饮 贞 风格 


此 实例 主要 使 用 radial-gradient() 方 法 创建 渐变 背景 ,从 而 实现 在 一 幅 普 通 图 像 的 边缘 显示 邮票 
边缘 的 锯齿 风格 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,图 像 的 边缘 将 呈现 类 似 于 邮票 边缘 
的 锯齿 风格 ,如 图 152-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 

百 - oo x 


口 myHtmlB365 html x 
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图 152-1 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<style type= "text/css"> 
body { background: darkgreen; text - align: center; } 
/* 设 置 盒子 的 基本 样式 * / 
.myStamp{ margin - top:25px; width: 280px; height: 180px; 
display: inline - block; padding: 10px; 
background: radial - gradient(transparent 0px, transparent 4px,white 4px, white); 
/* 设 置 背景 锯齿 图 形 的 大 小 * / 
background - size: 20px 20px; 
/* 设 置 锯齿 图 形 的 位 置 ,10 是 20 的 一 半 , 所 以 最 外 边 的 透明 圆 刚 好 被 切 掉 一 半 而 像 锯齿 * / 
background - position: — 10px - 10px; 
— webkit - filter: drop - shadow(0px 0px 10px rgba(0,0,0,0.5)); } 
img{ width:280px; height :180px;} 
</style></head> 
<body>< div class = "myStamp" >< img src = "img/B358. jpg"/></div> 
</body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , background: radial- gradient 
(transparent 0px,transparent 4px,white 4px.white) 用 于 给 盒子 绘制 透明 圆 ,因为 在 默认 情况 下 背景 
图 形 是 重复 摆 放 的 ,所 以 此 行 代码 的 显示 效果 如 图 152-2 所 示 。 如 果 禁 止 重复 摆 放 ,并 且 设 置 
background-size: 20px 20px 和 background-position: 一 10px 一 10px, 则 可 以 看 到 radial-gradient( ) 方 
法 产生 的 图 形 ,如 图 152-3 左上 和 角 所 示 的 那个 缺 角 的 小 正方 形 (20px 20px) 。 
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此 实例 的 源 文件 名 是 myHtmlB365. html。 
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153 ”通过 多 级 径 向 渐变 创建 美国 队长 的 盾牌 图 案 


此 实例 主要 使 用 radial-gradient( ) 方 法 创建 不 同 大 小 的 圆 环 ,从 而 使 背景 呈现 美国 队长 的 盾牌 图 
案 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,美国 队长 的 盾牌 图 案 如 图 153-1 所 示 。 有 关 此 实 
例 的 主要 代码 如 下 。 
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图 153-1 


<!doctype html >< html><head><meta charset = "UTF — 8"> 
< style type = "text/css"> 
. myCaptainAmerica{ position: absolute; top: 50% ;left: 50%; 
width: 200px;height: 200px;transform: translate( — 50%, —50%); 
background:/* 生成 四 射 的 渐变 辉 光 * / 
linear - gradient (45deg, rgba(255,255,255,0) 35  ，rgba(255,255, 255,0.4) 50%, rgba(255,255,255, 
0) 65%), 
linear — gradient( — 45deg, rgba(255, 255, 255, 0) 35 % ，rgba(255, 255, 255, 0.4) 50%, rgba(255,255, 
255,0) 65%), 
linear — gradient (to right, rgba(0,0,0,0) 35%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0) 65%), 
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linear — gradient (to bottom, rgba(0,0,0,0) 35%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0) 65%), 
/x* 生成 红 白 相间 的 圆 环 */ 


radial - gradient (ellipse at center, navy 20%, darkred 20%, darkred 35%, snow 35%, snow 55%, 
darkred 55% ); 


border - radius: 50% ; box- shadow: 0 3px 0 black;} 
/=* 在 盾牌 中 心 添加 五 角 星 * / 
.myCaptainAmerica: :before{ content: ' 丰 '; position:absolute; 
top: 50% ;left: 50%; transform: translate( - 50%, -50%); z-index: 1; 
margin - left: - 3px; width: 50px;height:50px; line— height: 47px; 
font - family: simsun, Tahoma, Helvetica, Arial, SimHei, sans — serif; 
border - radius: 50% ; font— size: 55px; color: white; 
text ~ align:center; text— shadow: 2px 1px 2px black; } 
</style></head> 
<body>< div class = "myCaptainAmerica"></div></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 .radial-gradient (ellipse at center， 
navy 20%, darkred 20%, darkred 35%, snow 35%, snow 55%, darkred 55%) 用 于 生成 红 白 相间 


的 圆 环 , 这 行 代码 也 可 以 修改 为 radial-gradient(navy 0%, navy 20%, darkred 20%, darkred 35%， 


snow 35%，snow 55% ,darkred 55% ,darkred 100%)。 在 CSS3 中 ,radial-gradient() 方 法 本 质 上 是 
在 径 向 生成 颜色 渐变 ,如 果 不 同 颜色 在 径 向 差 值 为 0, 则 这 种 径 向 颜色 渐变 就 不 会 发 生 。 因 此 ,如 果 将 
代码 修改 为 radial-gradient (ellipse at center, navy 20%, darkred 20%, darkred 35%, snow 35%, 
snow 45%，darkred 55%), 即 在 最 外 层 的 红 、 白 处 有 55% 一 45% 二 10% 的 差 值 , 则 会 发 生 颜 色 渐变 ， 
如 图 153-2 所 示 。 如 果 这 种 差 值 很 小 , 则 可 以 实现 去 除 毛刺 的 效果 。 例如 ,如 果 将 代码 修改 为 radial- 
gradient(ellipse at center, navy 20%, darkred 20% , darkred 33%, snow 35%, snow 53%, darkred 
55%), 则 运行 效果 如 图 153-3 所 示 , 相 比 原 图 , 圆 环 间 的 毛刺 明显 减少 。 

此 实例 的 源 文 件 名 是 myHtmlB290. html。 
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图 153-2 图 153-3 


154 通过 切 分 边框 线 所 得 的 三 角形 创建 五 角 星 


此 实例 主要 通过 切 分 边框 线 获 取 三 角形 ,然后 进行 放大 处 理 , 从 而 实现 创建 五 角 星 的 效果 。 当 在 
Google Chrome 浏览 器 中 显示 该 页 面 时 ,创建 的 五 角 星 如 图 154-1 所 示 。 有 关 此 实例 的 主要 代码 
如 下 。 
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<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
< style type= "text/css"> 
.myFivestar { position: absolute; top: 25% ; right: 50% ; width: 0; height: 0; 
transform: translate( ~- 50%, — 50%);display: block; 
/* 以 切 分 边框 线 的 策略 获得 小 三 角形 * / 
border — left: 3.04px solid transparent;border — right: 3.24px solid transparent; 
border - bottom: 10px solid # 98DBE3; 
— webk 让 一 filter: drop— shadow(1px .5px 1px #CCC); 
/* 将 小 三 角形 放大 8 倍 即 得 五 角 星 上 方 的 一 个 角 * / 
transform: scale(8); } 
/* :before 也 以 切 分 边框 线 的 策略 获得 向 左 的 小 三 角形 * / 
.myFivestar:before { content: ""; position: absolute; top: 8.65px; left: -8.82px; 
width: 0; height: 0; color: #98DBE3; display: block; 
border - left: 12.5px solid transparent; border — right: 12.5px solid transparent; 
border - bottom: 9.08px solid #98DBE3;transform — origin: top center; 
transform: rotate(36deg); } 
/* :after 仍 以 切 分 边框 线 的 策略 获得 与 :before 反 向 的 小 三 角形 * / 
.myFivestar:after { content: ""; position: absolute; top: 8. 65px; left: - 15px; 
width: 0; height: 0;color: #98DBE3; display: block; 
border - left: 12.5px solid transparent; border - right: 12. 5px solid transparent; 
border - bottom: 9.08px solid #98DBE3;transform— origin: top center; 
transform: rotate( - 36deg); } 
</style></head> 
<body>< div class = "myFivestar"></div ></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,border-left 表示 左边 框 线 ,border- 
right 表示 右边 框 线 ,border-bottom 表示 下 (底部 ) 边 框 线 , 这 3 条 边框 线 没 有 长 度 (width: 0;height: 0;)， 
但 有 不 同 的 宽度 (如 12. 5px、9.08px)。 当 左边 框 线 与 下 (底部 ) 边 框 线 在 左下 角 交 汇 时 就 会 在 对 角 线 
处 剖 分 ,因为 border-left 左边 框 线 透明 (transparent) ,可 见 的 只 有 下 (底部 ) 边 框 线 的 直角 三 角形 ; 同 
时 由 于 边框 线 没有 长 度 (width: 0;height: 0;), 因 此 右边 框 线 与 下 (底部 ) 边 框 线 在 右 下 角 交 汇 产 生 的 
直角 三 角形 必定 与 左边 框 线 与 下 (底部 ) 边 框 线 在 左下 角 交 汇 产生 的 直角 三 角形 连接 在 一 起 , 即 下 面 
的 代码 产生 的 三 角形 (两 个 背靠背 的 直角 三 角形 ) 放 大 8 倍 后 如 图 154-2 所 示 。 
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图 154-1 


.myFivestar { position: absolute; top: 25% ; right: 50% ; display: block; 
transform: translate( - 50%, -50%);width: 0; height: 0; 

/* 以 切 分 边框 线 的 策略 获得 小 三 角形 * / 

border - left: 3. 04px solid transparent;border ~ right: 3.24px solid transparent; 


弟 2 部 分 图像 《8 





border - bottom: 10px solid # 98DBE3; 

— webkit ~ filter: drop— shadow(1px .5px 1px #CCC); 

/* 将 小 三 角形 放大 8 倍 即 得 五 角 星 上 方 的 一 个 角 * / 

transform: scale(8);} 

. myFivestar:before 和 . myFivestar:after 产生 三 角形 的 原理 与 之 类 似 。 
此 实例 的 源 文 件 名 是 myHtmlB288. html。 


155 ”通过 图 形 组 合 实现 丝带 缠绕 展板 的 特效 


此 实例 主要 在 border-color 属性 中 合理 地 设置 transparent, 从 而 实现 折 角 丝带 缠绕 展板 的 特效 。 
当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 , 折 角 丝带 缠绕 展板 的 效果 如 图 155-1 的 深 粉色 部 分 所 
示 。 有 关 此 实例 的 主要 代码 如 下 。 








<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<style type= "text/css"> 
/* 设 置 盒 子 的 基本 样式 */ 
.myBox { margin: 15px auto Opx auto;width: 400px; } 
/* 设 置 文 本 区 域 的 基本 样式 */ 
.myArea {clear: both; margin: Opx auto;width: 350px;background: cyan; 
position: relative; z- index: 90; — webkit — border - radius: 10px; 
— webkit - box - shadow: Opx 0px 8px rgba(0,0,0,0.3); } 
/* 设置 横 丝 带 的 基本 样式 * / 
.myRectangle { background: deeppink; height: 50px; width: 380px; 
position: relative; left: - 15px; top: 30px; float: left; 
— webkit ~ box — shadow: Opx Opx 4px rgba(0,0,0,0.55);z- index: 100; } 
/* 设 置 标题 文本 的 基本 样式 */ 
.myRectangle p{ position: relative; top: ~ 20px; font- size: 30px; color: black; 
text ~ align: center; text - shadow: lpx lpx 2px rgba(0,0,0,0.2); } 
/* 设置 横 丝 带 左 下 角 的 三 角形 的 样式 * / 
.myTriangle - 1{border — color: transparent deeppink transparent transparent; 
border ~ style:solid; border — width:15pxiheight:0px; width:0px; 
position: relative; left: - 30px; top: 65px; z- index: —1;} 
/* 设置 槛 丝带 右 下 角 的 三 角形 的 样式 * / 
-myTriangle— r {border - color: transparent transparent transparent deeppink; 
border - style:solid; border - width:15px; height:0px; width:Opx; 
position: relative;left: 350px; top: 35px; z- index: —1;} 
/* 设 置 内 容 文本 的 基本 样式 */ 
.myContent { padding: 60px 25px 35px 25px; 
font - size:18px; padding — top:40px; padding — bottom: 20px;} 
</style></head> 
<body>< div class = "myBox"><div class = "myArea"> 
<div class = "myRectangle”id= "myRectangle">< p> 重庆 国际 博览 中 心 </p></div> 
<div class= "myTriangle- 1" id= "myTriangle— 1"></div> 
<divclass= "myTriangle— r" id= "myTriangle— r"></div> 
<div class = "myContent"> 重 庆 国 际 博览 中 心 是 一 座 集 展览 会议 .餐饮 、 住 宿 ,演艺 .赛事 等 多 功能 于 一 体 的 
现代 化 智能 场馆 ,位 于 重庆 两 江 新 区 的 核心 -- 悦 来 会 展 城 ,是 西部 最 大 的 专业 化 场馆 。 重 庆 国 际 博览 中 心 雄 路 
嘉陵 江岸 , 依 山 傍 水 ,公园 环抱 ,古镇 相伴 ,拥有 城市 .森林 、 自 然 浑 然 一 体 的 优美 环境 ,是 国内 独一无二 的 公园 展 
馆 、 人 文 展 馆 、 生 态 展 馆 。 重 庆 国际 博览 中 心 总 建筑 面积 达 60 万 平方 米 , 其 中 室内 展览 面积 20 万 平方 米 。 展 馆 
共 设 16 个 展厅 ,南北 各 布置 8 个 ,为 全 国 第 二 ,西部 第 一 。 国 博 中心 的 屋顶 旦 蝴蝶 形状 。</div> 
</div></div></body></html> 
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上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,border-color 属性 用 于 设置 4 条 边框 
线 的 颜色 ,此 属性 可 设置 一 个 元 素 的 所 有 边框 中 可 见 部 分 的 颜色 ,或 者 为 4 个 边框 线 分 别 设置 不 同 的 
颜色 。border-color:red green blue pink 表示 上 边框 是 红色 ,右边 框 是 绿色 ,下 边框 是 蓝 色 ,左边 框 是 
粉色 ; border-color: red green blue 表示 上 边框 是 红色 ,右边 框 和 左边 框 是 绿色 ,下 边框 是 蓝 色 ; 
border-color:dotted red green 表示 上 边框 和 下 边框 是 红色 ,右边 框 和 左边 框 是 绿色 。 在 此 实例 中 ， 
border-color: transparent deeppink transparent transparent 和 border-color: transparent transparent 
transparent deeppink 产生 的 边框 线 效果 则 是 如 图 155-2 展板 的 左 、 右 两 侧 的 两 个 紫色 三 角形 (还 需要 
同时 设置 border-style: solid、border-width: 15px、height; 0px、width; 0px;) ,实例 通过 下 移 标 题 栏 
的 纵 坐 标 遮挡 两 个 紫色 三 角形 的 一 半 , 因 此 产生 了 如 图 155-1 所 示 丝 带 缠绕 的 视觉 效果 。 

此 实例 的 源 文件 名 是 myHtmlB370. html。 
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图 155-1 图 155-2 


156 ”在 图 像 右 上 角 创 建 倾斜 45 的 梯形 标签 


此 实例 主要 通过 设置 overflow 和 transform 属性 实现 在 图 像 右 上 和 角 显示 倾斜 45 的 梯形 标签 。 
当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 , 自 定义 标签 “世界 级 图 片 ” 在 图 像 右上 角 的 显示 效果 如 
图 156-1 所 示 ; 如 果 和 鼠标 指针 悬浮 在 图 片上 ,将 显示 男 一 张 图 片 , 自 定义 标签 “世界 级 图 片 ”在 图 像 右 
上 和 角 仍 然 存在 。 有 关 此 实例 的 主要 代码 如 下 。 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
< style type = "text/css"> 
/* 设置 图 像框 * / 
.myLabel { text- align: center; margin: 10px auto; border — radius: 10px; 
width: 400px; height: 250px; background - size: 100% 100%; 
一 webkit — box — shadow: 5px 5px 8px rgba(0, 0, 0, 0.3); 
position: relative; background— image: url(img/B249A. jpg); } 


第 2 部 分 (> 





.myLabel:hover { background — image: url( img/B249B. jpg) ;cursor: hand; } 
/x 设置 自 定义 标签 框 */ 
.myLabel. ribbon - myLabel - green { width: 85px; height: 88px; 
/x* 裁剪 掉 溢 出 部 分 , 自 定义 标签 框 则 由 矩形 变 成 梯形 x / 
overflow: hidden; position: absolute; 
/x* 自 定义 标签 框 在 右上 角 显示 * / 
ron: BEE pe 
.myLabel. ribbon - green { font: bold 15px Sans - Serif; text ~ align: center; 
text - shadow: rgba(255, 255, 255, 0.5) Opx 1px Opx; 
/x* 自 定义 标签 旋转 45" * / 
— webkit - transform: rotate(45deg); position: relative; padding: 7px 0; 
left: 一 5px; top: 15px; width: 120px; color: black; 
/x* 创建 自 定义 标签 渐变 背景 * / 
background - image: - webkit — linear — gradient(top, white, darkgreen);} 
.myLabel. ribbon - green: before, .ribbon— green:after { content: ""; 
border ~ top: 3px solid darkgreen; border - left: 3px solid transparent; 
border - right: 3px solid transparent ;position: absolute; bottom: — 3px; } 


.myLabel. ribbon - green:before { left: 0;} /x top 择 入 点 */ 
.myLabel. ribbon - green:after { right: 0; } /xright 择 入 点 */ 
</style></head> 


<body>< div class = "myLabel"> 
<div class= "ribbon - myLabel - green"> 
<div class = "ribbon - green"> 世 界 级 图 片 </div><V/div></div></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,overflow: hidden 用 于 裁剪 掉 自 定义 
标签 超出 图 像 边缘 的 部 分 ,因为 自 定 义 标签 原本 是 普通 的 矩形 ,在 裁剪 了 溢出 部 分 之 后 则 变 成 了 梯 
形 : -webkit-transform: rotate(45deg) 表 示 将 自 定义 标签 旋转 45 。 

此 实例 的 源 文 件 名 是 myHtmlB249. html。 
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图 156-1 


157 ”增加 和 移 除 图 像 左 上 角 的 自 定义 标签 


此 实例 主要 使 用 jQuery 的 append() 和 remove() 方 法 .从 而 实现 增加 和 移 除 图 像 左 上 角 的 自 定 
义 标签 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 , 单 击 “ 添 加 标签 "按钮, 则 将 在 图 像 左 上 角 添 加 
自 定义 标签 “望京 球场 ”如 图 157-1 所 示 ; 单 击 “ 移 除 标 签 " 按 钮 . 则 将 移 除 图 像 左上 角 的 自 定义 标签 
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“望京 球场 ”, 如 图 157-2 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 


<!doctype html >< html >< head ><meta charset = "UTF — 8"> 
< script src= "js/jquery - 3.1.1.min. js"></script>< script type= "text/javascript"> 
$ (function(){ 
$(" 井 myBtnhdd" ). click(function(){// 添 加 标签 
$ ("div. myBox" ).append("<p><span > 望京 球场 </span></p>"); }); 
$ (" 间 myBtnRemove").click(function(){// 移 除 标 签 
$ ("div. myBox p"). renove(); });}); 
</script> 
<style type= "text/css"> 
/* 设 置 盒子 的 基本 样式 * / 
.myBox { margin - top:5px; position: relative; width: 400px; height:250px; 
display: inline— block; overflow: hidden; border: 1px solid white; 
border - radius: 5px; — webkit — box — shadow: 5px 5px 8px rgba(0, 0, 0, 0.3); } 
.myBox p { display: inline; } 

/* 设 置 标签 的 样式 * / 

.myBox p span { position: absolute; display: inline- block; text ~ align: center; 
top:22px; background - image: — webkit — linear - gradient(top, white, blue); 
color: black; width: 150px; padding: 3px 10px; 

/* 在 左上 角 显 示 斜 角 标 签 * / 
left: - 50px; - webkit 一 transform: rotate( - 45deg); } 
button{ width:195pxy } 
</style></head> 
<body>< div align = "center"> 
<button id = "myBtnhdd"> 添 加 标签 </button > 
<button id = "myBtnRemove"> 移 除 标签 </button > 
<div class= "myBox">< img src = "img/B342. jpg"/></div></div> 
</body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , $ ("div. myBox"), append("<p> 
< span > 望京 球场 </span ></p >") 用 于 在 图 像 的 左上 角 添 加 标签 p 的 自 定义 CSS 样式 ; $$ ("div. 
myBox p"). remove() 用 于 移 除 图 像 左 上 角 的 标签 p。 在 jQuery 中 ,append() 方 法 用 于 在 被 选 元 素 的 
结尾 (仍然 在 内 部 ) 插 入 指定 内 容 , 该 方法 的 语法 格式 如 下 。 
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$ (selector).append(content) 


其 中 ,参数 content 规定 要 插入 的 内 容 ( 可 包含 HTML 标签 ) 。 

remove( ) 方 法 用 于 移 除 被 选 元 素 ,包括 所 有 文本 和 子 结 点 ,该 方法 不 会 把 匹配 的 元 素 从 jQuery 
对 象 中 删除 ,因此 可 以 在 将 来 再 使 用 这 些 匹 配 的 元 素 ; 但 除了 这 个 元 素 本 身 得 以 保留 之 外 ,remove() 
方法 不 会 保留 元 素 的 jQuery 数据 ,其 他 的 比如 绑 定 的 事件 ,附加 的 数据 等 都 会 被 移 除 。remove() 方 
法 的 语法 格式 如 下 。 





$ (selector). remove() 


此 实例 的 源 文件 名 是 myHtmlB342. html。 


158 ”以 6 面 构建 立方 体 并 进行 3D 视觉 旋转 


此 实例 主要 设置 -webkit-perspective、-webkit-perspective-origin、-webkit- transform-style 等 属 
性 ,从 而 实现 使 用 6 面 构建 立方 体 并 进行 3D 视觉 旋转 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 
时 ,构建 的 立方 体 将 在 10 秒 内 完成 围绕 XX 轴 的 360? 旋 转 , 且 永 不 停歇 ,如 图 158-1 所 示 。 有 关 此 实例 
的 主要 代码 如 下 。 
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图 158-1 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
< style type = "text/css"> 
井 outer { — webkit— perspective:600px; 
— webkit - perspective - origin: center center; } 
井 group { width: 200px; height: 200px; position: relative; 
— webkit — transform— style: preserve 一 3d; margin: 200px auto; 
— webkit ~ animation: scroll 10s linear infinite; } 
@— webkit — keyframes scroll { 0% { — webkit— transform: rotateX(0deg) } 
100% { — webkit— transform: rotateX(360deg) } } 
.myPlane { width: 200px; height: 200px; position: absolute; 
‘opacity: 0.9; border: 1px solid white; } 
#myPlanel { background - color: #10A6CE; } 
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#myPlane2 { background - color: #0073B3; - webkit — transform- origin: right; 
— webkit — transform: rotateY( - 90deg); } 
#myPlane3 { background- color: #07BEEA; - webkit - transform - origin: left; 
— webkit — transform: rotateY(90deg); } 
#myPlane4 { background - color: #29BAF0; - webkit - transform - origin: top; 
— webkit - transform: rotateX( ~ 90deg); } 
#myPlane5 { background— color: #6699CC; - webkit - transform - origin: bottom; 
— webkit — transform: rotateX(90deg); } 
#myPlane6 { background - color:navy; - webkit- transform: translateZ( 一 200px); } 
</style></head> 
<body><div id= "outer"><div id= "group"> 
<div id= "myPlanel" class = "myPlane"></div> 
<div id= "myPlane2" class = "myPlane"></div> 
<div id= "myPlane3" class = "myPlane"></div> 
<div id= "myPlane4" class = "myPlane"></div> 
<div id= "myPlane5" class = "myPlane"></div> 
<div id= "myPlane6" class = "myPlane"></div></div></div> 
</body ></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,-webkit-animation: scroll 10s linear 
infinite 表示 在 10 秒 内 以 线性 方式 完成 scroll 所 指定 的 360 旋转 ,上 且 永 不 停歇 ; -webkit-transform: 
rotateX(360deg) 表示 将 当前 元 素 旋转 360"。 当 以 3D 视觉 观察 旋转 时 ,通常 还 需要 设置 -webkit- 
perspective ,-webkit-perspective-origin、-webkit-transform-style 等 属性 。-webkit-perspective 属性 定 
义 3D 元 素 距 视图 的 距离 ,以 像素 计算 ,该 属性 通常 应 该 与 perspective-origin 属性 同时 使 用 。-webkit- 
perspective-origin 属性 定义 3D 元 素 所 基于 的 X 轴 和 Y 轴 ,该 属性 允许 改变 3D 元 素 的 底部 位 置 。 
-webkit-perspective-origin 属性 的 语法 格式 如 下 。 


— webkit — perspective ~ origin: x— axis y-axis; 


其 中 ,x-axis 定义 该 视图 在 X 轴 上 的 位 置 ,默认 值 是 50%, 可 能 的 值 有 left、 center, right、 
length、%; y-axis 定义 该 视图 在 Y 轴 上 的 位 置 ,默认 值 是 50% ,可 能 的 值 有 top、center、 bottom、 
length、% 。 

-webkit-transform-style 属性 规定 如 何在 3D 空间 中 呈现 被 嵌 套 的 元 素 ,该 属性 的 语法 格式 如 下 。 


— webkit ~ transform- style: flat|preserve— 3d; 


其 中 ,属性 值 flat 表示 子 元 素 将 不 保留 其 3D 位 置 ; 属性 值 preserve-3d 表示 子 元 素 将 保留 其 3D 
位 置 。 
此 实例 的 源 文 件 名 是 myHtmlB213. html。 


159 改变 透明 度 模拟 飞碟 在 星空 中 穿梭 的 效果 


此 实例 主要 通过 设置 opacity 属性 控制 飞碟 图 像 在 不 同位 置 的 透明 度 ,从 而 实现 模拟 飞碟 在 星空 
中 沿 着 椭圆 形 的 轨道 围绕 星云 穿梭 时 的 时 隐 时 显效 果 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 
时 ,6 个 飞碟 将 围绕 椭圆 形 的 轨道 飞行 ,如 果 飞 碟 飞 到 星云 的 背面 位 置 , 则 以 半 透 明 效 果 显示 ,反之 以 
正常 效果 显示 ,如 图 159-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 

















<!doctype html >< html >< head><meta charset = "UTF - 8"> 
< script type = "text/javascript"> 
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window. onload = function() { 

var myUFO = new myRound( "myBox", 120, 90, 300, 80, 230, 0.01); 
setInterval (function( ) {myUFO. roundMove() }, 20) } 

function myRound(id, w, h, x, y, r, dv, rh, ah) { 

证 (ah== undefined) ah= 1; 





// 旋 转速 度 
var pi= 3.1415926575;var d=pi/2; 
var pd = Math. asin(w/2/r); 
Var smove = true; var myImgs = []; 
var objectId = id; 
var o = document. getElementById(objectId) ; 
o. style. position = "relative"; 
var myArray = o. getElementsBYTagName(" img" ); 
var pn = myArray. length; // 图 片 数量 
var ed = pi* 2/pn; 
for (n=0; n<myArray. length; nt+) { // 当 鼠标 指针 离开 UE0 时 继续 飞行 
myArray[n]. onmouseout = function() { smove= true; } 
myArray[n].onmouseover = function() {  // 当 鼠标 指针 悬浮 在 UFEO 上 停止 飞行 
smove= false; } 
myArray[n]. style. position = "absolute"; 
myImgs. push( myArray[n]); 
} 
this. roundMove = function() { 
for (n=0; n<=pn-1; n++){ 
var 0o= myImgs[n]; 
var ta= Math. sin(d + ed* n), strFilter; 
if (ta<0) 
o. style. left = Math. cos(d+ edxn-pd)x*rt+x+"px"; 
else 
o. style. left = Math. cos(d+ edx n+pd) x*r+x+ "px"; 
o.style.top= tax rh+ rhtyt+"px"; 
var zoom = Math.abs(Math. sin( (d+ edx n)/2+pi/4)) * 0.5+0.5; 
o. style. width = Math. abs(Math. cos(d+ ed* n+pd) — Math.cos(d+edxn— pd))* zoomx r+ "px"; 
o. style. height = zoom * h + "px"; 
if (ta<0) { 
ta= (ta+1)*80+20; o.style.zIndex=0; 
}else { ta=100; o.style.zIndex=1 } 
o. style. opacity = ta/100; // 改 变 飞碟 在 不 同位 置 的 透明 度 
} 
if (smove) 
d=d+t+dv; }} 
</script> 
<! -设置 星空 背景 -> 
<style type = "text/css"> 
div { width: 600px; height: 300px;background:url("img/all9B. jpg" ); 
border - radius: 10px; } 
</style></head> 
<body> 
<! 一 设置 绕 轨 道 飞 行 的 飞碟 图 像 -> 
<div id= "myBox"> 
< img src = "img/Al19. png"/>< img src= "img/Al19. png"/> 
< img src = "img/R119. png"/>< img src = "img/A119. png"/> 
< img src= "img/Al19. png"/>< img src="img/Al19. png"/></div></body ></html > 
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上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , o. style. opacity 一 ta/100 
飞碟 图 像 的 透明 度 。 在 CSS 中 ,opacity 属性 用 于 设置 不 透明 级 别 , 该 属性 值 的 范 
1.0( 完 全 不 透明 ) ,因此 在 实例 代码 中 使 用 了 100 这 个 除数 。 

此 实例 的 源 文件 名 是 myHtmlB320. html。 

















于 设置 
是 0.0( 完 全 透明 ) 一 
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160 ”根据 鼠标 指针 的 轨迹 确定 如 何 旋转 和 平移 图 像 


此 实例 主要 在 mousemove 和 mouseleave 事件 中 使 用 translate() rotateX() ,rotateY() 等 方法 ， 
从 而 实现 根据 鼠标 指针 的 滑动 轨迹 确定 如 何 旋转 和 平移 图 像 。 当 在 Google Chrome 浏览 器 中 显示 该 
页 面 时 ,如 果 鼠 标 指针 在 图 像 上 从 左上 角 向 右 下 角 滑 动 , 则 图 像 在 旋转 和 平移 之 后 的 效果 如 图 160-1 
所 示 ; 如 果 鼠 标 指针 在 图 像 上 从 右上 角 向 左下 角 滑 动 . 则 图 像 在 旋转 和 平移 之 后 的 效果 如 图 160-2 所 
示 。 有 关 此 实例 的 主要 代码 如 下 。 








百 一 口 Xx 百 - 口 X 
口 myHtml8347 html x 口 myHtmlB347 html x 
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function animate3dElement(element, distance, rotationMultiple, startX, startY, animate, setCssStyles){ 
var myOffset, myTop, myLeft, myWidth, myHeight ;myOffset = $ (element). offset(); 
myTop = myOffset. top;myLeft = myOffset. left; 
myWidth=$ (element). innerWidth( ) ;myHeight =$ (element). innerHeight(); 
animate(element, startX, startY, rotationMultiple, distance, setCssStyles); 
$ (element). mousemove(function(event){ // 响 应 鼠标 指针 移动 事件 
var pctX = ((event. pageX - myLeft)/myWidth) — 0.51+ startX; 
var pctY = ( (event. pageY — myTop) /myHeight) — 0.5+ startY7 
animate(this, pctX, pctY, rotationMultiple, distance, setCssStyles); 
Ds; 
$ (element).mouseleavel( function( ){ // 响 应 鼠标 指针 离开 事件 
animate(this, startX, startY, rotationMultiple, distance, setCssStyles); 
1D);} 
// 旋 转 和 平移 图 像 的 回调 函数 
function animate (element, pctX, pctY, rotationMultiple, distance, callback){ 
Var rotateX = pctY * rotationMultiple * — 180; 
Var rotateY = pctX * rotationMultiple * 180; 
Var translateX = pctX * distance; var translateY = pctY * distance; 
$ (element). children() .each( function( index, element){ 
callback(element, index, translateX, translateY, rotateX, rotateY); 
Di}; 
function setCssStyle(element, index, translateX, translateY, rotateX, rotateY, distance){ // 设 置 图 像 
的 旋转 和 平移 


Var x= translateX * index;var y= translateyY * index; 


<!doctype html >< html >< head >< meta charset = "UTF — 8"> 
<script src= "js/jquery - 3.1.1.min. js"></script >< script type = "text/javascript"> 


$ (element).css('— webkit ~ transform', 'translate('+ x +'px,'+ y +'px) rotateX('+ rotateX +'deg) 
rotateY('+ rotateY +'deg)'); 


}; 

$ (function( ){ 

animate3dElement('.myAnimate', 1000,0.5,0,0,animate, setCssStyle); 
$ (window). resize( function( ){ 


animate3dElement('.myAnimate', 1000, 0.5,0,0,animate, setCssStyle); });}); 
</script > 


< style type= "text/css"> 
.myBox { width: 100% ; padding — bottom: 65% ; } /x* 设置 盒子 的 基本 样式 x*/ 
/* 设 置 图 像 的 基本 样式 */ 
.myBox ;img { width: 80% ;left: 10% ; top: 10% ; position: absolute; } 
</style></head> 


<body><div align = "center"><div class = "myBox myAnimate"> 
< img src = "img/B302.png" /></div></div></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , $ (element). css ('-webkit 
-transform' ，'translate(' 十 x 十 'px , ' 十 y 十 'px) rotateX(' 十 rotateX 十 'deg) rotateY(' 十 rotateY 
十 'deg)') 用 于 根据 指定 的 参数 对 图 像 进行 旋转 和 平移 。 在 CSS 中 ,translate(x,y) 方 法 用 于 根据 参数 
指定 的 x、y 坐标 平移 元 素 , rotateX (angle) 方 法 用 于 根据 参数 围绕 X 轴 旋 转 指定 的 角度 ,rotateY 
(angle) 方 法 用 于 根据 参数 围绕 Y 轴 旋 转 指 定 的 角度 。event. pageX 和 event. pageY 用 于 在 鼠标 指针 
滑动 时 获取 其 坐标 位 置 。 

此 实例 的 源 文件 名 是 myHtmlB347. html。 
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161 使 用 负数 参数 获取 图 像 的 水 平和 垂直 镜像 


此 实例 主要 通过 在 scaleX() 和 scaleY() 方 法 中 使 用 负数 参数 获取 图 像 的 水 平和 垂直 镜像 。 当 在 
Google Chrome 浏览 器 中 显示 该 页 面 时 将 显示 原始 的 图 像 ; 单 击 “ 显 示 水 平 镜像 ”按钮 ,该 图 像 的 水 平 
镜像 效果 如 图 161-1 所 示 ; 单 击 “ 显 示 垂 直 镜 像 ” 按 钮 ,该 图 像 的 垂直 镜像 效果 如 图 161-2 所 示 。 有 关 
此 实例 的 主要 代码 如 下 。 








百 - Do x 百 - Do x 


D myHemlB356 html x D myHemlB356 html x 
“3 © DfileV/DVmywWorwmyHtml8356 安 


~- 3 © Dfile///D/myWork/myHtmlB35€ 字 


量 示 水 平 午 像 ”| | 虹 示 香 直 潮 像 ”| 。 旺 示 原始 图 铺 量 示 水 平 讲 像 ”| | 县 示 香 直 潮 像 ”| | 显示 原始 图 急 
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<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<script src= "js/jquery - 3.1.1.min. js"></script >< script type = "text/javascript"> 
$ (function() { 


$ ("#myHorizontalMirror").click(function() { // 显 示 水 平 镜像 
$ ("img").css("— webkit — transform", "scalex( —1)"); }); 
$ ("#myVerticalMirror"). click(function() { // 显 示 垂 直 镜 像 
$ ("img").css("— webkit — transform"，"scaleY( —1)"); }); 
$ ("#myInitial").click(function() { // 显 示 原 始 图 像 
$ ("img").css("— webkit— transform", "initial"); });}); 
</script> 


<style type= "text/css"> 
* { margin: 0; padding: 0; } 
img{ width:350px; height:350px; } 
button{ width:120px; margin— right: 5px; margin - top: 15px; } 
</style></head> 
<body>< div align = "center"> 
<button id = "myHorizontalMirror"> 显 示 水 平 镜像 </button > 
<button id= "myVerticalMirror"> 显 示 垂直 镜像 </button > 
<button id= "myInitial"> 显 示 原 始 图 像 </button > 
<p>< img src = "img/B207A. png"/></p></div></body></html > 
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上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , $ ("img"). css ("-webkit- 
transform","scaleX(-1)") 用 于 显示 图 像 的 水 平 镜像 , $ ("img"). css("-webkit-transform", "scaleY 
(-1)") 用 于 显示 图 像 的 垂直 镜像 。 在 CSS3 中 ,scaleX(x) 用 于 通过 设置 X 轴 的 值 来 定义 水 平方 向 的 
缩放 转换 ,但 是 如 果 参 数 为 负数 ,将 以 水 平 镜像 方式 完成 缩放 ; scaleY(y) 用 于 通过 设置 Y 轴 的 值 来 定 


义 垂直 方向 的 缩放 转换 ,但 是 如 果 参 数 为 负数 ,将 以 垂直 镜像 方式 完成 缩放 。 


此 实例 的 源 文件 名 是 myHtmlB356. html。 


162 ”以纯 CSS 使 用 两 幅 图 像 实现 星 级 评分 特效 








此 实例 主要 通过 使 用 两 幅 图 像 以 纯粹 的 CSS 代码 实现 了 星 级 评分 特效 。 当 在 Google Chrome 浏 
览 器 中 显示 该 页 面 时 ,如 果 和 鼠标 指针 悬浮 在 第 3 颗 星 上 , 则 会 显示 一 个 浮动 框 提示 信息 ,例如 "上 将 ”， 
如 图 162-1 所 示 , 单 击 则 会 保存 选择 结果 。 有 关 此 实例 的 主要 代码 如 下 。 
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<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<style type= "text/css"> 
.star_ bg { top:5px; width: 120px; height: 20px; overflow: hidden; 
background: url(img/B163. png) repeat - x;position: relative; } 
.star { height: 100% ; width: 24px;line— height: 6em; 
position: absolute; z- index:6;} 
.star: hover { background: url(img/B163. png) repeat -x 0 - 20px! important; 
left: 0; z- index: 4; } 


.star 1 { left: 
.star 2 { left: 
.star 3 { left: 
.star 4 { left: 
.star 5 { left: 
.star_1:hover { width: 24px; 
.star 2:hover { width: 48px; 
.star_ 3:hover { width: 72px; 
.star 4:hover { width: 96px; 


0;} 

24px; } 
48px; } 
72px; } 
96px; } 


.star 5:hover { width: 120px; } 
label {display: block;height: 100% ; width: 100% ;cursor: pointer;} 
.score { position: absolute; clip: rect(0 0 0 0);} 

. score:checked + . star { background: url(img/B163. png) repeat ~- x 0 — 20px; 
left: 0; z— index: 1;} 


. Score_1:checked ~ .star 1 { width: 
.score 2:checked ~ .star 2 { width: 
.score 3:checked ~ .star 3 { width: 
.score 4:checked ~ .star 4 { width: 
.score 5:checked ~ .star 5 { width: 


24px; } 
48px; } 
72px; } 
96px; } 
120px; } 
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. star_bg:hover . star { background— image: none; } 
p { float: left; text- align: center;line— height: 2px;} 
</style></head> 
<body><p> 晋 升级 别 : <div id= "starBg" class = "star bg"> 
< input type = "radio" id = "starScorel" class = "score score 1" value = "1"”name = "score"> 
<a href ="#starScorel" class= "star star 1" title= "少将 ">< label for = "starScorel"> 少 将 </label></a> 
< input type = "radio" id= "starScore2" class = "score score 2" value= "2" name = "score"> 
<a href =" 间 starScore2" class= "star star 2" title= "中 将 ">< label for = "starScore2"> 中 将 </label></a> 
< input type = "radio" id= "starScore3" class = "score score 3" value = "3" name = "score"> 
<a href ="#starScore3" class= "star star 3" title= "上 将 ">< label for = "starScore3"> 上 将 </label></a> 
< input type= "radio" id= "starScore4" class = "score score 4" value= "4" name = "score"> 
<a href =" 间 starScore4" class= "star star 4" title= "大 将 "><label for = "starScore4"> 大 将 </label></a> 
< input type = "radio" id= "starScore5" class = "score score 5" value= "5" name = "score"> 
<a href =" 间 starScore5" class= "star star 5" title= "元 帅 ">< label for = "starScore5"> 元 帅 </label ></a> 
</div></p></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,z-index 属性 用 于 设置 元 素 的 堆 释 顺 
序 ,拥有 更 高 堆 关 顺序 的 元 素 总 会 处 于 堆 释 顺序 较 低 的 元 素 的 前 面 。 在 此 实例 中 ,. star 的 z-index 属 
性 值 6 大 于 . star: hover 的 z-index 属性 值 4, 因 此 它 总 出 现在 其 前 面 ,具体 值 无 关 紧 要 ,只 比较 相对 大 
小 。clip 属性 用 于 剪裁 绝对 定位 元 素 ,其 语法 格式 如 下 。 

clip:auto | < shape > 

< shape >:rect(<nunmber >|auto < number >|auto < number >| auto <number>|auto) 

其 中 ,auto 表示 对 象 无 前 切 。rect(< number >|auto < number >|auto < number >| auto < number >| 
auto) 表 示 依 据 上 - 右 -下 - 左 的 顺序 提供 自 对 象 左 上 角 为 (0.0) 坐 标 计算 的 4 个 偏 移 数值 ,其 中 任 一 数 
值 都 可 用 auto 替换 , 即 此 边 不 剪 切 。 上 - 左 方位 的 裁剪 为 人 0 开始 剪裁 直到 设 定 值 , 即 上 - 左 方位 的 
auto 值 等 同 于 0; 右 -下 方位 的 裁剪 为 从 设 定 值 开始 剪裁 直到 最 右边 和 最 下 边 , 即 右 -下 方位 的 auto 值 
为 盒子 的 实际 宽度 和 高 度 ,例如 clip:rect(auto 50px 20px auto) 表 示 上 边 不 剪 切 ,右边 从 左 起 第 50 个 
像素 开始 剪 切 直到 最 右边 ,下 边 从 上 起 第 20 个 像素 开始 剪 切 直到 最 底部 ,左边 不 剪 切 。 在 此 实例 中 ， 
clip: rect(0 0 0 0) 实 际 上 是 全 部 裁剪 。 

此 实例 的 源 文件 名 是 myHtmlB163. html。 


163 ”使 用 盒子 阴影 模拟 半 透 明 的 性 置 层 特效 


此 实例 主要 通过 设置 box-shadow 的 阴影 尺寸 超大 实现 在 图 像 的 周围 产生 半 透 明 的 遮 音 层 。 当 
在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,如 果 鼠 标 指针 未 悬浮 在 图 像 上 , 则 显示 的 4 幅 图 像 如 
图 163-1 所 示 ; 如 果 鼠 标 指 针 悬 浮 在 第 一 幅 图 像 上 , 则 放大 该 图 像 并 在 图 像 的 周围 产生 半 透 明 的 遮 单 
层 ,如 图 163-2 所 示 。 当 然 ,如 果 鼠 标 指 标 悬 浮 在 其 他 图 像 上 ,也 能 放大 对 应 的 图 像 并 在 该 图 像 的 周围 
产生 半 透 明 的 遮 单 层 。 有 关 此 实例 的 主要 代码 如 下 。 





<!doctype html >< html><head><meta charset = "UTF - 8"> 
< style type = "text/css"> 

* { margin: 0; padding: 0; } 

/* 盒 子 水 平 居中 * / 

div{ margin: 50px auto; width:410px; height:155px;} 

img { border - radius: 5px; float: left; height: 150px; width: 100px; 
cursor:pointer; border: lpx solid lightgreen; 
/* 使 用 过 渡 动画 放大 图 像 * / 
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transition:transform 0.2s ease;} 
/x* 鼠标 指针 悬浮 时 产生 造 单 层 并 放大 图 像 * / 
img:hover{ box- shadow:0 0 0 1920px rgba(0,0,0,0.8);transform: scale(1.5); } 
</style></head> 
<body>< div>< img src = "img/B268A. jpg">< img src = "img/B268B. jpg"> 
< img src= "img/B268C. jpg">< img src = "img/B268D. jpg"></div></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,box-shadow:0 0 0 1920px rgba(0,0， 
0,0. 8) 用 于 在 鼠标 指针 悬浮 于 图 像 上 时 在 其 周围 产生 一 个 尺寸 为 1920px 的 半 透 明 阴影 ,因为 1920px 
这 个 尺寸 足以 覆盖 目前 的 普通 显示 器 屏幕 ,所 以 具有 与 遮 单 层 相同 的 效果 。 在 CSS3 中 ,box-shadow 
属性 用 于 向 盒子 添加 一 个 或 多 个 阴影 ,该 属性 由 逗号 分 隔 阴影 列表 ,每 个 阴影 由 2 一 4 个 长 度 值 . 可 选 
的 颜色 值 以 及 可 选 的 inset 关键 字 来 规定 ,省 略 长 度 的 值 是 0。 

此 实例 的 源 文 件 名 是 myHtmlB268. html。 
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164 通过 使 用 线性 渐变 实现 纸张 卷 角 效果 


此 实例 主要 通过 在 线性 渐变 方法 中 规定 颜色 (透明 ) 范 围 创建 背景 图 像 ,从 而 实现 纸张 卷 角 的 特 
效 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 .纸张 卷 角 的 效果 如 图 164-1 所 示 。 有 关 此 实例 的 
主要 代码 如 下 。 
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<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<style> 
body { background: lightgrey;} 
. myCorner { position: absolute; top: 50% ; left: 50% ; border — radius:0.5em; 
transform: translate( ~- 50%, -50%);width: 350px; padding: 40px; 
/ * 通过 透明 裁剪 右上 角 */ 
background: linear — gradient( — 150deg, transparent 1.5em, green 0);} 
/* 通 过 transparent 和 box - shadow 生成 卷 角 阴影 * / 
.myCorner:before { content: ''; position: absolute;top: 0; right: 0; 
/* 通过 透明 裁剪 卷 角 和 矩形 的 另 一 半 */ 
background: linear - gradient(to left bottom, transparent 50%, rgba(0, 0, 0, 0.1) 9%, rgba(0, 
0, 0, 0.9) 99%); 
background - repeat: no - repeat; width: 1.73em; height: 3em; 
transform: translateY( - 1. 3em) rotate( - 30deg); 
transform- origin: bottom right;border — bottom— left- radius: inherit; 
box — shadow: — 0.2em 0.2em 0.3em - 0.1lem rgba(0, 0, 0, 0.15);} 
</style></head> 
<body >< div class = ”myCorner"> 1945 年 ,第 二 次 世界 大 战 接近 尾声 ,作为 邪恶 轴 心 重要 成 员 的 日 本 ,其 器 张 态 
势 已 成 强 弩 之 末 。 是 年 ,决定 战局 走向 的 冲绳 岛 战役 拉 开 序幕 ,成 千 上 万 斗志 昂扬 的 美国 大 兵 被 派 往 冲 绳 , 等待 
他 们 的 则 是 敌 军 重兵 防守 、 凶 险 异 常 的 钢 锯 岭 。</div></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , background: linear-gradient 
(一 150deg， transparent 1. 5em，green 0) 表 示 透 明 色 从 右上 角 开 始 至 1. 5em, 然 后 背景 的 其 余部 分 用 
绿色 填充 , 它 的 作用 就 是 用 透明 色 裁 前 右上 角 , 如 图 164-2 所 示 ; background: linear-gradient(to left 
bottom, transparent 50%, rgba(0, 0, 0, 0. 1) 9%, rgba(0, 0, 0, 0.9) 99%) 表 示 完 全 透明 色 从 右 
上 角 开 始 至 对 角 线 (50%) ,然后 背景 的 其 余部 分 用 不 同 的 透明 度 秋 加 在 下 面 的 元 素 上 ,这 个 矩形 在 被 
添加 阴影 之 后 旋转 30 放 在 裁 角 的 位 置 上 就 形成 了 卷 角 ,如 图 164-3 所 示 。 

此 实例 的 源 文 件 名 是 myHtmlB278. html。 
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165 ”使 用 模糊 和 灰 度 滤 镜 处 理 未 选中 图 像 


此 实例 主要 使 用 not 选择 器 筛选 hover 选择 器 之 外 的 图 像 , 从 而 对 未 选中 的 图 像 使 用 模糊 滤 镜 和 
灰 度 滤 镜 进行 处 理 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,如 果 鼠 标 指针 悬浮 在 左边 的 图 像 
上 ,将 以 清晰 方式 显示 该 图 像 ,其 他 图 像 则 以 模糊 和 灰 度 效果 显示 ,如 图 165-1 所 示 ; 如 果 鼠 标 指针 悬 
浮 在 中 间或 右边 的 图 像 上 ,将 以 清晰 方式 显示 该 图 像 ,其 他 图 像 则 以 模糊 和 灰 度 效果 显示 。 有 关 此 实 
例 的 主要 代码 如 下 。 
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图 165-1 





<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<style type= "text/css"> 
img { width: 100px; height: 100px; margin: 10px; } 
ul, li{ list- style: none;} 
ul lif{ float: left; } 
/* 表 示 未 选中 的 图 像 ,使 用 灰 度 滤 镜 和 模糊 滤 镜 处 理 图 像 * / 
img:not( :hover) { - webkit- filter: grayscale(1) blur(3px); } 
</style></head> 
<body> 
<ul><1i>< img src= "img/B065. jpg"/></li><1i>< img src = "img/B066A. png"/></1i> 
<1i>< img src="img/B209A.png"/></li></ul ></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,img:not(:hover){ } 表 示 选 择 不 在 
hover 状态 的 img 元 素 。 在 CSS3 中 ,hover 选择 器 用 于 选择 鼠标 指针 浮动 在 上 面 的 元 素 ; not 选择 器 
则 用 于 匹配 非 指定 元 素 /选择 器 的 每 个 元 素 。 

此 实例 的 源 文件 名 是 myHtmlB307. html。 


166 ”在 弹出 提示 框 时 模糊 页 面 中 的 其 他 部 分 


此 实例 主要 对 body 使 用 模糊 滤 镜 ,从 而 实现 在 弹出 提示 框 时 模糊 显示 页 面 的 其 他 部 分 。 当 在 
Google Chrome 浏览 器 中 显示 该 页 面 时 , 单 击 “ 开 园 时 间 ” 按 钮 ,将 正常 弹出 一 个 提示 框 , 但 是 页 面 的 
其 他 部 分 (例如 按钮 图像. 背景 等 ) 变 得 模糊 ,如 图 166-1 所 示 , 在 关闭 提示 框 之 后 页 面 恢复 正常 显示 ; 
单 击 “ 门 票 价格 ”按钮 ,将 实现 类 似 的 功能 。 有 关 此 实例 的 主要 代码 如 下 。 

百 - oo x 








[DY myHtmlB309 html x 
CD file///D/myWork/myHtmlB30s 字 | 三 








filey//DymyWork/myHtmlB8309.html 上 的 网 页 旦 示 


FE : 0800-20.00 





[Ca] 








图 166-1 


HTML5+CSS3 炫 酷 应 用 实例 集锦 








<!doctype html >< html >< head>< meta charset = "UTF - 8"> 
< script src= "js/jquery -3.1.1.min. js"></script>< script language = "javascript"> 
$ (document). ready(function() { 
$ (" 井 myBtnTime") .click(function() {// 开 网 时 间 
$ (document. body). css(' — webkit — filter', ‘blur(3px)'); 
alert(' 开 网 时 间 : 08:00 一 20:00'); 
$ (document. body). css(' — webkit — filter', 'blur(0px)'); 
DD); 
$ (" 井 myBtnPrice"). click(function() {// 门 票 价格 
$ (document. body). css(' - webkit — filter', ‘blur(3px)'); 
alert("", ' 门 票 价格 : 20 元 /人 '); 
$ (document. body). css(' — webkit — filter', ‘blur(0px)'); });}); 
</script > 
<style type= "text/css"> 
x*{ margin: 0; 上 
. myBody{ height :100vh; width:100vw; background:url( img/BO55A. png); } 
button { width: 190px; margin: 3px 5px; } 
img{ width:400px; height:250px; border - radius: 5px; margin: 1px 5px;} 
</style></head> 
<body> 
<div class = "myBody"><p>< button id= "myBtnTime"> 开 同时 间 </button > 
<button id = "myBtnPrice"> 门 票 价格 </button></p> 
< img src = "img/B179A. jpg"/></div></body ></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , $ (document. body). css ('-webkit 


filter'，'blur(3px) ') 表 示 对 document. body 中 的 所 有 元 素 模糊 3px,3px 表示 模糊 半径 。 
此 实例 的 源 文 件 名 是 myHtmlB309. html 


167 ”使 用 任意 颜色 设置 png 图 像 的 轮廓 颜色 


此 实例 主要 通过 drop-shadow() 实 





f+ png 图 像 的 文字 市 颜色 。 当 在 Google 
Chrome 浏览 器 中 显示 该 页 面 时 ,艺术 字 “ 生 闸 色 是 粉色 的 , 单 击 “ 请 选择 颜色 : ”右边 的 颜色 
选择 器 按钮 ,在 弹出 的 “颜色 ”对 话 框 中 任 色 . 例 如 “青色 ”, 然 后 单 击 " 设 置 新 的 颜色 ” 按 
钮 , 则 将 以 青色 显示 艺术 字 “ 生 日 快乐 ”, 如 图 167-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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<!doctype html ><html >< head><meta charset = "UTF — 8"> 
<script src= "js/jquery- 3.1.1.min. js"></script >< script type= "text/javascript"> 
$ (function(){ 
$ (" 井 myBtnSet") .click( function(){// 设 置 新 的 颜色 
$ ("img").css(" - webkit- filter”", 
"drop— shadow(384px 0 Opx " + $ ("input[ type = color]"). val() + ")"); 
1D);}); 
</script> 
<style type= "text/css"> 
body{ background: black;} 
img{ width:384px; height :250px; position:relative; 
/* 坐标 为 负 值 主要 是 为 了 隐藏 原始 图 像 * / 
left: - 384px; top: - 30px;border — right:384px solid transparent; 
/* 用 户 看 到 的 图 像 则 是 下 面 这 行 代码 产生 的 阴影 * / 
— webkit ~ filter:drop— shadow(384px 0 Opx pink);} 
. myBox{ width:390px; height:450px; overflow:hidden; } 
button{ margin - top:10px; width:200px; } 
span{ color: snow; } 
</style></head> 
<body>< div align = "center"> 
<div >< span > 请 选择 颜色 : </span>< input type = "color"> 
< button id = "myBtnSet"> 设 置 新 的 颜色 </button ></div> 
<div class= "myBox"> < img src = "img/B360. png”width ="384" height = "250"/> </div> </div > </body > 
</html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,-webkit-filter: drop- shadow(384px 0 
0px pink) 表 示 使 用 滤 镜 为 元 素 (img 标签 ) 产 生 一 个 粉色 阴影 ,384px 表示 阴影 在 X 轴 上 的 偏 移 距离 ， 
由 于 元 素 (img 标签 ) 已 经 设置 left:-384px 和 width:384px, 所 以 用 户 看 到 的 只 是 粉色 阴影 ,原始 图 像 
不 可 见 。 

此 实例 的 源 文件 名 是 myHtmlB360. html。 


168 ”模拟 不 用 的 扑 死 牌 始终 插 在 最 后 的 效果 


此 实例 主要 通过 控制 元 素 ( 扑 克 牌 ) 的 z-index 属性 值 保持 最 小 来 模拟 不 用 的 扑克 牌 始终 择 在 一 
全 的 最 后 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,4 张 扑克 牌 全 在 一 起 .使 用 鼠标 单 击 最 上 面 
的 扑克 牌 ( 红 桃 8) , 则 该 扑克 牌 将 向 右 滑 动 , 然 后 向 左 滑动 插 在 此 释 扑 克 牌 的 最 后 面 ,如 图 168-1 所 
示 , 此 时 最 上 面 的 扑克 牌 变 成 大 王 ; 再 次 使 用 鼠标 单 击 最 上 面 的 扑克 牌 (大 王 ), 则 该 扑克 牌 将 向 右 滑 
动 , 然 后 向 左 滑动 插 在 此 笃 扑 克 牌 的 最 后 面 , 如 图 168-2 所 示 ,此 时 最 上 面 的 扑克 牌 变 成 红 桃 ,以 此 
类 推 。 有 关 此 实例 的 主要 代码 如 下 。 





<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<script src= "js/jquery - 3.1.1.min. js"></script >< script type = "text/javascript"> 
$ (function() { 
War == 
$ ("p").click(function() { // 响 应 使 用 鼠标 单 击 扑克 牌 
$ (this).animate( {left: "120px"}, 1000, function() { 
// 保 持 当 前 的 扑克 牌 的 z- index 属性 值 始 终 是 最 小 的 
$ (this).css("z— index", z——) 
}).animate( {left: "10px"}, 1000); }) }); 
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</script > 
<style type= "text/css"> 
Pp { width: 108px; height: 145px; z ~ index: 0; 
position: absolute; left: 10px; border— radius: 15px; } 
p img { width: 108px;height: 145px; border - radius: 10px; } 
body { background - color: lightgray; } 
div{ position: absolute; margin: 10px 20%; } 
</style></head> 
<body><div><p>< img src = "img/B265A. jpg"/></p><p>< img src = "img/B265B. jpg"/></p> 
<p>< img src = "img/B265C. jpg"/></p><p>< img src = "img/B265D. jpg"/></p></div> 
</body></html> 





上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , $ (this). css("z-index"，z-) 用 于 在 
当前 扑克 牌 向 右 滑 动 之 后 立即 设置 其 z-index 属性 为 最 小 值 ,因此 它 向 左 滑动 时 始终 在 最 后 面 。 在 
CSS 中 ,z-index 属性 用 于 设置 元 素 的 堆 释 顺序 ,拥有 更 高 堆 释 顺序 的 元 素 总 是 处 于 堆 释 顺序 较 低 的 
元 素 的 前 面 , 即 该 属性 是 设置 一 个 定位 元 素 沿 Z 轴 的 位 置 ,Z 轴 定 义 为 垂直 延伸 到 显示 区 的 轴 ; 如 果 
为 正 数 , 则 离 用 户 更 近 , 为 负数 表示 离 用 户 更 远 。 

此 实例 的 源 文件 名 是 myHtmlB321. html。 
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169 ”将 元 素 的 属性 值 作为 图 像 的 标题 显示 


此 实例 主要 在 content 属性 中 通过 “attr( 属 性 名 )” 这 种 形式 来 获取 ( 超 链 接 ) 元 素 的 属性 值 ,从 而 
实现 将 该 属性 值 作为 图 像 的 标题 来 显示 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 将 通过 attr 
(title) 获 取 两 个 超 链接 的 title 属性 值 .并 将 该 属性 值 作 为 图 书 的 书 名 来 显示 ,如 图 169-1 所 示 。 有 关 
此 实例 的 主要 代码 如 下 。 


<!doctype html >< html >< head >< meta charset = "UTF — 8"> 
< style type = "text/css"> 
a:after{content:attr(title);display: block; text— align: center; 
margin — top: 1px; width:200px;font - size: 18px;font - weight: bold; 
color: black; margin left: 80px; font - family: 华文 隶书 站 
a{text — decoration:none;margin - left: 80px;} 
img{ width: 200px; height: 200px;margin: 5px;} 
</style></head> 
<body><p><a href = "http://item. jd. com/11144230.html" title= "算法 导论 ( 原 书 第 3 版 )"> 
< img src= "img/B027A. jpg"/></a></p> 
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<p><a href = "http://item. jd. com/10951037. html" title = "JavaScript 高 级 程序 设计 " > < img src = "ing/ 
B027B. jpg"/></a></p></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,在 页 面 上 用 (图 书 封面 ) 图 像 来 显示 
超 链 接 , 并 在 超 链接 中 指定 title 属性 值 ; 在 图 像 下 面 显示 的 书 名 是 在 CSS 样式 中 通过 “content:attr 


(title) ”这 种 形式 获取 的 超 链 接 信息 ,然后 就 可 以 按照 常用 的 方式 设置 书 名 的 字体 ,大 小 .颜色 等 属性 。 
此 实例 的 源 文件 名 是 myHtmlB027. html。 
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图 169-1 


170 ”使 用 AlloyImage 对 图 像 进行 柔 化 处 理 


此 实例 主要 通过 使 用 腾讯 公司 的 开源 插件 AlloyIlmage 对 图 像 进行 柔 化 特效 处 理 。 当 在 浏览 器 


中 显示 该 页 面 时 将 显示 未 经 处 理 的 图 像 单 击 * 柔 化 图 像 "按钮 , 则 图 像 将 变 得 模糊 起 来 ,如 图 170-1 所 
示 ; 单 击 “ 撤 销 柔 化 "按钮, 图像 将 恢复 原样 。 有 关 此 实例 的 主要 代码 如 下 。 


<!doctype html ><html >< head >< meta charset = UTF - 8> 
<script src= "js/jquery- 3.1.1.min. js"></script> 
< script src= "js/alloyimage. js"></script>< script language = "javascript"> 
$ (document). ready(function() { 
var myImage = $ ("#myJpg").get(0); 
var luoImage = AlloyImage(myImage); 
$ (" 井 myBtnSoften" ). click(function() { // 柔 化 图 像 


AlloyImage(myImage). ps("soften"). replace(myImage); 
Ds; 
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$ ("#myBtnUndo").click(function() { // 撤 销 柔 化 
luoImage. replace(myImage); });}); 
</script ></head> 
<body>< img id = "myJpg" src= "img/a031. jpg" /> 
<p>< input type= "button" value= " 柔 化 图 像 " id= "myBtnSoften” style= "width:180px"> 
< input type = "button" value = "撤销 柔 化 " id= "myBtnUndo" style= "width:195px"></p> 
</body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,AlloyImage(mylmage). ps("soften"). 
replace(mylImage) 中 的 mylmage 是 将 被 处 理 的 图 像 ,soften 表示 对 图 像 进行 柔 化 处 理 。 
此 实例 的 源 文件 名 是 myHtmlA031. html。 





百 - 0o x 


localhost63342/myWor x 


© 日 localhost53342/myWork/my 安 三 





化 图 得 _ 数 锁 落 化 _ 











图 170-1 


171 使 用 AlloyImage 对 图 像 进行 黑白 处 理 


此 实例 主要 通过 使 用 腾讯 公司 的 开源 插件 Alloylmage 将 彩色 图 像 转换 为 黑白 图 像 。 当 在 浏览 
器 中 显示 该 页 面 时 将 显示 未 经 处 理 的 图 像 , 单 击 * 转 换 为 黑白 图 像 "按钮 ,图 像 将 以 黑白 效果 显示 ,如 
图 171-1 所 示 ; 单 击 “撤销 转换 "按钮, 图像 将 恢复 原样 。 有 关 此 实例 的 主要 代码 如 下 。 
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<!doctype html >< html >< head >< meta charset = UIF -8> 
< script src= "js/jquery - 3.1.1.min. js"></script> 
< script src= "js/alloyimage. js"></script>< script language = "javascript"> 
$ (document). ready(function() { 
var myImage = $ ("#myJpg").get(0); 
var luoImage = AlloyImage(myImage); 
$ ("#myBtnStrongGray").click(function() { // 转 换 为 黑白 图 像 
AlloyImage(myImage). ps("strongGray" ). replace(myImage) ; 
1D); 
$ ("#myBtnUndo").click(function() { // 撤 销 转换 
luoImage. replace(myImage); 
D2;}); 
</script ></head> 
<body >< img id= "myJpg" src= "img/a031. jpg" /> 
<p>< input type = "button” value= "转换 为 黑白 图 像 " id = "myBtnStrongGray" style= "width:180px"/> 
< input type = "button” value = "撤销 转换 ”id = "myBtnUndo" style= "width:195px"/> 
</p></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , AlloyImage (mylmage). 
ps("strongGray"). replace(myImage) 中 的 myImage 是 将 被 处 理 的 图 像 ,strongGray 表示 对 图 像 进行 
增强 型 灰 化 处 理 , 即 黑白 效果 。 

此 实例 的 源 文 件 名 是 myHtmlA032. html。 


172 ”使 用 AlloyImage 对 图 像 进行 素描 处 理 


此 实例 主要 通过 使 用 腾讯 公司 的 开源 插件 Alloylmage 对 图 像 进行 素描 特效 处 理 。 当 在 浏览 器 
中 显示 该 页 面 时 将 显示 未 经 处 理 的 图 像 , 单 击 * 对 图 像 进行 素描 处 理 ” 按 钮 ,图像 将 以 铅笔 素描 效果 显 
示 , 如 图 172-1 所 示 ; 单 击 * 撤 销 处 理 ? 按 钮 ,图像 将 恢复 原样 。 有 关 此 实例 的 主要 代码 如 下 。 
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<!doctype html >< html ><head >< meta charset = UTF - 8> 
<script src= "js/jquery- 3.1.1.min. js"></script> 
< script src= "js/alloyimage. js"></script>< script language = "javascript"> 
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$ (document). ready(function() { 

var myImage = $ ("#myJpg").get(0); 
var luoImage = AlloyImage( myImage); 

$ ("#myBtnSketch"). click( function( ){ 


// 对 图 像 进行 素描 处 理 
AlloyImage(myImage). ps("sketch"). replace(myImage) 
]) 
$ ("#myBtnUndo") .click(function() { // 撤 销 处 理 


luoImage. replace(myImage) ; 
DD) 7) 


</script></head> 
<body>< img id = "myJpg" src= "img/a033. jpg" /> 
<p>< input type= "button" value= "对 图 像 进行 素描 处 理 ”id = "myBtnSketch" style = "width:190px"> 


< input type= "button" value = "撤销 处 理 " id = "myBtnUndo" style= "width:190px"> 
</p></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , AlloyImage (mylmage). 
ps("sketch"). replace(myImage) 中 的 mylmage 是 将 被 处 理 的 图 像 ,sketch 表示 对 图 像 进行 素描 特效 
处 理 。 

此 实例 的 源 文件 名 是 myHtmlA033. html。 


173 ”使 用 AlloyImage 给 图 像 添 加 LOMO 特效 


此 实例 主要 通过 使 用 腾讯 公司 的 开源 插件 AlloyImage 给 图 像 添 加 LOMO 特效 。 当 在 浏览 器 中 
示 该 页 面 时 将 显示 未 经 处 理 的 图 像 , 单 击 “ 给 图 像 添加 LOMO 特效 "按钮 ,图 像 的 亮度 、 对 比 度 、 品 
竺 


显 
首 圭 


i 等 参数 都 将 改变 ,如 图 173-1 所 示 ; 单 击 * 撤 销 特效 "按钮 ,图 像 将 恢复 原样 。 有 关 此 实例 的 主要 代 
码 如 下 。 





西 - 5 


国 localhost63342/myWor x 


c 


D localhost:-63342/myWork/myt 窜 





给 图 像 添 加 LOMO 特 效 








图 173-1 


<! doctype html >< html >< head >< meta charset = UTF -8> 
< script src= "js/jquery - 3.1.1.min. js"></script> 
< script src= "js/alloyimage. js"></script> 
< script language= " javascript"> 
$ (document). ready(function() { 


第 2 部 分 o> 





Var myImage = $ ("#myJpg").get(0); 
var luoImage = AlloyImage( myImage); 
$ ("#myBtnLomo").click(function() { // 给 图 像 添加 LOMO 特效 
for(var i=0;i<3;it+){ 
AlloyImage( myImage). ps("lomo"). replace(myImage); 
Pa 
$ ("#myBtnUndo").click(function() { // 撤 销 特效 
luoImage. replace(myImage) ; 
]) 2) 
</script ></head> 
<body> 
<img id= "myJpg" src = "img/a034. jpg" /> 
<p>< input type= "button” value = "给 图 像 添 加 LOMO 特效 " id= "myBtnLomo”style = "width:190px"> 
< input type = "button" value = "撤销 特效 ”id = "myBtnUndo" style = "width:190px"> 
</p></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , AlloyImage (mylmage). 
ps("lomo"). replace(mylmage) 中 的 myImage 是 将 被 处 理 的 图 像 ,lomo 表示 对 图 像 进行 LOMO 特效 
处 理 。 


此 实例 的 源 文件 名 是 myHtmlA034. html。 


174 使 用 AlloyImage 给 图 像 添 加 暖 秋 特 效 


此 实例 主要 通过 使 用 腾讯 公司 的 开源 插件 AlloyImage 给 图 像 添加 暖 秋 特 效 。 当 在 浏览 器 中 显 
示 该 页 面 时 将 显示 未 经 处 理 的 图 像 , 单 击 * 给 图 像 添加 暖 秋 特 效 " 按 钮 ,图 像 的 部 分 像素 值 将 发 生 改 
变 , 如 图 174-1 所 示 ; 单 击 * 撤 销 特效 "按钮 ,图像 将 恢复 原样 。 有 关 此 实例 的 主要 代码 如 下 。 

本 -日 x 


国 localhost63342/myWor x 





© D Ilocalhost63342/myWorkym 安 





编 图 像 添加 星 秋 特效 瘟 消 特区 














图 174-1 


<!doctype html ><html >< head >< meta charset = UIF -8> 
< script src= "js/jquery -3.1.1.min. js"></script> 
< script src = "js/alloyimage. js"></script> 
< script language= "javascript"> 
$ (document). ready(function() { 
var myImage = $ ("#myJpg").get(0); 
var luoImage = AlloyImage(myImage); 
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$ ("#myBtnAutumn"). click( function() { // 给 图 像 添加 暧 秋 特 效 
for(var i=0;i<1;it+){ 
AlloyImage( myImage). ps("warmAutumn"). replace(myImage); 
} 0); 
$ ("#myBtnUndo").click(function() { // 撤 销 特效 
luoImage. replace(myImage) ; 
1D);}); 
</script ></head> 
<body>< img id = "myJpg" src= "img/a035. jpg" /> 
<p>< input type= "button" value= "给 图 像 添加 暖 秋 特 效 ”id = "myBtnhutumn”style = "width:180px"> 
< input type= "button" value = "撤销 特效 " id= "myBtnUndo" style= "width:180px"></p> 
</body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , AlloyImage(myImage). 
ps("warmAutumn"). replace(myImage) 中 的 mylmage 是 将 被 处 理 的 图 像 ,warmAutumn 表示 给 图 像 
添加 暖 秋 特 效 。 

此 实例 的 源 文件 名 是 myHtmlA035. html。 


175 ”使 用 AlloyImage 给 图 像 添加 粗糙 特效 


此 实例 主要 通过 使 用 腾讯 公司 的 开源 插件 Alloylmage 给 图 像 添加 粗糙 特效 。 当 在 浏览 器 中 显 
示 该 页 面 时 将 显示 未 经 处 理 的 图 像 , 单 击 * 给 图 像 添 加 粗糙 特效 "按钮 ,图 像 将 发 生 类 似 于 马赛 克 的 改 
变 , 如 图 175-1 所 示 ; 单 击 * 撤 销 特 效 ? 按 钮 ,图像 将 恢复 原样 。 有 关 此 实例 的 主要 代码 如 下 。 


百 - 口 x 











国 localhost63342/myWor x 


© BD localhost:63342/myWork/m 窒 号 





痊 图 像 添 加 粗 各 特效 数 销 特效 J 











图 175-1 


<!doctype html >< html >< head ><meta charset = UTF -8> 
< script src= "js/jquery- 3.1.1.min. js"></script> 
< script src= "js/alloyimage. js"></script>< script language = "javascript"> 
$ (document). ready(function() { 
Var myImage = $ ("#myJpg").get(0); 
var luoImage = AlloyImage( myImage); 
$ ("#myBtnRough"). click(function() { // 给 图 像 添加 粗糙 特效 
for(var i=0;i<1;i++){ 
AlloyImage( myImage). ps("rough"). replace(myImage); 
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1 
]) 
$ (" 井 myYBtnUndo") .click(function() { 
luoImage. replace(myImage) ; 
1D); }); 
</script ></head> 


// 撤 销 特效 


<body>< img id = "myJpg" src= "img/a036. jpg" /> 


<p>< input type= "button" value= "给 图 像 添 加 粗糙 特效 ”id = "myBtnRough" style= "width:180px"> 
< input type= "button" value = "撤销 特效 ”id = "myBtnUndo" style = "width:180px"> 
</p> 


</body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,AlloyImage(myImage)， ps("rough"). 


replace(myJImage) 中 的 myImage 是 将 被 处 理 的 图 像 ,rough 表示 给 图 像 添 加 粗糙 特效 。 
此 实例 的 源 文件 名 是 myHtmlA036. html。 


176 ”使 用 AlloyImage 给 图 像 添加 紫色 特效 


此 实例 主要 通过 使 用 腾讯 公司 的 开源 插件 AlloyImage 给 图 像 添 加 紫色 特效 。 当 在 浏览 器 中 显 
示 该 页 面 时 将 显示 未 经 处 理 的 图 像 , 单 击 * 给 图 像 添加 紫色 特效 "按钮 ,图 像 添 加 紫色 特效 之 后 的 效果 
如 图 176-1 所 示 ; 单 击 * 撤 销 特效 ?按钮 ,图像 将 恢复 原样 。 有 关 此 实例 的 主要 代码 如 下 。 





号 艾 : 
区 fiev/D/n x 0 


€ © fle/D/myWorW/myHtmIA0 cc » 三 
加 是 军 访问 加 火 耻 计 方 站 点 避 新 手 上 路 














图 176-1 


<!doctype html >< html >< head><meta charset = UTF - 8> 
<script src= "js/jquery- 3.1.1.min. js"></script> 
< script src= "js/alloyimage. js"></script>< script language = "javascript"> 
$ (document). ready(function() { 
var myImage = $ ("#myJpg").get(0); 
var luoImage = AlloyImage(myImage); 
$ ("#myBtnpurple").click( function() { 


// 给 图 像 添加 紫色 特效 
AlloyImage( myImage). ps("purpleStyle"). replace(myImage); 
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D; 
$ ("#myBtnUndo").click(function() { // 撤 销 特效 
luoImage. replace(myImage) ; 
D272}); 
</script ></head> 

<body >< img id= "myJpg" src= "img/a037. jpg" /> 
<p>< input type = "button" value = "给 图 像 添 加 紫色 特效 ”id = "myBtnPurple" style= "width:188px">< input 
type = "button" value = "撤销 特效 "id = "myBtnUndo" style= "width:188px"></p></body ></html > 





上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 .AlloyImage (mylmage). ps(" 
purpleStyle"). replace(myImage) 中 的 myImage 是 将 被 处 理 的 图 像 ,purpleStyle 表示 给 图 像 添 加 紫色 
特效 。 

此 实例 的 源 文件 名 是 myHtmlA037. html。 


177 使 用 AlloyImage 给 图 像 添加 复古 特效 


此 实例 主要 通过 使 用 腾讯 公司 的 开源 插件 AlloyImage 给 图 像 添 加 复古 特效 。 当 在 浏览 器 中 显 
示 该 页 面 时 将 显示 未 经 处 理 的 图 像 , 单 击 * 给 图 像 添 加 复古 特效 "按钮 ,图 像 经 过 复古 处 理 之 后 的 效果 
如 图 177-1 所 示 ; 单 击 * 撤 销 特效 "按钮 ,图 像 将 恢复 原样 。 有 关 此 实例 的 主要 代码 如 下 。 


百 - 5 x 





国 localhost63342/myWor x 


° 3 CC D localhost:63342/myWork/myH 安 三 











图 177-1 


<!doctype html ><html >< head >< meta charset = UIF -8> 
<script src= "js/jquery- 3.1.1.min. js"></script> 
< script src= "js/alloyimage. js"></script >< script language = "javascript"> 
$ (document). ready(function() { 
var myImage = $ ("#myJpg").get(0); 
var luoImage = AlloyImage(myImage); 
$ ("#myBtnVintage").click(function() { // 给 图 像 添加 复古 特效 
for(var i= 0;i<1;i++){ 
AlloyImage(myImage). ps("vintage" ). replace(myImage) 
HID 
$ ("#myBtnUndo").click(function() { // 撤 销 特效 
luoImage. replace(myImage) ; 
]) 2) 








</script ></head> 


第 2 部 分 图像 > 
<body >< img id= "myJpg" src= "img/a038. jpg" /> 


<p>< input type = "button" value = "给 图 像 添加 复古 特效 ”id = "myBtnVintage" style = "width: 195px"> 
< input type = "button" value= "撤销 特效 ”id = "myBtnUndo" style = "width:190px"></p> 
</body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,Alloylmage(myJImage). ps("vintage"). 
replace(myImage) 中 的 myImage 是 将 被 处 理 的 图 像 ,vintage 表示 对 图 像 进行 复古 特效 处 理 。 
此 实例 的 源 文件 名 是 myHtmlA038. html。 


178 使 用 AlloyImage 给 图 像 添加 木雕 特效 


此 实例 主要 通过 使 用 腾讯 公司 的 开源 插件 AlloyImage 给 图 像 添 加 木雕 特效 。 当 在 浏览 器 中 显 
示 该 页 面 时 将 显示 未 经 处 理 的 图 像 , 单 击 “ 给 图 像 添 加 木雕 特效 ”按钮 ,图 像 经 过 木雕 处 理 之 后 的 效果 
如 图 178-1 所 示 ; 单 击 * 撤 销 特效 ?按钮 ,图像 将 恢复 原样 。 有 关 此 实例 的 主要 代码 如 下 。 


下 -oo x 












图 localhost63342/myWor x 


”3 © DD localhost:63342/myWork/m 字 | 呈 





六 图 像 添加 木 胶 特效 旺销 特效 





图 178-1 


<!doctype html >< html >< head >< meta charset = UIF -8> 
<script src= "js/jquery -3.1.1.min.js"></script> 
<script src = "js/alloyimage. js"></script >< script language = "javascript"> 
$ (document). ready(function() { 
Var myImage = $ ("#myJpg").get(0); 
var luoImage = AlloyImage( myImage); 
$ ("#myBtnCarve"). click(function() { // 给 图 像 添 加 木雕 特效 
for(var i= 0;i<1;i++){ 
AlloyImage(myImage). ps("carveStyle"). replace(myImage); 
}1); 
$ ("#myBtnUndo") .click(function() { // 撤 销 特效 
luoImage. replace(myImage) ; 
D7}); 
</script ></head> 
<body>< img id= "myJpg" src= "img/a039. jpg" /> 
<p>< input type= "button" value= "给 图 像 添 加 木雕 特效 ”id = "myBtnCarve" style = "width:185px">< input 
type = "button" value = "撤销 特效 ”id = "myBtnUndo" style= "width:180px"></p> 
</body></html > 
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上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , AlloylImage (mylmage). ps(" 


carveStyle" ). replace(myJImage) 中 的 myImage 是 将 被 处 理 的 图 像 ,carveStyle 表示 对 图 像 进 行 木雕 特 
效 处 理 。 


此 实例 的 源 文 件 名 是 myHtmlA039. html。 





179 ”使 用 AlloyImasge 给 图 像 添 加 美 肤 特 效 


此 实例 主要 通过 使 用 腾讯 公司 的 开源 插件 AlloyImage 给 图 像 添 加 美 肤 特效 。 当 在 浏览 器 中 显 
示 该 页 面 时 将 显示 未 经 处 理 的 图 像 , 单 击 * 给 图 像 添 加 美 肤 特效 ?按钮 ,图 像 经 过 美 肤 处 理 之 后 的 效果 
如 图 179-1 所 示 ; 单 击 * 撤 销 特效 "按钮 ,图 像 将 恢复 原样 。 有 关 此 实例 的 主要 代码 如 下 。 


百 = 口 x 


= 3 © | localhost:63342/myWork/myz3| 三 





国 localhost63342/myWor x 


给 图 合法 加 美 肤 特效 











图 179-1 


<!doctype html >< html >< head >< meta charset = UTF -8> 
<script src= "js/jquery — 3.1.1.min. js"></script> 
< script src= "js/alloyimage. js"></script > 
< script language = " javascript"> 
$ (document). ready(function() { 
var myImage = $ ("#myJpg"). get(0); 
var luoImage = AlloyImage( myImage); 
$ ("#myBtnFace").click(function() {// 给 图 像 添加 美 肤 特效 
for(var i= 0;i<1;i++){ 
AlloyImage( myImage). ps("softenFace"). replace(myImage); 
}11); 
$("#myBtnUndo").click(function() {// 撤 销 特效 
luoImage. replace(myImage) ; 
]) 
</script></head> 
<body>< img id= "myJpg" src= "img/a040. jpg" /> 
<p>< input type="button” value= "给 图 像 添 加 美 肤 特 效 ”id = "myBtnFace”style = "width:185px"> < input 


type = "button" value = "撤销 特效 ”id = "myBtnUndo" style= "width:185px"></p> 
</body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , AlloyImage (myImage )， 


ps("softenFace"). replace(myImage) 中 的 myImage 是 将 被 处 理 的 图 像 ,softenFace 表示 对 图 像 进行 
美 肤 特效 处 理 。 


此 实例 的 源 文件 名 是 myHtmlA040. html。 
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180 ”使 用 AlloyImage 给 图 像 添 加 亮 白 特 效 


此 实例 主要 通过 使 用 腾讯 公司 的 开源 插件 AlloyImage 给 图 像 添 加 亮 白 特 效 。 当 在 浏览 器 中 显 
示 该 页 面 时 将 显示 未 经 处 理 的 图 像 , 单 击 “ 给 图 像 添加 亮 白 特效 ”按钮 .图 像 经 过 亮 白 处 理 之 后 的 效果 
如 图 180-1 所 示 ; 单 击 * 撤 销 特效 ?按钮 ,图像 将 恢复 原样 。 有 关 此 实例 的 主要 代码 如 下 。 


本 一 可 广 

















localhost63342/myWor x 


© D Ilocalhost63342/myWork/myl 安 





给 图 像 添加 亮 白 特效 











图 180-1 


<!doctype html ><html >< head >< meta charset = UIF -8> 
< script src= "js/jquery-3.1.1.min. js"></script> 


< script src= "js/alloyimage. js"></script>< script language = "javascript"> 
$ (document). ready(function() { 


var myImage = $ ("#myJpg").get(0); 
var luoImage = AlloyImage( myImage); 


$ (" 间 myBtnStrong").click(function() {// 给 图 像 添 加 亮 白 特效 


for(var i= 0;i<1;i++){ 


AlloyImage( myImage). ps("strongEnhancement"). replace(myImage); 
}D; 


$ ("myBtnUndo").click(function() {// 撤 销 特效 
luoImage. replace(myImage); 
D2}); 
</script ></head> 
<body>< img id= "myJpg" src= "img/a041. jpg" /> 
<p><input type = "button" value = "给 图 像 添加 亮 白 特效 " id = "myBtnStrong" style = "width:190px">< input 


type = "button" value = "撤销 特效 ”id = "myBtnUndo" style= "width:185px"></p> 
</body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , AlloyImage (myImage ). 


ps("strongEnhancement"). replace(myImage) 中 的 myImage 是 将 被 处 理 的 图 像 ,strongEnhancement 表示 
对 图 像 进 行 亮 白 特效 处 理 。 


此 实例 的 源 文件 名 是 myHtmlA041. html。 
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在 SVG 中 使 用 高 斯 模糊 滤 镜 处 理 图 像 


此 实例 主要 通过 在 SVG 中 使 用 高 斯 模糊 滤 镜 实现 以 模糊 的 效果 显示 图 像 。 当 在 Google 
Chrome 浏览 器 中 显示 该 页 面 时 , 单 击 * 正 常 显 示 图 像 "按钮 ,将 在 下 面 正 常 显 示 图 像 ; 单 击 “ 使 用 高 斯 
模糊 滤 镜 显示 图 像 "按钮 ,将 在 下 面 以 高 斯 模糊 效果 显示 图 像 , 如 图 181-1 所 示 。 有 关 此 实例 的 主要 代 
码 如 下 。 








百 - 5 


x 
DD myHtmlA186 html x 


”3 C D file///D/myWork/myHtmlA186.h 安 
正常 显示 图 铺 


使 用 高 斯 模糊 选读 显示 图 像 





dE 











图 181-1 
<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<script src= "js/jquery -3.1.1.min.js"></script >< script type = "text/javascript"> 
$ (function() { 


$("#myBtnBlur").click(function() {// 使 用 高 斯 模糊 滤 镜 显示 图 像 
$ ("svg defs filter feGaussianBlur").attr("stdDeviation", 3); 
D); 


$ (" 间 myBtnNormal").click(function() {// 正 常 显 示 图 像 


$ ("svg defs filter feGaussianBlur").attr("stdDeviation", 0); 
D7}); 


</script > 
<style type= "text/css"> 


svg { margin - top: 20px; position: absolute;left: calc(50% ~ 200px); } 
button{ width:195px;} 


</style></head> 
<body>< div align = "center"> 
<button id = "myBtnNormal"> 正 常 显示 图 像 </button> 


<button id= "myBtnBlur"> 使 用 高 斯 模糊 滤 镜 显示 图 像 </button></div> 
<svg width= "100 先 "height = "100% "><defs><filter id= "fl" x="0" y= "0"> 


< feGaussianBlur in = "SourceGraphic" stdDeviation= "3"/></filter ></defs> 

< image xlink:href ="img/A186. jpg" id="MyImage" x= "0" y="0" width= "400" height = "250" filter = 
"url(#f1)"/></svg> 
</body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 .< filter > 标签 用 来 定义 SVG 滤 镜 , 必 
需 的 id 属性 定义 向 图 像 应 用 哪个 滤 镜 。< filter > 标签 必须 说 套 在 < defs > 标签 内 .< defs > 标签 是 
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definitions 的 缩写 , 它 允许 对 滤 镜 等 特殊 元 素 进行 定义 。filter:url 属性 用 来 把 元 素 链接 到 滤 镜 , 当 链 
接 滤 镜 id 时 必须 使 用 # 字符。 滤 镜 效果 是 通过 < feGaussianBlur> 标 签 进行 定义 的 ,fe 后 缀 可 用 了 


FF 所 
有 的 滤 镜 。< feGaussianBlur > 标签 的 stdDeviation 属性 可 定义 模糊 效果 的 程度 。 
此 实例 的 源 文件 名 是 myHtmlA186. html。 





182 在 SVG 中 使 用 矩阵 滤 镜 旋转 图 像 的 色相 


此 实例 主要 通过 在 SVG 中 使 用 feColorMatrix 滤 镜 改变 图 像 的 饱和 度 和 调整 图 像 的 色相 。 当 在 
Google Chrome 浏览 器 中 显示 该 页 面 时 , 单 击 “使 用 feColorMatrix 滤 镜 进行 色相 旋转 ”按钮 , 则 图 像 
的 色相 经 过 重 置 之 后 的 效果 如 图 182-1 所 示 ; 单 击 “ 使 用 feColorMatrix 滤 镜 调整 饱和 度 ”按钮 , 则 图 
像 的 饱和 度 在 经 过 重 置 之 后 的 效果 如 图 182-2 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 








百 一 口 x 百 一 口 x 
DD myHtmlA190 html 入 癌 myHemlA190 html x 
所 3 CC Dfile///D/myWork/myHtmlA190.h “3 CC Dfile///D/myWork/myHtmlA190.h 窑 三 
使 用 feColorMatrix 滤 镇 进行 色 使 用 feColorMatrix 涉 镇 调 幕 询 使 用 feColorMatrix 尖 镇 进行 色 | 使 用 feColorMatrix 汉 镇 调整 光志 
| 相 旋 办 || 和 了 | 相 放 转 和 度 














图 182-1 





<!doctype html >< html >< head><meta charset = "UTF ~ 8"> 
< script src= "js/jquery- 3.1.1.min. js"></script >< script type = "text/javascript"> 
$ (function() { 
$ ("#myBtnHueRotate"). click(function() { // 使 用 feColorMatrix 滤 镜 进行 色相 旋转 
$ ("svg defs filter feColorMatrix").attr("type", "hueRotate"); 
$ ("svg defs filter feColorMatrix").attr("values", "180"); 
Ds; 
$ ("#myBtnSaturate"). click(function() { // 使 用 feCcolorMatrix 滤 镜 调整 饱和 度 
$ ("svg defs filter feColorMatrix").attr("type", "saturate"); 
$ ("svg defs filter feColorMatrix").attr("values"”, "0.12"); });}); 
</script> 


<style type= "text/css"> 


svg { margin - top: 10px; position: absolute; left: calc(50% - 200px);} 
button{ width:195px;} 
</style></head> 


<body>< div align = "center"> 


<button id = "myBtnHueRotate"> 使 用 feColorMatrix 滤 镜 进行 色相 旋转 </button > 
<button id= "myBtnSaturate"> 使 用 feColorMatrix 滤 镜 调整 饱和 度 </button></div> 
<svg width= "100%" height = "100%" ><defs><filter id= "myFilter" x= "0" y= "0"> 
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<! -- < feColorMatrix in= "SourceGraphic" type = "hueRotate" values = "180" />-—-—> 
<! -- < feColorMatrix in= "SourceGraphic" type= "saturate" values= "0.12" />-—> 
<! -— < feColorMatrix in= "SourceGraphic" type = "luminanceToAlpha" /> -一 > 

< feColorMatrix in = "SourceGraphic"/></filter ></defs> 


< image xlink:href = "img/A190. jpg" id= "MyImage" x="0" y="0" width= "400" height = "250" filter =" 


url(#myFilter)"/></svg></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,< feColorMatrix in 二 "SourceGraphic" 
type 一 "hueRotate" values 王 "180" /> 表示 使 用 feColorMatrix 滤 镜 将 图 像 的 色相 旋转 180"。 在 SVG 
中 feColorMatrix 滤 镜 基于 转换 矩阵 对 颜色 进行 变换 ,每 一 像素 的 颜色 值 ( 一 个 表示 为 [ 红 , 绿 , 蓝 , 透 
明度 ] 的 矢量 ?都 经 过 矩阵 乘法 (matrix multiplated) 计 算出 的 新 颜色 。 除 非 自 定义 颜色 矩阵 ,直接 设 


置 in、type、values 几 个 属性 即 可 实现 大 部 分 的 颜色 矩阵 调整 功能 。 
此 实例 的 源 文 件 名 是 myHtmlA190. html。 


183 在 SVG 中 使 用 混合 滤 镜 登 加 两 幅 图 像 


此 实例 主要 通过 在 SVG 中 使 用 feBlend 滤 镜 实现 以 高 亮 或 深 暗 的 效果 混合 显示 两 幅 图 像 。 当 在 
Google Chrome 浏览 器 中 显示 该 页 面 时 , 单 击 “ 以 深 暗 模式 混合 两 幅 图 像 ”按钮 ,将 在 下 面 以 深 暗 模式 
混合 显示 两 幅 图 像 ,如 图 183-1 所 示 ; 单 击 * 以 高 亮 模式 混合 两 幅 图 像 ” 按 钮 ,将 在 下 面 以 高 亮 模式 混 





合 显示 两 幅 图 像 , 如 图 183-2 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 





| 以 尝 阶 模式 溪 合 两 由 图 佑 | | 以 高 亮 异 式 江 合 两 峰 图 像 | | 以 深 输 模式 梁 合 两 由 图 象 | | 以 高 亮相 式 汶 合 两 十 图 像 。 | 


西 - Do x 百 - oo x 
DD myHtmlA189 html x DD myHtmlA189 html x 
5 3 CC Dfiey///D/myWork/myHtmlA189.htr 字 三 3 CC Dfie///D/myWork/myHtmlA189.htriY 三 











<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
< script src= "js/jquery- 3.1.1.min. js"></script>< script type = "text/javascript"> 
$ (function() { 
$ ("#myBtnDarken"). click( function() { // 以 深 瞳 模式 混合 两 幅 图 像 
$ ("svg defs filter feBlend").attr("mode", "darken"); }); 
$ ("#myBtnLighten").click(function() { // 以 高 亮 模 式 混合 两 幅 图 像 
$ ("svg defs filter feBlend").attr("mode", "lighten"); });}); 
</script> 
<style type= "text/css"> 
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svg { margin - top: 10px; position: absolute;left: calc(50% — 200px);} 
button{ width:195px;} 
</style></head> 
<body>< div align = "center"> 
<button id= "myBtnDarken"> 以 深 暗 模式 混合 两 幅 图 像 </button> 
<button id= "myBtnLighten"> 以 高 亮 模式 混合 两 幅 图 像 </button></div> 
<svg width= "100%" height= "100% "><defs><filter id= "myFilter" x= "0" y= "0"> 
<! —— < feImage xlink:href = "img/A126. jpg" width= "400" height = "250" result = "A126" /> -一 > 
< feImage xlink:href = "img/B003. jpg" width= "400" height = "250" result = "B003" /> 
<! --<feBlend mode = "normal” in= "A126" in2="B003" /> -一 > 
< feBlend mode = "normal" in = "SourceGraphic" in2 = "B003" /></filter ></defs> 


< image xlink:href = "img/R126. jpg" id= "MyImage" x="0" y="0" width= "400" height = "250" filter = 
"url(#myFilter)"/></svg></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,< feBlend mode 一 "normal”in 一 
"SourceGraphic" in2 王 "B003" /> 用 于 设置 feBlend 滤 镜 的 混合 模式 为 normal。feBlend 滤 镜 支持 的 


混合 模式 有 normal ,multiply .screen ,darken lighten 等 。 


此 实例 的 源 文件 名 是 myHtmlA189. html。 


184 使 用 SVG 滤 镜 线性 校正 图 像 中 的 像素 


此 实例 主要 通过 在 SVG 中 使 用 feComponentTransfer 滤 镜 对 图 像 的 颜色 .亮度 .对比度 等 进行 
调整 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 . 单 击 “ 使 用 feComponentTransfer 滤 镜 处 理 图 像 
一 ”按钮 , 则 图 像 经 过 特效 处 理 之 后 的 效果 如 图 184-1 所 示 ; 单 击 “ 使 用 feComponentTransfer 滤 镜 处 
理 图 像 二 ”按钮 , 则 图 像 经 过 特效 处 理 之 后 的 效果 如 图 184-2 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 


百 - 0 x 百 
D myHtmlA191 html x D myHemlA191 html x 
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© Dfile///D/myWork/myHtmlA191.h 字 


使 用 feC Transfer 浊 证 | 使 用 feComy fTransfer 于 该 
| 外 加 加 | 让 加 因 人 二 


© Dfiley//D/myWork/myHtmlA191.h 安 三 


使 用 feC HTransfer 涉 讲 | 使 用 feComl Transfer 丰 镇 四 
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图 184-1 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 


<script src= "js/jquery — 3.1.1.min. js"></script>< script type= "text/javascript"> 
$ (function() { 


$ ("#myBtnGamma").click(function() { // 使 用 feComponentTransfer 滤 镜 处 理 图 像 一 
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$ ("image").attr("filter", "url(#myFilterGamma)"); }); 


$ ("#myBtnLinear"). click(function() { // 使 用 feComponentTransfer 滤 镜 处 理 图 像 二 
$ ("image").attr("filter", "url(#myFilterLinear)"); });}); 
</script > 


<style type= "text/css"> 
svg { margin— top: 10px; position: absolute; left: calc(50% — 200px); } 
button{ width:195px;} 
</style></head> 
<body>< div align = "center"> 
<button id= "myBtnGamma"> 使 用 feComponentTransfer 滤 镜 处 理 图 像 一 </button> 
<button id= "myBtnLinear"> 使 用 feComponentTransfer 滤 镜 处 理 图 像 二 </button ></div> 
<svg width= "100%" height = "100% "> 
<defs> 
<filter id= "myFilterGamma" filterUnits = "objectBoundingBox" 


x="0%" y="0%" width= "100 %" height = "100% "> 


< feComponent'Transfer > 
< feFuncR type = "gamma" amplitude = "2" exponent = "5" offset = "0"/> 
< feFuncG type = "gamma" amplitude = "2" exponent = "3" offset = "0"/> 
< feFuncB type = "gamma" amplitude = "2" exponent = "1" offset = "0"/> 
</feComponentTransfer ></filter > 
<filter id= "myFilterLinear" filterUnits = "objectBoundingBoxn 


x="0%" y="0%" width= "100 %" height = "100 % "> 


< feComponent Transfer > 
< feFuncR type= "linear" slope=".5" intercept =".25"/> 


< feFuncG type = "linear" slope= ".5" intercep| 


/> 





<feFuncB type= "linear" slope=".5" intercept =".5"/> 
</feComponentTransfer ></filter ></defs> 
< image xlink:href = "img/R191. jpg" id= "MyImage" x="0" y="0" width="400" height = "250" /></svg> 
</body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,feComponentTransfer 滤 镜 用 于 执行 
亮度 对比度 .颜色 平衡 和 阔 值 等 数据 的 component-wise 重 映射 。 在 定义 这 些 参数 时 通常 需要 设置 
feFuncR ,feFuncG ,feFuncB,feFuncA 的 值 。 

此 实例 的 源 文 件 名 是 myHtmlA191. html。 


185 


使 用 SVG 滤 镜 实现 马赛 殉 风 格 的 图 像 





此 实例 主要 在 SVG 的 feMorphology 滤 镜 中 设置 不 同 的 radius 属性 值 . 从 而 使 图 像 产 生 不 同 粗 
细 的 马赛 克 模糊 特效 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 将 显示 一 幅 未 经 滤 镜 处 理 的 图 
像 , 如 图 185-1 所 示 ; 单 击 “使 用 feMorphology 滤 镜 实现 细 马 赛 克 特 效 ? 按 钮 ,图 像 产生 的 细 马 赛 克 效 
果 如 图 185-2 所 示 ; 单 击 “ 使 用 feMorphology 滤 镜 实现 粗 马赛 克 特效 "按钮 ,图 像 产 生 的 粗 马赛 克 效 
果 如 图 185-3 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 





<!doctype html >< html ><head ><meta charset = "UTF - 8"> 
<script src= "js/jquery - 3.1.1.min. js"></script >< script type = "text/javascript"> 
$ (function() { 


$ ("#myBtnThin").click(function() { // 使 用 feMorphology 滤 镜 实现 细 马 赛 克 特效 
$ ("svg defs filter feMorphology").attr("radius", "1"); 


D); 
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$ ("#myBtnFatten"). click( function() { // 使 用 feMorphology 滤 镜 实现 粗 马 赛 克 特效 
$ ("svg defs filter feMorphology").attr("radius"，"5"); });}); 
</script> 


< style type= "text/css"> 
svg { margin- top: 10px;position: absolute; left: calc(50% — 200px);} 
button { width: 195px;} 
</style></head> 
<body> 
<div align= "center"> 
<button id= "myBtnThin"> 使 用 feMorphology 滤 镜 实现 细 马 赛 克 特效 </button > 
<button id= "myBtnFatten"> 使 用 feMorphology 滤 镜 实现 粗 马 赛 克 特效 </button></div> 
<svg width= "100% " height= "100% "><defs><filter id= "myFilter" x="0"yY= "0"> 
< feMorphology operator = "dilate" in = "SourceGraphic" radius = "0" /> 
</filter ></defs> 
< image xlink:href = "img/A192. jpg" id = "MyImage" x= "0" y= "0" width = "400" height = "250" filter = 
"url(#myFilter)"/></svg> 
</body></html> 
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上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,< feMorphology operator 一 "dilate" 
in 一"SourceGraphic" radius 一 "0" /> 用 于 设置 feMorphology 滤 镜 , 当 以 不 同 的 值 设置 radius 属性 值 
时 会 产生 不 同 的 粗细 效果 ,产生 的 马赛 克 实 际 上 是 两 倍 于 radius 属性 值 (例如 $("svg defs filter 
feMorphology").attr("radius","5")) 的 和 矩形。 在 SVG 中 ,feMorphology 滤 镜 通过 操控 alpha 通道 
实现 图 像 变 粗 或 变 细 的 特效 。 

此 实例 的 源 文件 名 是 myHtmlA192. html。 


186 使 用 SVG 滤 镜 为 不 规则 图 像 添加 阴影 


此 实例 主要 通过 使 用 SVG 的 feGaussianBlur feOffset \feFlood feComposite 等 滤 镜 为 不 规则 的 
图 形 图 像 添 加 阴影 特效 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 将 显示 一 幅 没有 阴影 的 不 规则 
png 图 像 , 单 击 “ 显 示 添 加 阴影 的 不 规则 图 像 ” 按 钮 , 则 不 规则 图 像 添 加 阴影 的 效果 如 图 186-1 所 示 。 
有 关 此 实例 的 主要 代码 如 下 。 








[) myHemlA195 html x 
S 3 © Dfile///D/myWorW/myHtmlA195.htn3 三 
[显示 本 加 阴影 的 不 规则 图 象 “] | 。 显示 无 阴影 的 不 规则 图 强 ”| 局 








图 186-1 


<!doctype html >< html >< head >< meta charset = "UTF — 8"> 
< script src= "js/jquery -3.1.1.min.js"></script > 
< script type = "text/javascript"> 
$ (function() { 
$ ("myBtnShadow").click(function() {// 显 示 添加 阴影 的 不 规则 图 像 
$ ("image").attr("filter", "url(#myFilter)"); 
]) 
$("#myBtnNone").click(function() {// 显 示 无 阴影 的 不 规则 图 像 
$ ("image").attr("filter", ""); 
1D);}); 
</script > 
<style type= "text/css"> 
svg { margin - top: 10px; position: absolute; left: calc(50% — 200px);} 
button {width: 195px;} 
</style></head> 
<body>< div align = "center"> 
<button id= "myBtnShadow"> 显 示 添 加 阴影 的 不 规则 图 像 </button> 
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<button id= "myBtnNone"> 显 示 无 阴影 的 不 规则 图 像 </button ></div> 
<svg width= "100%" height = "100% "><defs> 

<filter id= "myFilter" filterUnits = "objectBoundingBox" x="—10%"y="—10%" width= "150%" 
height ="150% "> 


<! 一 产生 模糊 扩散 特效 -一 > 
< feGaussianBlur in = "Sourcehlpha"” stdDeviation = "13" result = "blurredAlpha"/> 


<! 一 产生 阴影 偏 移 特效 -一 > 
< feOffset in = "blurredhlpha" dx= "14" dy= "14" result = "offsetBlurredAlpha"/> 
< feFlood result = "flooded" style= "flood - color:black;flood- opacity:0.95"/> 
<! - - < feComposite in =" flooded" operator = "atop” in2 = " offsetBlurredAlpha" result = 
"coloredShadow"/> -一 > 
< 一 设置 in 和 in2 的 组 合 模式 --> 
< feComposite in = "flooded" operator = "in" in2 = "offsetBlurredAlpha" result = "coloredShadow"/> 
< feComposite in = "SourceGraphic" in2 = "coloredShadow" operator = "over"/> 
</filter ></defs> 
< image xlink:href = "img/A195. png" id = "MyImage" x= "0" y= "0" width= "400" height = "250" /></svg> 
</body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,feGaussianBlur feOffset、feFlood、 
feComposite 等 滤 镜 组 合 在 一 起 实现 了 与 CSS3 的 drop-shadow 滤 镜 类 似 的 功能 ,由 于 这 些 滤 镜 的 参 
数 众 多 ,所 以 比 drop-shadow 滤 镜 具有 更 高 的 灵活 性 和 可 扩展 性 。< feGaussianBlur in 一 
"SourceAlpha" stdDeviation 二 "13”result 二 "blurredAlpha"/> 中 的 stdDeviation 王 "13" 表 示 模 糊 半 
径 , 此 值 越 大 模糊 范围 越 大 ; < feOffset in 二 "blurredAlpha"” dx 二 "14" dy 二 "14" result 一 
"offsetBlurredAlpha"/> 中 的 dx、dy 表示 阴影 偏 移 值 ,可 以 为 负数 , 正 数 产生 的 阴影 在 右 下 角 ,负数 产 
生 的 阴影 在 左上 角 。 

此 实例 的 源 文件 名 是 myHtmlA195. html。 


187 使 用 SVG 滤 镜 为 图 像 添加 翘 边 的 阴影 


此 实例 主要 通过 使 用 SVG 的 feGaussianBlur 滤 镜 为 图 像 添 加 翘 边 的 阴影 特效 。 当 在 Google 
Chrome 浏览 器 中 显示 该 页 面 时 , 单 击 “显示 原始 的 图 像 " 按 钮 ,将 在 下 面 显 示 原 始 的 图 像 ， 单 击 “显示 
普 边 阴影 的 图 像 "按钮 ,图 像 在 添加 星 边 的 阴影 特效 之 后 的 效果 如 图 187-1 所 示 。 有 关 此 实例 的 主要 
代码 如 下 。 





<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<script src= "js/jquery -3.1.1.min.js"></script > 
< script type = "text/javascript"> 
$ (function() { 
$ ("#myBtn1"). click(function() { // 显 示 原 始 的 图 像 
$ ("image"). show( ); 
$ ("path"). hide(); 
D); 
$ ("#myBtn2"). click(function() { // 显 示 者 边 阴影 的 图 像 
$ ("image"). show(); 
$ ("path"). show(); 
1);); 
</script> 
<style type= "text/css"> 
svg { margin— top: 10px; position: absolute; 
left: calc(50 % — 200px);} 
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button { width: 195px;} 
</style></head> 
<body><div align = "center"> 
<button id= "myBtnl"> 显 示 原 始 的 图 像 </button > 
<button id= "myBtn2"> 显 示 竹 边 阴 影 的 图 像 </button > 
</div> 
< svg width= "100% ”height= "100% ">< defs> 
<filter width= "440" height = "290" x="0" y="0" id= "myFilter" filterUnits = "userSpaceOnUse" > 
< feGaussianBlur stdDeviation= "5"/></filter ></defs> 
< path d = "M30 30 L430 30 0410 155 430 280 L30 280 050 155 30 30" fill = "#000" filter = url 
("#myFilter") transform= "translate( -20, - 20)"/> 
<imge x="0" y="0" width ="400" height = "250" xlink: href = " img/A211. jpg” transform = 
"scale(0.96), translate(19,14)"/></svg> 
</body ></html > 





上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,feGaussianBlur 滤 镜 用 于 为 元 素 添加 
模糊 特效 ,需要 它 只 有 一 个 参数 一 一 stdDeviation ,该 参数 控制 模糊 程度 ,数字 越 大 越 模糊 ,数字 
为 0 则 为 其 原始 状态 。 如 果 写 成 < feGaussianBlur stdDeviation 二 "1 15"/>, 则 1 代表 水 平方 向 的 模糊 
半径 ,15 代表 垂直 方向 的 模糊 半径 。< path d= 二"M30 30 L430 30 Q410 155 430 280 L30 280 Q50 155 
30 30" fill="#000" filter=url("#myFilter") transform 一 "translate( 一 20, 一 20)"/> 用 于 创建 一 个 


带 阴 影 效果 的 多 边 形 ,如 图 187-2 所 示 , 图 像 则 是 直接 从 加 在 此 阴影 之 上 ,因为 多 边 形 的 左 、 右 两 端 带 








有 弧 线 ,所 以 在 释 加 图 像 之 后 有 手边 的 阴影 效果 
此 实例 的 源 文件 名 是 myHtmlA213. html 
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日 myHtmlA213 peml x DY myHemlA213 html x 
© D file///D/myWork/myHtmIA213.html3 三 © D file///D/myWork/myHtmlA213.html 字 三 
虹 示 厚 扩 的 隐 像 虹 示 鳃 边 阴影 的 图像 里 示 原始 的 卫 像 显示 震 边 阴影 的 卫 像 




















图 187-1 图 187-2 


188 使 用 SVG 的 feOffset 滤 镜 生成 悬空 阴影 


此 实例 主要 通过 在 SVG 中 使 用 feOffset 滤 镜 为 图 像 生成 悬空 阴影 。 当 在 Google Chrome 浏览 
器 中 显示 该 页 面 时 , 单 击 “使 用 青色 光源 照射 图 像 ” 按 钮 ,为 图 像 生成 的 悬空 阴影 如 图 188-1 所 示 ; 单 
击 “* 使 用 黄色 光源 照射 图 像 " 按 钮 ,为 图 像 生 成 的 悬空 阴影 如 图 188-2 所 示 。 有 关 此 实例 的 主要 代码 
如 下 。 
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癌 myHtmlA233.html D myHtmlA233 html 地 
3 © Dfile///D/myWork/myHtmlA233. 





3 © Dfile///D/myWork/myHtmlA233. 字 
| 使 用 青色 光源 照射 图 银 | 使 用 菌 色 光源 照射 图 像 | 使 用 青色 光源 照射 图 铺 使 用 黄色 光源 照射 图 铺 

















图 188-1 图 188-2 


<! doctype html >< html >< head >< meta charset = "UTF - 8"> 
<script src= "js/jquery- 3.1.1.min. js"></script>< script type= "text/javascript"> 
$ (function() { 
$ ("#myBtnl").click(function() {// 使 用 青色 光源 照射 图 像 
$ ("svg defs filter feSpecularLighting").attr("lighting ~ color", "cyan"); 
$("g").attr("filter", "url(#myFilter)"); 
1D); 
$("#myBtn2").click(function() {// 使 用 黄色 光源 照射 图 像 
$ ("svg defs filter feSpecularLighting").attr("lighting ~ color", "yellow"); 
$("g").attr("filter", "url(#myFilter)"); });}); 
</script > 
<style type= "text/css"> 
svg { margin - top: 20px;position: absolute; left: calc(50% — 200px);} 
div { margin - top: 2px; margin - left: 2px;} 
button { width: 195px;} 
</style></head> 
<body>< div align = "center"> 
<button id= "myBtnl"> 使 用 青色 光源 照射 图 像 </button > 
<button id = "myBtn2"> 使 用 黄色 光源 照射 图 像 </button></div> 
<div><svg width= "400" height = "275"> 
<defs><filter id= "myFilter"> 
< feGaussianBlur in = "SourceAlpha" stdDeviation = "4" result = "blur"/> 
<feOffset in = "blur" dx= "21" dy= "21" result = "offsetBlur"/> 
< feSpecularLighting in= "blur" surfaceScale= "5" specularConstant = ".75" specularExponent = "20" 
lighting - color = "#bbbbbb" result = "specOut"> 
<fePointLight x="— 5000" y="— 10000" z ="20000"/></feSpecularLighting> 
< feComposite in = "specOut" in2= "SourceAlpha” operator = "in" result = "specOut"/> 
< feComposite in= "SourceGraphic" in2 = "specOut”operator = "arithmetic" kl = "0" k2= "1" k3="1" 
k4="0" result = "litPaint"/> 
< feMerge >< feMergeNode in = "offsetBlur"/><feMergeNode in = "litPaint"/></feMerge> 
</filter ></defs> 
<g><image id= "myImage" x= "0" y= "0" width = "400px" height = "250px" xlink:href = "img/A195. png"> 
</image ></g></svg></div> 
</body></html > 
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上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,生成 悬空 阴影 主要 由 feOffset 滤 镜 
实现 ,可 以 通过 设置 feOffset 滤 镜 的 dx 属性 值 和 dy 属性 值 调整 悬空 阴影 的 偏 移 量 大 小 ,如 果 其 值 为 
负数 , 则 产生 的 悬空 方向 相反 ; feGaussianBlur 滤 镜 主要 用 于 为 阴影 产生 模糊 效果 。 

此 实例 的 源 文件 名 是 myHtmlA233. html。 


189 ”使 用 SVG 滤 镜 对 图 像 进行 暗 化 和 亮 化 


此 实例 主要 通过 在 SVG 的 feComposite 滤 镜 中 使 用 不 同 的 数学 算法 使 图 像 产 生 暗 化 特效 和 亮 化 
特效 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 , 单 击 “ 使 用 feComposite 滤 镜 暗 化 图 像 ”按钮 ,图 
像 产 生 的 暗 化 效果 如 图 189-1 所 示 ; 单 击 “ 使 用 feComposite 滤 镜 亮 化 图 像 " 按 钮 ,图像 产生 的 亮 化 效 
果 如 图 189-2 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 189-1 图 189-2 


<!doctype html >< html >< head><meta charset = "UTF - 8"> 
< script src= "js/jquery -3.1.1.min. js"></script>< script type = "text/javascript"> 
$ (function() { 
$ ("#myBtnDark") .click(function() {// 使 用 feComposite 滤 镜 暗 化 图 像 
$ ("image").attr("filter", "url(#myFilterl)"); 
1D); 
$ ("myBtnLight").click(function() {// 使 用 feComposite 滤 镜 亮 化 图 像 
$ ("image").attr("filter", "url(#myFilter2)"); });}); 
</script > 
<style type= "text/css"> 
svg { margin - top: 10px; position: absolute; left: calc(50 — 200px);} 
button { width: 195px;} 
</style></head> 
<body>< div align = "center"> 
<button id= "myBtnDark"> 使 用 feComposite 滤 镜 暗 化 图 像 </button> 
<button id= "myBtnLight"> 使 用 feComposite 滤 镜 亮 化 图 像 </button></div> 
< svg width= "100# ”height = "100% ">< defs><filter id= "myFilter1"> 
< feComposite operator = "arithmetic" kl = "1" k2="0" k3= "0" k4="0"/></filter> 
<filter id = "myFilter2">< feComposite operator = "arithmetic" kl = "0" k2="1" k3= "1" 
k4 = "0"/></filter></defs> 
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< image xlink: href = " img/A193. jpg" id = "MyImage" x= "0" y= "0" width= "400" height = "250" /></svg> 
</body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,< feComposite operator 一 
"arithmetic" k1 二 "1" k2 一 "0" k3 一 "0" k4 一 "0"/> 用 于 设置 feComposite 滤 镜 以 产生 暗 化 特效 ， 
<feComposite operator 一 "arithmetic" kl 二 "0" k2 王 "1"k3 王 "1"”k4 王 "0"/> 用 于 设置 feComposite 
滤 镜 以 产生 亮 化 特效 。 当 operator 属性 值 为 arithmetic 时 ,通常 应 该 设置 kl1、k2、k3、k4 这 4 个 与 数 
学 算法 密切 相关 的 属性 。 例 如 , 当 < feComposite operator 二 "arithmetic" kl 二 "0" k2 二 "5" k3 二 "5" 
k4 二 "0"/> 时 亮 化 效果 将 特别 明显 。 

此 实例 的 源 文件 名 是 myHtmlA193. html。 


190 ”使 用 SVG 滤 镜 对 图 像 进行 轻微 模糊 处 理 


此 实例 主要 通过 使 用 SVG 的 feConvolveMatrix 滤 镜 对 图 像 进行 轻微 模糊 处 理 。 当 在 Google 
Chrome 浏览 器 中 显示 该 页 面 时 将 显示 默认 的 原始 图 像 , 单 击 * 显 示 轻 微 的 模糊 图 像 "按钮 ,图 像 被 
feConvolveMatrix 滤 镜 处 理 后 的 效果 如 图 190-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 190-1 


<! doctype html >< html >< head >< meta charset = "UTF - 8"> 
< script src= "js/jquery- 3.1.1.min. js"></script >< script type = "text/javascript"> 
$ (function() { 
$$("#myBtn1").click(function() {// 显 示 默认 的 原始 图 像 
$ ("image").attr("filter”, ""); 
DD); 
$(" 间 myBtn2").click(function() {// 显 示 轻微 的 模糊 图 像 
$ ("image").attr("filter"”, "url(#myFilter)"); });}); 
</script> 
<style type= "text/css"> 
svg { margin— top: 10px; position: absolute; left: calc(50% — 200px);} 
button { width: 195px;} 
</style></head> 
<body>< div align = "center"> 
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<button id= "myBtnl"> 显 示 默 认 的 原始 图 像 </button > 
<button id= "myBtn2"> 显 示 轻 微 的 模糊 图 像 </button></div> 
<svg width= "100%" height = "100% "><defs><filter id= "myFilter" x="0" y="0"> 
< feConvolveMatrix kernelMatrix="111111111"> 
</feConvolveMatrix></filter></defs> 
< image xlink:href = "img/A199. jpg" id= "MyImage" x= "0" y= "0" width= "400" height = 
"250"/></svg></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,< feConvolveMatrix kernelMatrix 一 
1111111 1 1"> 中 的 kernelMatrix 属性 值 是 一 个 3X3 的 像素 阵列 ， 
feConvolveMatrix 滤 镜 使 用 此 像素 阵列 对 原始 图 像 的 像素 值 重 新 进行 计算 以 产生 模糊 特效 。 

此 实例 的 源 文件 名 是 myHtmlA199. html。 


191 使 用 SVG 滤 镜 对 图 像 进 行 深度 模糊 处 理 


此 实例 主要 通过 使 用 SVG 的 feConvolveMatrix 滤 镜 对 图 像 进行 深度 模糊 处 理 。 当 在 Google 
Chrome 浏览 器 中 显示 该 页 面 时 将 显示 默认 的 原始 图 像 , 单 击 * 显 示 深 度 的 模糊 图 像 " 按 钮 ,图 像 被 
feConvolveMatrix 滤 镜 处 理 后 的 效果 如 图 191-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 


三 5 亦 








[DD myHemlA200 html x 





图 191-1 


<!doctype html >< html >< head >< meta charset = "UTF — 8"> 
<script src= "js/jquery - 3.1.1.min. js"></script >< script type = "text/javascript"> 
$ (function() { 
$("#myBtnl").click(function() {// 显 示 默 认 的 原始 图 像 
$ ("image").attr("filter", ""); 
DD); 
$("#myBtn2").click(function() {// 显 示 深 度 的 模糊 图 像 
$ ("image").attr("filter", "url(#myFilter)"); });}); 
</script> 
<style type= "text/css"> 
svg { margin— top: 10px;position: absolute; left: calc(50% — 200px);} 
button { width: 195px;} 
</style></head> 
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<body>< div align = "center"> 
<button id= "myBtnl"> 显 示 默 认 的 原始 图 像 </button > 
<button id= "myBtn2"> 显 示 深 度 的 模糊 图 像 </button ></div> 
<svg width= "100%" height= "100% "><defs><filter id= "myFilter" x="0" y="0"> 
< feConvolveMatrix kernelMatrix="303000303"> 
</feConvolveMatrix></filter></defs> 
< image xlink:href ="img/A200. jpg" id= "MyImage" x="0" y="0" width= "400" height = "250"/></svg> 
</body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,< feConvolveMatrix kernelMatrix 一 
"303000 3 0 3"> 中 的 kernelMatrix 属性 值 是 一 个 3X3 的 像素 阵列 ， 
feConvolveMatrix 滤 镜 使 用 此 像素 阵列 对 原始 图 像 的 像素 值 重 新 进行 计算 以 产生 深度 模糊 特效 。 在 
一 般 情况 下 ,对 图 像 进行 模糊 处 理 或 锐 化 处 理 都 是 通过 阵列 对 相 邻 像素 进行 处 理 来 实现 的 。 

此 实例 的 源 文 件 名 是 myHtmlA200. html。 


192 ”使 用 SVG 滤 镜 对 图 像 进行 加 粗 锐 化 处 理 


此 实例 主要 通过 使 用 SVG 的 feConvolveMatrix 滤 镜 对 图 像 进行 加 粗 锐 化 处 理 。 当 在 Google 
Chrome 浏览 器 中 显示 该 页 面 时 将 显示 默认 的 原始 图 像 , 单 击 * 显 示 加 粗 的 锐 化 图 像 " 按 钮 ,图 像 被 
feConvolveMatrix 滤 镜 处 理 后 的 效果 如 图 192-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 192-1 


<!doctype html ><html >< head >< meta charset = "UTF - 8"> 
< script src= "js/jquery - 3.1.1.min. js"></script>< script type= "text/javascript"> 
$ (function() { 
$("#myBtn1").click(function() {// 显 示 默认 的 原始 图 像 
$ ("image").attr("filter", ""); 
DD); 
$ (" 提 myBtn2").click(function() {// 显 示 加 粗 的 锐 化 图 像 
$ ("image").attr("filter", "url(#myFilter)"); });}); 
</script > 
<style type= "text/css"> 
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svg { margin - top: 10px; position: absolute; left: calc(50% — 200px);} 
button { width: 195px;} 
</style></head> 
<body>< div align = "center"> 
<button id= "myBtnl"> 显 示 默 认 的 原始 图 像 </button > 
<button id= "myBtn2"> 显 示 加 粗 的 锐 化 图 像 </button ></div> 
<svg width= "100%" height= "100% "><defs><filter id= "myFilter" x="0" y="0"> 
< feConvolveMatrix kernelMatrix="0 -10 -15 -10-10"> 
</feConvolveMatrix></filter></defs> 
< image xlink:href = "img/A201. jpg" id = "MYImage" x= "0" y= "0" width = "400" height = "250"/> </svg > 
</body></html> 





上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 .< feConvolveMatrix kernelMatrix 一 
"0 一 1 0 一 1 5 一 1 0 一 1] 0"> 中 的 kernelMatrix 属性 值 是 一 个 3X 3 的 像素 阵列 ， 
feConvolveMatrix 滤 镜 使 用 此 像素 阵列 对 原始 图 像 的 像素 值 重 新 进行 计算 以 产生 加 粗 锐 化 特效 。 在 
SVG 中 ,feConvolveMatrix 不 仅 能 够 锐 化 图 像 ,同时 也 能 模糊 化 图 像 , 这 主要 取决 于 kernelMatrix 属 
性 值 所 代表 的 阵列 ; feGaussianBlur 滤 镜 通常 只 能 模糊 图 像 。 

此 实例 的 源 文件 名 是 myHtmlA201. html。 


193 ”使 用 SVG 滤 镜 对 图 像 进行 加 亮 锐 化 处 理 


此 实例 主要 通过 使 用 SVG 的 feConvolveMatrix 滤 镜 对 图 像 进行 加 亮 锐 化 处 理 。 当 在 Google 
Chrome 浏览 器 中 显示 该 页 面 时 将 显示 默认 的 原始 图 像 , 单 击 * 显 示 加 亮 的 锐 化 图 像 " 按 钮 ,图 像 被 
feConvolveMatrix 滤 镜 加 亮 锐 化 处 理 后 的 效果 如 图 193-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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<!doctype html ><html >< head >< meta charset = "UTF - 8"> 
<script src= "js/jquery -3.1.1.min.js"></script >< script type = "text/javascript"> 
$ (function() { 
$ ("#myBtn1").click(function() {// 显 示 默 认 的 原始 图 像 
$ ("image").attr("filter", ""); 
D; 
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$ ("myBtn2").click(function() {// 显 示 加 亮 的 锐 化 图 像 
$ ("image").attr("filter", "url(#myFilter)"); });}); 
</script> 
<style type= "text/css"> 
svg { margin - top: 10px; position: absolute; left: calc(50% — 200px);} 
button { width: 195px;} 
</style></head> 
<body>< div align = "center"> 
<button id= "myBtnl"> 显 示 默 认 的 原始 图 像 </button > 
<button id= "myBtn2"> 显 示 加 亮 的 锐 化 图 像 </button ></div> 
<svg width= "100%" height = "100% "><defs><filter id= "myFilter" x="0" y="0"> 
< feConvolveMatrix kernelMatrix="0 -20 -215-20-20"> 
</feConvolveMatrix></filter ></defs> 
< image xlink:href = "img/A202. jpg" id = "MYImage" x= "0" y= "0" width= "400" height = "250"/> 
</svg></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,< feConvolveMatrix kernelMatrix 一 
"0 一 2 0 一 2 15 一 2 0 一 2 0"> 中 的 kernelMatrix 属性 值 是 一 个 3 X 3 的 像素 阵列 ， 
feConvolveMatrix 滤 镜 使 用 此 像素 阵列 对 原始 图 像 的 像素 值 重新 进行 计算 以 产生 加 亮 锐 化 特效 。 
kernelMatrix 属性 值 所 代表 的 3X3 像素 阵列 主要 是 中 心 那个 值 和 周边 的 8 个 值 ,用 不 同 的 数字 测试 
会 使 图 像 获 得 不 同 的 特效 。 

此 实例 的 源 文 件 名 是 myHtmlA202. html。 


194 使 用 SVG 滤 镜 对 图 像 进行 边缘 化 处 理 


此 实例 主要 通过 使 用 SVG 的 feConvolveMatrix 滤 镜 对 图 像 进 行 边缘 化 处 理 。 当 在 Google 
Chrome 浏览 器 中 显示 该 页 面 时 将 显示 默认 的 原始 图 像 , 单 击 “显示 边缘 化 的 图 像 " 按 钮 ,图 像 被 
feConvolveMatrix 滤 镜 边缘 化 处 理 后 的 效果 如 图 194-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 


百 - Do x 
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[显示 默认 的 原 纳 图 傅 ”| 显示 边 缚 化 的 图 钨 ] 

















<!doctype html ><html ><head><meta charset = "UTF - 8"> 
<script src= "js/jquery - 3.1.1.min. js"></script>< script type = "text/javascript"> 
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$ (function() { 
$("#myBtn1").click(function() {// 显 示 默 认 的 原始 图 像 
$ ("image").attr("filter", ""); 
7 
$("#myBtn2").click(function() {// 显 示 边 缘 化 的 图 像 
$ ("image").attr("filter", "url(#myFilter)"); });}); 
</script> 
<style type= "text/css"> 
svg { margin - top: 10px; position: absolute; left: calc(50% — 200px);} 
button { width: 195px; } 
</style></head> 
<body>< div align = "center"> 
<button id= "myBtnl"> 显 示 默 认 的 原始 图 像 </button > 
<button id= "myBtn2"> 显 示 边 缘 化 的 图 像 </button ></div> 
<svg width= "100%" height= "100% "><defs><filter id= "myFilter" x="0" y= "0"> 
<feConvolveMatrix kernelMatrix="1111 -61111"> 
</feConvolveMatrix ></filter ></defs> 
< image xlink:href = "img/A202. jpg" id= "MyImage" x= "0" y= "0" width= "400" height = "250"/></svg > 
</body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,< feConvolveMatrix ”kernelMatrix 一 
"1 111-6 11 1 1"> 中 的 kernelMatrix 属性 值 是 一 个 3X3 的 像素 阵列 ， 
feConvolveMatrix 滤 镜 使 用 此 像素 阵列 对 原始 图 像 的 像素 值 重 新 进行 计算 以 产生 边缘 化 特效 。 

此 实例 的 源 文件 名 是 myHtmlA203. html。 


195 ”使 用 SVG 滤 镜 对 图 像 进行 浮雕 特效 处 理 


此 实例 主要 通过 使 用 SVG 的 feConvolveMatrix 滤 镜 对 图 像 进行 浮雕 特效 处 理 。 当 在 Google 
Chrome 浏览 器 中 显示 该 页 面 时 将 显示 默认 的 原始 图 像 , 单 击 * 显 示 浮 雕 效果 的 图 像 "按钮 ,图 像 被 
feConvolveMatrix 滤 镜 浮雕 处 理 后 的 效果 如 图 195-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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| 旺 示 默认 的 原始 图 像 ] | 旦 示 浮 哑 邹 果 的 图 像 
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<!doctype html ><html >< head >< meta charset = "UTF — 8"> 


<script src= "js/jquery -3.1.1.min.js"></script >< script type = "text/javascript"> 
$ (function() { 


$ (" 间 myBtn1").click(function() {// 显 示 默 认 的 原始 图 像 
$ ("image").attr("filter", ""); 
1D); 


$ ("#myBtn2").click(function() {// 显 示 浮 雕 效果 的 图 像 
$ ("image").attr("filter", "url(#myFilter)"); 
D7}); 
</script> 
< style type= "text/css"> 


svg { margin - top: 10px; position: absolute;left: calc(50% - 200px);} 
button { width: 195px;} 
</style></head> 
<body><div align = "center"> 
<button id= "myBtnl"> 显 示 默 认 的 原始 图 像 </button > 
<button id= "myBtn2"> 显 示 浮 雕 效果 的 图 像 </button></div> 
<svg width= "100%" height= "100% "><defs><filter id= "myFilter" x="0" y="0"> 
< feConvolveMatrix kernelMatrix=" -2 -10 -111012"> 
</feConvolveMatrix ></filter ></defs> 


< image xlink:href = "img/A204. jpg" id = "MyImage" x= "0" y= "0" width= "400" height = "250"/> 
</svg></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,< feConvolveMatrix ”kernelMatrix 一 
"一 2 一 1 0 一 1 1 1 0 1 2"> 中 的 kernelMatrix 属性 值 是 一 个 3x3 的 像素 阵列 ， 
feConvolveMatrix 滤 镜 使 用 此 像素 阵列 对 原始 图 像 的 像素 值 重 新 进行 计算 以 产生 浮雕 特效 。 

此 实例 的 源 文件 名 是 myHtmlA204. html。 


196 使 用 SVG 滤 镜 对 图 像 进行 木刻 特效 处 理 


此 实例 主要 通过 使 用 SVG 的 feConvolveMatrix 滤 镜 对 图 像 进行 木刻 特效 处 理 。 当 在 Google 
Chrome 浏览 器 中 显示 该 页 面 时 将 显示 默认 的 原始 图 像 , 单 击 “ 显 示 木 刻 效果 的 图 像 * 按 钮 ,图 像 被 
feConvolveMatrix 滤 镜 木刻 处 理 后 的 效果 如 图 196-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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[显示 默认 的 原始 图 傅 。 ”| | 。。 量 示 木刻 效果 的 图 像 
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<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<script src= "js/jquery - 3.1.1.min. js"></script> 
< script type = "text/javascript"> 
$ (function() { 
$ (" 间 myBtn1").click(function() { // 显 示 默认 的 原始 图 像 
$ ("image").attr("filter", ""); 
DD); 
$(" 间 myBtn2").click(function() { // 显 示 木 刻 效果 的 图 像 
$ ("image").attr("filter", "url(#myFilter)"); });}); 
</script> 
< style type= "text/css"> 
svg { margin - top: 10px; position: absolute;left: calc(50% -200px);} 
button { width: 195px;} 
</style></head> 
<body>< div align = "center"> 
<button id= "myBtn1"> 显 示 默 认 的 原始 图 像 </button > 
<button id= "myBtn2"> 显 示 木 刻 效果 的 图 像 </button></div > 
<svg width= "100%" height= "100% "><defs><filter id= "myFilter" x="0" y= "0"> 
< feConvolveMatrix kernelMatrix="-9 -20 -212029"> 
</feConvolveMatrix></filter></defs> 
< image xlink:href = "img/A204. jpg" id= "MyImage" x= "0"Y= "0" width= "400" height = "250"/></svg></ 
body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,< feConvolveMatrix kernelMatrix 一 
"一 -9 一 2 0 一 2 1 2 0 2 9"> 中 的 kernelMatrix 属性 值 是 一 个 3X3 的 像素 阵列 ， 
feConvolveMatrix 滤 镜 使 用 此 像素 阵列 对 原始 图 像 的 像素 值 重新 进行 计算 以 产生 木刻 特效 。 

此 实例 的 源 文件 名 是 myHtmlA205. html。 


197 使 用 SVG 滤 镜 为 图 像 添加 波纹 扩散 特效 


此 实例 主要 通过 使 用 SVG 的 feDisplacementMap 滤 镜 对 图 像 添加 波纹 扩散 的 特效 。 当 在 
Google Chrome 浏览 器 中 显示 该 页 面 时 将 显示 默认 的 原始 图 像 , 单 击 " 显 示 波 纹 扩散 的 图 像 " 按 钮 ,图 
像 添加 波纹 扩散 效果 之 后 如 图 197-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 

百 - 0o 


口 myHtmlA206 html x \ 上 的 
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| 显示 默认 的 原 冶 图像。 | | 显示 波纹 扩散 的 男 鲁 | 
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<!doctype html >< html><head><meta charset = "UTF — 8"> 
<script src= "js/jquery- 3.1.1.min. js"></script>< script type= "text/javascript"> 
$ (function() { 
$ ("myBtn1").click(function() {// 显 示 默 认 的 原始 图 像 
$ ("#myImage"). show(); $ ("rect").hide(); 
1); 
$ ("myBtn2").click(function() {// 显 示 波 纹 扩散 的 图 像 
$("#myInage"). hide(); $ ("rect"). show(); });}); 
</script >< style type= "text/css"> 
svg { margin— top: 10px; position: absolute; left: calc(50% — 200px);} 
button { width: 195px;} 
</style></head> 
<body >< div align = "center">< button id= "myBtn1"> 显 示 上 默认 的 原始 图 像 </button> 
<button id= "myBtn2"> 显 示 波 纹 扩散 的 图 像 </button></div > 
<svg width= "400" height = "250">< defs> 
<filter id= "myFilter" primitiveUnits = "objectBoundingBox" x="0" y="0" width= "1.1" height = "1.1"> 
< feImage result = "pict1" xlink:href ="#ml" x= "0" y= "0" width="1.1" height = "1.1"> 
</feImage> 
< feImage result = "pict2" xlink:href ="#m2" x= "0" y= "0" width= "1.1"”height = "1.1"> 
</feImage> 
< feDisplacementMap id = "fdm" scale = "0. 25”xChannelSelector = "R" yChannelSelector = "R" in2 = 
"pict2" in = "pictl"></feDisplacementMap ></filter> 
<! --cx cy 是 圆心 坐标 -一 > 
<radialGradient id= "g" cx= "0.5" cy= "0.5" r="0.08" spreadMethod= "reflect"> 
< stop offset ="0" stop - color = "black"></stop> 
< stop offset = "1” stop - color = "white"></stop ></radialGradient> 
<rect id= "m2" x="0" y= "0" width = "400px" height = "250px" fill= "url(#9g)"></rect> 
< image id= "ml" x="0" y="0" width = "400px" height = "250px" xlink:href = "img/A206. jpg"> </image > 
</defs> 
<rect x="0" y= "0" width= "400px" height = "250px" filter= "url(#myFilter)"></rect > 
< image id = "myImage" x= "0" y= "0" width = "400px" height = "250px" xlink: href =" img/A206. jpg"> 
</image> </svg></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,< feDisplacementMap id 一 "fdm" 
scale 一 "0. 25" xChannelSelector="R" yChannelSelector="R" in2 一 "pict2" in 一 "pict1"> 主 要 是 根据 
指定 的 属性 值 使 用 in2 一 "pict2" 的 (放射 渐变 模型 ) 像 素 置 换 in= "pictl" 的 (原始 ) 像素 ,从 而 使 in= 
"pictl" 产 生 波纹 扩散 的 效果 。 

此 实例 的 源 文 件 名 是 myHtmlA206. html。 


198 ”使 用 SVG 滤 镜 为 图 像 添加 波纹 起 伏特 效 


此 实例 主要 通过 使 用 SVG 的 feDisplacementMap 滤 镜 对 图 像 添加 波纹 起 伏 的 特效 。 当 在 
Google Chrome 浏览 器 中 显示 该 页 面 时 将 显示 默认 的 原始 图 像 , 单 击 * 显 示 波 纹 起 伏 的 图 像 " 按 钮 , 添 
加 波纹 起 伏 效果 的 图 像 如 图 198-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 





<!doctype html >< html >< head><meta charset = "UTF - 8"> 
< script src= "js/jquery - 3.1.1.min. js"></script>< script type = "text/javascript"> 
$ (function() { 
$ ("站 myBtn1").click(function() {// 显 示 默 认 的 原始 图 像 
$ ("#myImage"). show(); $ ("rect").hide(); 
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D; 
$ (" 间 myBtn2").click(function() {// 显 示 波 纹 起 伏 的 图 像 
$ ("#myImage").hide(); $ ("rect"). show(); 
了 
</script >< style type = "text/css"> 
svg { margin - top: 10px; position: absolute; left: calc(50% ~ 200px); } 
button { width: 195px; } 
</style></head> 
<body><div align = "center"> 
<button id= "myBtn1"> 显 示 上 默认 的 原始 图 像 </button> 
<button id= "myBtn2"> 显 示 波 纹 起 伏 的 图 像 </button></div > 
<svg width= "400" height = "250"> 
<defs > 
<filter id="f" primitiveUnits = "objectBoundingBox" x="0" y="0" width= "1.1" height= "1.1"> 
< feImage result = "pict1" xlink:href ="#ml" x= "0" y= "0" width= "1.1”height = "1.1"> 
</feImage> 
< feImage result = "pict2" xlink:href ="#m2" x= "0" y= "0" width= "1.1”height = "1.1"> 
</feImage> 
< feDisplacementMap id = "fdm" scale = "0. 05”xChannelSelector = "A" yChannelSelector = "A" in2 = 
"pict2" in = "pictl"></feDisplacementMap ></filter> 
<linearGradient id= "g" xl= "0" yl ="0" x2= "0.2" y2 ="0.02" spreadMethod = "reflect"> 
< stop offset ="0" stop— color = "rgba(0,0,0,0.8)"></stop> 
< stop offset ="0.2" stop - color = "rgba(0,0,0,0.7)"></stop > 
< stop offset ="0.6" stop - color = "rgba(0,0,0,0.1)"></stop> 
< stop offset ="1" stop— color = "rgba(0,0, 0,0)"></stop></linearGradient> 
<rect id= "m2" x="0" y= "0" width= "400" height ="250" fill= "url(#9g)"></rect> 
<image id= "ml" x="0" y="0" width= "400" height = "250" xlink:href = "img/A206. jpg"> 
</image ></defs> 
<rect x="0" y= "0" width= "400" height = "250" filter = "url(#f)"></rect> 
<rect x="0" y= "0" width= "400" height = "250" fill="url(#92)" ></rect > 
< image id= "myImage" x= "0" y= "0" width = "400px" height = "250px" xlink:href ="img/A206. jpg"> 
</image></svg> 
</body></html > 





上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,feDisplacementMap 滤 镜 主要 是 通过 
像素 置换 实现 波纹 起 伏特 效 , 它 主要 使 用 下 列 公 式 置 换 像素 。 
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P'(x,y) <- P( x 十 scale * (XC(x,y)—0.5), y+scalex* (YC(x,y)—0.5)) 


大 概 意思 是 ,P'(x,y) 是 置换 之 后 的 像素 坐标 .公式 就 是 原本 的 坐标 ( x,y ) 加 上 振幅 比例 (scale) 
与 xChannelSelector 或 yChannelSelector 的 乘积 。 

简单 来 说 就 是 提供 一 张 以 R 或 G、B、A 为 主 的 图 片 ,目的 是 作为 另外 一 张 图 片 的 置换 参考 ,怎样 
置换 取决 于 提供 的 图 片 颜色 以 及 被 置换 的 图 片 颜色 ,如 果 以 及 通道 为 例 , 越 红 置 换 的 比例 越 高 ,但 如 
果 图 片 里 面 没有 红色 , 则 R 作为 置换 的 效果 就 不 明显 或 与 其 他 颜色 通道 不 同 。 该 实例 则 主要 通过 A 
通道 解决 此 问题 。 注 意 观 察 ,< stop offset 王 "0"” stop-color 二 "rgba(0,0,0,0.8)"></stop > 中 的 0.8 
就 是 A 值 ,修改 4 个 < stop > 标签 的 任意 A 值 就 会 得 到 不 同 的 起 伏特 效 。 

此 实例 的 源 文件 名 是 myHtmlA207. html。 


199 使 用 SVG 的 放射 渐变 创建 3D 风格 的 球体 


此 实例 主要 通过 使 用 SVG 的 放射 渐变 radialGradient 创建 类 似 于 月 全 食 效 果 的 3D 球体 。 当 在 
Google Chrome 浏览 器 中 显示 该 页 面 时 将 显示 一 个 以 绿色 为 主 色调 的 3D 球体 ,如 图 199-1 所 示 ; 单 


击 “ 显 示 红 色 的 3D 球体 ”按钮 ,将 显示 一 个 类 似 于 月 全 食 的 以 红色 为 主 色调 的 3D 球体 ,如 图 199-2 所 
示 。 有 关 此 实例 的 主要 代码 如 下 。 








百 - 5 x 百 - 9 x 
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图 199-1 


<!doctype html >< html >< head ><meta charset = "UTF — 8"> 
< script src= "js/jquery -3.1.1.min. js"></script>< script type = "text/javascript"> 
$ (function() { 
$ ("##myBtn1").click(function() {// 显 示 绿 色 的 3D 球体 
$ ("circle").attr("fill", "url(#myFilterGreen)"); }); 
$ ("##myBtn2").click(function() {// 显 示 红 色 的 3D 球体 
$ ("circle").attr("fill", "url(#myFilterRed)"); });}); 
</script > 
<style type = "text/css"> 
svg { margin - top: 10px;position: absolute; left: calc(50% — 200px);} 
button { width: 195px;} 
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</style></head> 
<body>< div align = "center"><button id = "myBtn1"> 显 示 绿 色 的 3D 球体 </button > 
<button id= "myBtn2"> 显 示 红 色 的 3D 球体 </button ></div> 
<svg width= "400" height = "400"><defs> 
<radialGradient id= "myFilterGreen" cx="0.3" cy= "0.3" r="0.7"> 
< stop offset ="0%" stop— color ="#FFF"></stop> 
< stop offset ="30%" stop— color =" 井 9F9"></stop> 
< stop offset ="70%" stop— color = "#373"></stop> 
< stop offset ="100%" stop- color = "#000"></stop></radialGradient > 
<radialGradient id= "myFilterRed" cx="0.3" cy="0.3" r="0.7"> 
< stop offset ="0%" stop— color ="#FFF"></stop> 
< stop offset ="30%" stop— color = "yellow"></stop> 
< stop offset ="70%" stop— color = "red"></stop > 
< stop offset ="100%" stop— color = "#000"></stop></radialGradient ></defs> 
<circle cx="200" cy="200"r= "180" fill= "url(#myFilterGreen)"/></svg> 
</body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,放射 ( 径 向 ) 渐 变 radialGradient 是 渐 
变 方向 沿 着 圆 形 半径 的 渐变 。 放 射 渐变 radialGradient 的 cx 和 cy 属性 规定 渐变 的 圆心 位 置 ,r 规定 
渐变 的 半径 ,这 3 个 属性 确定 了 渐变 的 区 域 。 放 射 渐变 radialGradient 常用 的 < stop > 元 素 规定 进行 
渐变 的 区 域 和 定义 渐变 的 相关 颜色 。 其 中 的 offset 属性 值 可 以 是 百分数 ,也 可 以 是 小 数 , 它 和 stop 
color 属性 一 起 规定 每 个 渐变 点 的 颜色 值 ,在 一 般 情况 下 该 值 都 是 纯色 

此 实例 的 源 文件 名 是 myHtmlA208. html 


200 使 用 SVG 滤 镜 对 图 像 进行 离散 特效 处 理 


此 实例 主要 通过 使 用 SVG 的 feComponentTransfer 滤 镜 对 图 像 进行 离散 特效 处 理 。 当 在 
Google Chrome 浏览 器 中 显示 该 页 面 时 将 显示 默认 的 原始 图 像 , 单 击 " 显 示 离 散 特 效 的 图 像 " 按 钮 .图 
像 经 过 feComponentTransfer 滤 镜 处 理 后 产生 的 离散 效果 如 图 200-1 所 示 。 有 关 此 实例 的 主要 代码 
如 下 。 
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图 200-1 
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<!doctype html ><html >< head >< meta charset = "UTF — 8"> 
<script src= "js/jquery -3.1.1.min. js"></script >< script type = "text/javascript"> 
$ (function() { 
$(" 间 myBtn1").click(function() {// 显 示 默 认 的 原始 图 像 
$ ("image").attr("filter"”, ""); }); 
$ ("myBtn2").click(function() { // 显 示 离 散 特效 的 图 像 
$ ("image").attr("filter", "url(#myFilter)"); });}); 
</script> 
<style type= "text/css"> 
svg {margin— top: 10px;position: absolute; left: calc(50 % — 200px);} 
button { width: 195px;} 
</style></head> 
<body>< div align = "center">< button id= "myBtn1"> 显 示 上 默认 的 原始 图 像 </button> 
<button id= "myBtn2"> 显 示 离 散 特效 的 图 像 </button ></div> 
<svg width= "400" height = "250">< defs> 
<filter id= "myFilter" filterUnits= "userSpaceOnUse" x= "0" yY= "0" width= "400" height = "250"> 
< feComponent Transfer > 
< feFuncR type= "discrete" tableValues= "0.0 1.0 1.0 1.0"/> 
< feFuncG type= "discrete" tableValues= "0.0 0.5 0.5 0.9"/> 
< feFuncB type = "discrete" tableValues= "0.0 0.6"/> 
</feComponentTransfer ></filter ></defs> 
<image x= "0" y= "0" width= "400" height = "250" xlink:href = "img/A209. jpg"/></svg> 
</body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,feComponentTransfer 滤 镜 用 于 针对 
图 像 的 每 个 像素 通过 公式 计算 调整 亮度 、 对 比 度 等 特性 ,以 类 似 于 Photoshop 的 曲线 调整 模式 对 图 像 
进行 特效 处 理 。feComponentTransfer 滤 镜 包含 4 个 元 素 ,它们 分 别 是 feFuncR、feFuncG、feFuncB、 
feFuncA, 也 就 是 可 以 针对 R、G、B、A 进行 独立 调整 ,调整 的 类 型 (type) 分 别 是 identity table、 
discrete linear .gamma。 当 前 实例 主要 采用 discrete 调整 图 像 。 

此 实例 的 源 文件 名 是 myHtmlA209. html。 


201 使 用 SVG 滤 镜 以 蓝光 或 红 光 处 理 图 像 


此 实例 主要 通过 使 用 SVG 的 feComponentTransfer 滤 镜 对 图 像 进行 蓝光 或 红 光 特效 处 理 。 当 
在 Google Chrome 浏览 器 中 显示 该 页 面 时 将 显示 默认 的 原始 图 像 . 单 击 * 以 红 光 特效 显示 图 像 "按钮 ， 
则 图 像 经 过 feComponentTransfer 滤 镜 处 理 后 产生 的 红 光 效果 如 图 201-1 所 示 ; 单 击 “以 蓝光 特效 显 
示 图 像 "按钮 ,图像 经 过 feComponentTransfer 滤 镜 处 理 后 产生 的 蓝光 效果 如 图 201-2 所 示 。 有 关 此 
实例 的 主要 代码 如 下 。 





<!doctype html >< html1><head ><meta charset = "UTF - 8"> 
< script src= "js/jquery - 3.1.1.min. js"></script >< script type= "text/javascript"> 
$ (function() { 
$("#myBtn1").click(function() {// 以 红 光 特效 显示 图 像 
$ ("image").attr("filter", "url(#myFilterRed)"); 
Ds; 
$("#myBtn2").click(function() {// 以 蓝光 特效 显示 图 像 
$ ("image").attr("filter", "url(#myFilterBlue)"); });}); 
</script> 
< style type= "text/css"> 
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svg { margin— top: 10px; position: absolute; left: calc(50% — 200px);} 
button { width: 195px;} 
</style></head> 
<body><div align = "center"> 
<button id= "myBtn1"> 以 红 光 特效 显示 图 像 </button> 
<button id= "myBtn2"> 以 蓝光 特效 显示 图 像 </button></div> 
<svg width= "400" height = "250">< defs> 
<filter id= "myFilterRed" filterUnits = "userSpaceOnUse" x= "0" y= "0" width= "400" height = "250"> 
< feComponent'Transfer >< feFuncR type= "table" tableValues ="0.99 0.7 0.9 1.0"/> 
< feFuncG type= "table" tableValues= "0.2 0.7 0.9 1.0"/> 
< feFuncB type= "table" tableValues= "0.2 0.7 0.9 1.0"/> 
</feComponentTransfer ></filter > 
<filter id= "myFilterBlue" filterUnits = "userSpaceOnUse" x= "0" y= "0" width = "400" height = "250"> 
< feComponent'Transfer > 
< feFuncR type= "table" tableValues= "0.0 0.7 0.9 1.0"/> 
< feFuncG type= "table" tableValues= "0.2 0.7 0.9 1.0"/> 
< feFuncB type= "table" tableValues = "0.99 0.7 0.9 1.0"/> 
</feComponentTransfer ></filter ></defs> 
<image x= "0" y= "0" width= "400" height = "250" xlink:href = "img/A210. jpg"/></svg> 
</body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,feComponentTransfer 滤 镜 主要 通过 
公式 计算 对 图 像 像 素 的 亮度 、 对 比 度 等 特性 进行 调整 。feComponentTransfer 滤 镜 包含 4 个 元 素 , 它 
们 分 别 是 feFuncR、feFuncG、feFuncB,feFuncA., 也 就 是 可 以 针对 R.G、B、A 进行 独立 调整 ,调整 的 类 
型 (type) 分 别 是 identity ,table、discrete、linear、gamma。 当 前 实例 主要 采用 table 调整 图 像 ,以 实现 红 
光 或 蓝光 特效 。 

此 实例 的 源 文 件 名 是 myHtmlA210. html。 


DY myHtmia210 html x \W DD myHemlA210html x \W 
5 3 © Dfile///D/myWork/myHtmlA210 安 所 3 CC DfileV/DVmywWorwmyHtmlA210 它 三 








以 条 光 特 歼 旺 示 图 灸 。。 | | 以 波光 社戏 蜡 示 图 名。 ] [以 吾 光 特效 显示 图 银 








图 201-1 图 201-2 


202 ”使 用 SVG 滤 镜 根据 指定 颜色 消除 像素 


此 实例 主要 通过 使 用 SVG 的 feComponentTransfer 滤 镜 消除 图 像 中 指定 颜色 的 像素 。 当 在 
Google Chrome 浏览 器 中 显示 该 页 面 时 将 显示 默认 的 原始 图 像 , 单 击 “ 消 除 图 像 的 绿色 像素 "按钮, 则 
图 像 经 过 feComponentTransfer 滤 镜 处 理 后 产生 的 效果 如 图 202-1 所 示 ; 单 击 “ 消 除 图 像 的 蓝 色 像 
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素 ” 按 钮 ,图 像 经 过 feComponentTransfer 滤 镜 处 理 后 产生 的 效果 如 图 202-2 所 示 。 有 关 此 实例 的 主 
要 代码 如 下 。 


























百 - o x 百 日 次 
D myHtmlA211 html ) DD myHemlA211 html x 
SS 3 C fleV/DVmyWorwmyHtmlA211h 安 三 S 3 © Dfile///D/myWork/myHtmlA211.h 字 三 
| 消 旷 图 像 的 绿色 像素 [。 测 听 图像 的 车 色 像素 E 绿色 食 素 | |。 消 际 图像 的 牙 色 入 
EE» 
图 202-1 图 202-2 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<script src= "js/jquery -3.1.1.min. js"></script >< script type = "text/javascript"> 
$ (function() { 
$("#myBtn1").click(function() {// 消 除 图 像 的 绿色 像素 
$ ("image").attr("filter", "url(#myFilterLinearG)"); 
DD); 
$ (" 间 myBtn2").click(function() {// 消 除 图 像 的 蓝 色 像素 
$ ("image").attr("filter", "url(#myFilterLinearB)"); });}); 
</script> 
< style type= "text/css"> 
svg { margin - top: 10px; position: absolute;left: calc(50% - 200px);} 
button { width: 195px;} 
</style></head> 
<body>< div align = "center"> 
<button id = "myBtn1"> 消 除 图 像 的 绿色 像素 </button> 
<button id= "myBtn2"> 消 除 图 像 的 蓝 色 像素 </button></div> 
<svg width= "100%" height = "100%" ><defs> 
<filter id= "myFilterLinearB" filterUnits = "objectBoundingBox" x ="0%" y="0%" width= "100%" 
height = "100% "> 
< feComponentTransfer >< feFuncB type = "linear" slope= "0" intercept = "0"/> 
</feComponentTransfer ></filter > 
<filter id = "myFilterLinearG" filterUnits = "objectBoundingBox" x ="0%" y="0%" width = "100%" 
height = "100% "> 
< feComponentTransfer >< feFuncG type = "linear" slope= "0" intercept = "0"/> 
</feComponentTransfer ></filter ></defs> 
<image x= "0" y= "0" width= "400" height = "250" xlink:href ="img/A211. jpg" /></svg> 
</body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,feComponentTransfer 滤 镜 主要 通过 
公式 计算 对 图 像 的 亮度 、 对 比 度 等 特性 进行 调整 。feComponentTransfer 滤 镜 包含 4 个 元 素 , 它 们 分 
别 是 feFuncR、feFuncG,feFuncB、feFuncA, 也 就 是 可 以 针对 R、G、B、A 进行 独立 调整 ,调整 的 类 型 
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(type) 分 别 是 identity table discrete linear .gamma。 当 前 实例 主要 采用 linear 调整 图 像 。 与 linear 
有 关 的 参数 有 两 个 ,一 个 是 slope, 也 就 是 斜率 , 预 设 值 为 1; 另外 一 个 是 intercept, 预 设 值 为 0。linear 
的 公式 为 C' 二 slope * C 十 intercept。 

此 实例 的 源 文件 名 是 myHtmlA211. html。 


203 ”使 用 SVG 滤 镜 Gamma 校正 图 像 的 像素 


此 实例 主要 使 用 SVG 的 feComponentTransfer 滤 镜 ,从 而 实现 使 用 Gamma 方法 校正 图 像 中 的 
像素 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 将 显示 默认 的 原始 图 像 , 单 击 “Gamma 校正 图 像 
的 绿色 像素 ”按钮 ,图 像 经 过 feComponentTransfer 滤 镜 处 理 后 产生 的 效果 如 图 203-1 所 示 ; 单 击 
“Gamma 校正 图 像 的 红色 像素 "按钮 ,图 像 经 过 feComponentTransfer 滤 镜 处 理 后 产生 的 效果 如 
图 203-2 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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口 myHemlA212htm| x 口 myHemlA212html| x 
= 3 CDfileV/DVmyWworkmyHtmlA212h 空 三 “ 3 CC Dfile///D/myWork/myHtmlA212.h 字 三 
|_ Gamma 校正 图 像 的 绍 色 像素 Gamma 校 正 图 像 的 红色 像素 | 中 Gamma 校 正 图 像 的 绿色 像素 Gamma 和 校正 图 像 的 红色 像素 























图 203-1 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<script src= "js/jquery -3.1.1.min.js"></script >< script type = "text/javascript"> 
$ (function() { 
$(" 间 myBtn1").click(function() {//Gamma 校正 图 像 的 绿色 像素 
$ ("image").attr("filter", "url(#myFilterGammaG)"); 
1D); 
$("#myBtn2").click(function() {//Gamma 校正 图 像 的 红色 像素 
$ ("image").attr("filter", "url(#myFilterGammaR)"); 
D7}); 
</script> 
<style type= "text/css"> 
svg { margin— top: 10px;position: absolute; left: calc(50% — 200px);} 
button { width: 195px;} 
</style></head> 
<body>< div align = "center"> 
<button id= "myBtn1"> Gamma 校正 图 像 的 绿色 像素 </button > 
<button id= "myBtn2"> Gamma 校正 图 像 的 红色 像素 </button ></div> 
<svg width= "100% " height = "100% ">< defs> 
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<filter id= "myFilterGammaG" filterUnits = "objectBoundingBox" x="0%" y= "0%" width="100%" height = 
"100% "> < feComponentTransfer > < feFuncG type = "gamma" amplitude ="2" exponent = "3" offset ="0"/> 
</feComponentTransfer ></filter > 

<filter id = "myFilterGammaR" filterUnits = "objectBoundingBox" x ="0%" y="0%" width = "100%" 
height = "100 % "> < feComponentTransfer > < feFuncR type = "gamma" amplitude = "2" exponent = "5" offset = 
"0"/></feComponentTransfer ></filter ></defs> 

<image x= "0" y="0" width= "400" height = "250" xlink:href ="img/A211. jpg" /></svg> 
</body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,feComponentTransfer 滤 镜 主要 通过 
公式 计算 对 图 像 的 亮度 对比度 等 特性 进行 调整 。feComponentTransfer 滤 镜 包含 4 个 元 素 ,它们 分 
别 是 ftFuncR .feFuncG ,feFuncBfeFuncA ,也 就 是 可 以 针对 R、G、B、A 进行 独立 调整 ,调整 的 类 型 
(type) 分 别 是 identity ,table、discrete \linear、gamma。 当 前 实例 主要 采用 gamma 方法 调整 图 像 。 
gamma 调整 图 像 的 公式 为 C' 王 amplitude * pow(C,exponent) 十 offset, 因 此 就 具有 amplitude( 振 幅 ) 、 
exponent( 指 数 ) .offset( 偏 移 量 )3 个 参数 。 

此 实例 的 源 文件 名 是 myHtmlA212. html。 


204 使 用 SVG 滤 镜 以 半 个 太极 图 裁剪 图 像 


此 实例 主要 通过 使 用 SVG 的 feComposite、feOffset 等 滤 镜 将 图 像 裁剪 成 半 个 太极 图 。 当 在 
Google Chrome 浏览 器 中 显示 该 页 面 时 将 显示 默认 创建 的 半 个 太极 图 ,如 图 204-1 所 示 ; 单 击 “使 用 
半 个 太极 图 裁剪 图 像 "按钮 , 则 半 个 太极 图 的 内 部 将 被 一 幅 图 像 填 充 , 如 图 204-2 所 示 。 有 关 此 实例 
的 主要 代码 如 下 。 
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[_ 量 示 区 认 的 半 个 太 根 图 ”| | 使 用 站 个 太 根 图 客 和 图 像 | 包 [加 未 愤 认 的 夺 个 太极 图 。 | 使 用 半 个 太极 图 训 入 图 像 】 馈 
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<!doctype html ><html >< head>< meta charset = "UTF - 8"> 
< script src= "js/jquery - 3.1.1.min. js"></script>< script type = "text/javascript"> 
$ (function() { 
$("#myBtn1").click(function() {// 显 示 默 认 的 半 个 太极 图 
$ ("path").attr("filter", ""); 
D); 
$ ("#myBtn2").click(function() {// 使 用 半 个 太极 图 裁剪 图 像 
$ ("path"). attr("filter", "url(#myFilter)"); 
D2); 
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</script> 
< style type= "text/css"> 
svg { margin - top: 10px; position: absolute; left: calc(50% — 200px);} 
button { width: 175px;} 
</style></head> 
<body>< div align = "center"> 
<button id= "myBtnl"> 显 示 默 认 的 半 个 太极 图 </button> 
<button id= "myBtn2"> 使 用 半 个 太极 图 裁剪 图 像 </button></div> 
<svg width= "100% ”height = "100% "> 
<defs><filter id= "myFilter"> 
< feImage xlink:href = "img/A197. jpg" width= "400" height = "250" result = "myA197" /> 
< feComposite in = "myA197" in2= "SourceAlpha" operator = "in"/></filter> 
</defs> 
<path d= "M193. 1 79. 292 C224. 16 88.7968 242. 127 121. 499 232. 627 154. 414 C223. 127 187. 328 239. 995 
220. 003 271. 913 229. 504 C303. 83 239. 006 336. 35 218. 61 345 188.876 C323.124 264. 909 248.755 285. 576 
198. 994 270. 349 C149.231 255. 12 98.1789 196. 096 120. 144 119. 992 C129.376 88. 0081 162.039 69.7869 
193. 1 79. 292 zM167. 341 136. 242 C167.341 141. 144 170. 673 145. 311 176. 03 145.311 C181.386 145. 311 
184. 242 140. 899 184. 242 136. 242 C184.242 131. 584 180.796 127. 762 175. 91 127. 785 C171.025 127. 809 
167. 341 131. 339 167. 341 136. 242 z" transform = "translate(0, ~- 70)" style = "fill: rgb(192, 192, 255); 
stroke:rgb(130,0,61); stroke ~ width: 1px;";/></svg> </body ></html > 





上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,< path/> 标 签 中 的 d 属性 值 是 绘制 半 
个 太极 图 的 关键 点 坐标 ; <feComposite in 二 "myA197" in2 王 "SourceAlpha" operator 二 "in" /> 表示 将 
半 个 太极 图 与 in 二 "myA197" 图 像 进行 像素 运算 ,operator 属性 常用 的 属性 值 有 overin、out、atop、 
xor、arithmetic, 它 们 分 别 对 应 不 同 的 算法 ,默认 值 为 over。 

此 实例 的 源 文件 名 是 myHtmlA197. html。 


205 ”使 用 SVG 滤 镜 将 图 像 裁剪 成 桃 心 图 案 


此 实例 主要 通过 使 用 SVG 的 feComposite、 feOffset 等 滤 镜 将 图 像 裁剪 成 桃 心 图 案 。 当 在 
Google Chrome 浏览 器 中 显示 该 页 面 时 将 显示 创建 的 默认 桃 心 图 案 , 单 击 * 使 用 桃 心 图 案 裁 前 图 像 ” 
按钮 , 则 桃 心 图 案 的 内 部 将 被 一 幅 图 像 填充 ,如 图 205-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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口 myHemlA198 html x 
3 © D file///D/myWorK/myHtmIlA 字 三 
[时 示 融 认 的 居心 本 过 使 用 柄 心 图 来 问 表 图 名 














图 205-1 





第 2 部 分 > 


<!doctype html >< html >< head >< meta charset = "UTF — 8"> 
<script src= "js/jquery - 3.1.1.min. js"></script>< script type = "text/javascript"> 
$ (function() { 
$(" 间 myBtn1").click(function() {// 显 示 默认 的 桃 心 图 案 
$ ("path").attr("filter", ""); 
D; 
$ ("myBtn2").click(function() {// 使 用 桃 心 图 案 裁剪 图 像 
$ ("path").attr("filter", "url(#myFilter)"); 
D2;}); 
</script > 
<style type= "text/css"> 
svg { margin - top: 10px; position: absolute; left: calc(50% ~ 200px);} 
button { width: 175px;} 
</style></head> 
<body>< div align = "center"> 
<button id = "myBtnl"> 显 示 默 认 的 桃 心 图 案 </button > 
<button id= "myBtn2"> 使 用 桃 心 图 案 裁剪 图 像 </button></div> 
<svg width= "100%" height = "100% "><defs><filter id= "myFilter"> 
< felImage xlink:href = "img/A198. jpg" width= "400" height = "250" result = "myA198" /> 
< feComposite in = "myA198" in2= "SourceAlpha”" operator = "in"/></filter ></defs> 
<path d= "M233. 642 288 C249.9 265. 728 318 231. 266 318 195. 613 C318 133. 896 247. 069 148. 581 232. 993 
172. 957 C218. 041 147.832 149 137.805 149 195.613 C149 232.135 219. 429 265.911 233. 642 288 z" transform 
= "scale(1.95), translate( ~ 130, -140)" 
style = "fill:red;stroke:black; stroke— width: lpx;";/></svg></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,< path/> 标 签 中 的 d 属性 值 是 绘制 桃 
心 图 案 的 关键 点 坐标 ; < feComposite in 二 "myA198" in2 王 "SourceAlpha" operator 王 "in"/> 表 示 将 桃 
心 图 案 与 in 二 "myA198" 图 像 进行 像素 运算 , 即 提取 与 桃 心 图 案 对 应 位 置 的 图 像 像 素 。 

此 实例 的 源 文件 名 是 myHtmlA198. html。 


206 使 用 SVG 路 径 将 图 像 裁剪 成 任意 形状 


此 实例 主要 通过 使 用 SVG 的 clip-path 属性 将 图 像 裁剪 成 任意 形状 。 当 在 Google Chrome 浏览 
器 中 显示 该 页 面 时 将 显示 默认 的 原始 图 像 , 单 击 * 显 示 裁 剪 的 图 像 "按钮 ,图 像 经 过 预 署 的 不 规则 路 径 
裁剪 之 后 的 形状 如 图 206-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 














百 - o x 
口 myHtmlA219 html x 
3 CC Dfile///D/myWork/myHtmlA219.htrs? 三 
[ 时 未 原始 的 图 多 ] 亚 示 吉田 的 困 多 |] 











图 206-1 
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<!doctype html >< html >< head >< meta charset = "UTF - 8"> 


< script src= "js/jquery- 3.1.1.min. js"></script>< script type= "text/javascript"> 
$ (function() { 
$ ("myBtn1").click(function() {// 显 示 原 始 的 图 像 
$ ("image").attr("clip— path", ""); }); 
$("#myBtn2").click(function() {// 显 示 裁 剪 的 图 像 
$ ("image").attr("clip— path", "url(#myClip)"); });}); 
</script> 
<style type= "text/css"> 
.mySVG { width: 410px; height: 410px;} 
button { width: 195px;} 
</style></head> 
<body>< div align = "center"> 
<button id= "myBtn1"> 显 示 原 始 的 图 像 </button > 
<button id= "myBtn2"> 显 示 裁 前 的 图 像 </button ></div> 
<div align = "center">< svg class = "mySVG">< defs> 
<clipPath id = "myClip”transform = "scale(1.5,1),translate( - 25, 一 50)"> 
<path d= "M66.039,133.545 c0,0 -21— 57,18— 67 s49— 4,65,8 s30,41,53,27 s66, 4,58, 32 s - 5, 44,18, 57 
s22,46,0,45 s- 54-40- 68-16s-40,88-83,48 sll-61-11-80s-79-7 -70-41 C46.039,146.545, 
53. 039,128. 545, 66. 039, 133. 545 z"/> </clipPath></defs> 
< image x="—20" y="5" width= "450" height = "250" xlink:href = "img/A219. jpg"/></svg> 
</div></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,< clipPath > 标签 用 于 隐藏 位 于 剪 切 
路 径 以 外 的 对 象 部 分 ,在 < clipPath > 标签 中 通常 需要 在 子 结 点 中 使 用 < path > 标签 创建 不 规则 路 径 。 
在 其 他 标签 中 定义 绘制 什么 和 不 绘制 什么 的 模具 被 称 为 剪 切 路 径 (clip-path),clip-path 属性 值 指向 的 
即 是 < clipPath > 标签 ,例如 clip-path 王 "url(# myClip)"。 
此 实例 的 源 文件 名 是 myHtmlA219. html。 


207 在 SVG 中 通过 路 径 绘制 多 个 扇形 饼 图 


此 实例 





显示 该 页 面 时 









通过 使 用 SVG 的 < path > 标签 绘制 多 个 扇形 的 饼 图 。 当 在 Google Chrome 浏览 器 中 
,通过 路 径 绘 制 的 多 个 扇形 的 饼 图 效果 如 图 207-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 





[DD myHemla214 html x 


+- 3 © Dfile///D/myWork/myHtmlA214h 字 三 








第 2 部 分 图 像 





<!doctype html ><html >< head >< meta charset = "UTF — 8"> 
<script src= "js/jquery -3.1.1.min.js"></script >< script type = "text/javascript"> 
$ (function() { 
var startAngle= 0; var cx= 150; 
var cy = 150; var r =135; 
var myDegl = 30 + startAngle; 
var myDeg2 = 45 + myDeg1; 
var myDeg3 = 75 + myDeg2; 
var myDeg4 = 210 + myDeg3; 
Var x0 = cx+r*Math.cos(startAngle * Math. PI/180); 
var y0 = cy —r * Math. sin( startAngle * Math. PI/180); 
var xl = cx +r* Math.cos(myDegl * Math. PI/180); 
var yl = cy —r * Math. sin(myDegl x Math. PI/180); 
var x2 = cx+r*Math.cos(myDeg2 * Math. PI/180); 
var Y2 = cy —r*Math. sin(myDeg2 * Math. PI/180); 
var x3 = cx +r*Math.cos(myDeg3 x Math. PI/180); 
var y3= cy —r*Math. sin(myDeg3 * Math. PI/180); 
Var x4 = cx+ 工 # Math. cos(myDeg4 * Math. PI/180); 
var Y4= cy —r*Math. sin(myDeg4 * Math. PI/180); 
人 tte 
站 
[er DD eR 
和 
亲人 站 3 人 人 
A 
// 如 果 要 绘制 大 于 180 的 饼 图 ,路 径 角度 弧 线 应 为 1, 即 "0 1,0" 
人 (tt dn 下 三 沁 本 3 和 3 二 放 机 下 过 汪 7 直下 丽人 7C 志 二 
+" 
1); 
</script > 
<style type= "text/css"> 
svg { margin - top: 10px;position: absolute; left: calc(50% — 135px);} 
</style></head> 
<body >< svg width = "100 %" height = "100% "> 
<path id= "myPiel" style= "fill:cyan; stroke:#FFF; stroke— width:2;"/> 
<path id = "myPie2" style= "fill:red; stroke:#FFF; stroke— width:2;"/> 
<path id= "myPie3" style = "fill:green; stroke:#FFF; stroke - width:2;"/> 
<path id = "myPie4" style= "fill:blue; stroke:#FFF; stroke— width:2;"/> 
</ svg ></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,如 果 要 绘制 大 于 180 的 饼 图 ,路 径 角 
度 弧 线 应 为 1, 即 "0 1,0", 例 如 “ 书 (" 井 myPie4"). attr("d"，"M "十 cx 十 ", "十 cy 十 " L "十 x3+ 
"十 y3 十 " A "十 r 十 "，," 十 r 十 " 0 1,0 "十 x4 十 "," 十 y4 十 ”2")”, 可 以 对 比 前 面 3 行 代码 与 此 行 代码 的 
差异 。 

此 实例 的 源 文件 名 是 myHtmlA214. html。 


208 使 用 SVG 滤 镜 实现 仅 显 示 图 像 的 轮廓 边缘 


此 实例 主要 通过 在 SVG 中 使 用 feSpecularLighting 滤 镜 提取 图 像 的 轮廓 边缘 ,以 产生 类 似 于 版 
画 的 效果 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 将 显示 原始 的 图 像 , 单 击 “ 使 用 青色 光源 照射 
图 像 ”按钮 ,提取 的 图 像 轮廓 如 图 208-1 所 示 ; 单 击 “ 使 用 黄色 光源 照射 图 像 ” 按 钮 ,提取 的 图 像 轮廓 如 

















HTML5+CSS3 炫 酷 应 用 实例 集锦 


208-2 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 




















图 208-1 


<!doctype html >< html >< head><meta charset = "UTF - 8"> 
< script src= "js/jquery -3.1.1.min. js"></script >< script type = "text/javascript"> 
$ (function() { 
$$(" 提 myBtn1").click(function() {// 使 用 青色 光源 照射 图 像 
$ ("svg defs filter feSpecularLighting").attr("lighting - color", "cyan”"); 
$("g").attr("filter", "url(#myFilter)"); 
DD); 
$(" 提 myBtn2").click(function() {// 使 用 黄色 光源 照射 图 像 
$ ("svg defs filter feSpecularLighting").attr("lighting - color", "yellow"); 
$("g").attr("filter", "url(#myFilter)"); 
D2; 1); 
</script > 
< style type = "text/css"> 
svg { margin— top: 20px; position: absolute; left: calc(50% — 200px); } 
div { margin— top: 2px; margin— left: 2px;} 
button { width: 195px;} 
</style></head> 
<body><div align = "center"> 
<button id= "myBtn1"> 使 用 青色 光源 照射 图 像 </button> 
<button id= "myBtn2"> 使 用 黄色 光源 照射 图 像 </button></div> 
<div><svg width= "400" height = "250">< defs>< filter id = "myFilter"> 
< feSpecularLighting in = "SourceAlpha" surfaceScale ="5" specularConstant = "0.75" 
specularExponent = "20" lighting— color = "Yellow"> 
< fePointLight x="— 5000" y="— 10000" z="20000"/> 
</feSpecularLighting ></filter ></defs> 
<g><image id= "myImage" x="0" y= "0" width = "400px" height = "250px" xlink:href = "img/A195. png"> 
</inage ></g></svg></div></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,feSpecularLighting 滤 镜 的 主要 作用 
是 采用 标准 的 Phong 照明 模型 (Phong lighting model) 使 图 像 根据 光 源 产生 凹凸 的 立体 特效 ,在 这 种 
情况 下 feSpecularLighting 滤 镜 通常 与 feGaussianBlur 滤 镜 组 合 在 一 起 使 用 .此 实例 采用 独立 的 
feSpecularLighting 滤 镜 照射 图 像 , 从 而 使 图 像 产 生 了 版 画 轮廓 的 效果 。 

此 实例 的 源 文件 名 是 myHtmlA232. html。 








第 2 部 分 > 


209 使 用 SVG 滤 镜 加 粗 或 细 化 图 形 的 轮廓 


此 实例 主要 在 SVG 中 设置 ftMorphology 滤 镜 的 operator 属性 值 , 从 而 实现 对 图 形 图 像 的 轮廓 
进行 加 粗 或 细 化 特效 的 处 理 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 将 显示 原始 的 蜂 蛛 图 形 ， 
单 击 " 对 图 形 的 轮廓 进行 细 化 处 理 ” 按 钮 , 则 图 形 轮 廓 经 过 feMorphology 滤 镜 细 化 处 理 之 后 的 效果 如 
图 209-1 所 示 ; 单 击 “对 图 形 的 轮廓 进行 加 粗 处 理 ” 按 钮 , 则 图 形 轮 廓 经 过 feMorphology 滤 镜 加 粗 处 
理 之 后 的 效果 如 图 209-2 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 

百 - oo x | - 

DmyemlA2a5html x myremlA235 heml Xx 
© Dfiley///D/myWork/myHtmlA235. 窜 © Dfile///D/myWork/myHtmlA235. 字 三 
| 对 图 彩 的 枪 因 进行 稻 化 处 理 对 图 形 的 轮 有 已 进行 加 朝 处 理 | 对 图 形 的 轮 革 进行 和 化 处 理 对 图 形 的 轮 导 进行 加 相处 理 | 














图 209-1 


<! doctype html >< html >< head >< meta charset = "UTF - 8"> 
< script src= "js/jquery - 3.1.1.min. js"></script >< script type = "text/javascript"> 
$ (function() { 
$("#myBtn1").click(function() {// 对 图 形 的 轮廓 进行 细 化 处 理 
$("g").attr("filter", "url(#myErode)"); 
1D); 
$ ("#myBtn2").click(function() {// 对 图 形 的 轮廓 进行 加 粗 处 理 
$("g").attr("filter", "url(#myDilate)"); 
D2; 1); 
</script> 
<style type = "text/css"> 
svg { margin - top: 20px; position: absolute;left: calc(50% — 200px);} 
div { margin— top: 2px; margin - left: 2px;} 
button { width: 195px;} 
</style></head> 
<body>< div align = "center"> 
<button id= "myBtn1"> 对 图 形 的 轮廓 进行 细 化 处 理 </button> 
<button id= "myBtn2"> 对 图 形 的 轮廓 进行 加 粗 处 理 </button></div> 
<div><svg width= "400" height = "275"> 
<defs> 
<filter id= "myErode"> feMorphology operator = "erode" in = "SourceGraphic" radius = "3.95" /></filter> 
< filter id = "myDilate"> < feMorphology operator = "dilate" in = " SourceGraphic" radius = "3.9" /> 
</filter ></defs> 
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<g>< image xlink:href = "img/A236. png” id = "MyImage" x="0" y="0" width="400" height = "250" /> 
</g></svg></div> 
</body ></html > 





上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 .feMorphology 滤 镜 用 于 对 源 图 形 执 
行 fattening( 增 肥 ) 或 者 thinning( 瘦 身 ), 当 设置 feMorphology 滤 镜 的 operator 属性 值 为 erode 时 该 
滤 镜 产生 的 是 瘦身 特效 , 当 设 置 feMorphology 滤 镜 的 operator 属性 值 为 dilate 时 该 滤 镜 产生 的 是 增 
肥 特效 ,瘦身 和 增 肥 特效 的 数值 由 feMorphology 滤 镜 的 radius 属性 值 确定 。 除 了 图 形 图 像 的 边框 之 
外 ,此 滤 镜 对 图 形 图 像 中 的 轮廓 也 有 较 强 的 处 理 功能 。 

此 实例 的 源 文件 名 是 myHtmlA235. html。 


210 使 用 SVG 的 feTile 滤 镜 对 图 像 进行 平 铺 
此 实例 主要 通过 使 用 SVG 的 feTile 滤 镜 实现 在 矩形 中 平 铺 图 像 。 当 在 Google Chrome 浏览 器 


中 显示 该 页 面 时 将 显示 原始 的 图 像 , 单 击 “ 显 示 平 铺 的 图 像 ” 按 钮 , 则 图 像 在 矩形 中 的 平 铺 效 果 如 
图 210-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 








盏 -oo x 


DD myHtmlA236 html 站 
C Dfile///D/myWork/myHtmlA236. 疗 三 
| 蜡 示 原始 的 图 像 显示 平 请 的 图 像 


aN GNA 
NN NA 
NNN 


图 210-1 














<!doctype html >< html >< head >< meta charset = "UTF — 8"> 
<script src= "js/jquery — 3.1.1.min. js"></script >< script type = "text/javascript"> 
$ (function() { 
$ ("#myBtnl").click(function() {// 显 示 原 始 的 图 像 
$ ("use"). hide(); $ ("image"). show(); 
]) 
$("#myBtn2"). click(function() {// 显 示 平 铺 的 图 像 
$ ("use"). show(); $ ("image").hide(); 
DD); 
$ ("#myBtn1").click(); 
D; 
</script> 





< style type = "text/css"> 


第 2 部 分 “图像 > 


svg { margin - top: 20px; position: absolute; left: calc(50% - 200px); } 


div { margin— top: 2px; margin- left: 2px;} 
button { width: 195px;} 
</style></head> 
<body>< div align = "center"> 
<button id= "myBtn1"> 显 示 原 始 的 图 像 </button> 
<button id= "myBtn2"> 显 示 平 铺 的 图 像 </button ></div> 
<div><svg width= "400" height = "300">< defs> 


<filter id= "MyFilter" filterUnits = "userSpaceOnUse" x= "0"yY= "0" width= "100%" height = "300"> 

<feImagex= "0" y= "0" width= "100" height = "100" xlink:href = "img/A236. png" result = 'pict1'/><feTile 
x="0" y= "0" width= "100% "height = "300" in= "pictl"/></filter></defs> 

<g><use filter= "url(#MyFilter)" x='0' y='0'/>< image xlink:href = "img/A236. png" id = "MyImagen" 


x= "0" y= "0" width= "100" height ="100" /></g></svg></div> 


</body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,feTile 滤 镜 用 于 将 图 像 的 多 个 副本 平 
铺 在 指定 的 矩形 范围 内 。 当 使 用 feTile 滤 镜 平 铺 图 像 时 通常 需要 指定 in 属性 值 代 表 的 图 像 ,指定 
width 和 height 属性 值 代表 的 矩形 范围 ,指定 x 和 y 属性 值 代表 的 矩形 左上 角 坐 标 。 


此 实例 的 源 文 件 名 是 myHtmlA236. html。 


211 在 SVG 滤 镜 中 使 用 不 同 的 光源 照射 图 像 


此 实例 主要 在 SVG 中 使 用 feGaussianBlur、feSpecularLighting 等 滤 镜 ,并 在 feSpecularLighting 
滤 镜 中 使 用 不 同 颜色 的 光源 ,从 而 使 图 像 显示 不 同 的 凹凸 Phong 立体 特效 。 当 在 Google Chrome 浏 
览 器 中 显示 该 页 面 时 , 单 击 * 使 用 青色 光源 照射 图 像 " 按 钮 ,. 则 图 像 产生 的 凹凸 Phong 立体 特效 如 
图 211-1 所 示 ; 单 击 “ 使 用 黄色 光源 照射 图 像 " 按 钮 , 则 图 像 产生 的 凹凸 Phong 立体 特效 如 图 211-2 所 


示 。 有 关 此 实例 的 主要 代码 如 下 。 














西 - Do x 西 - Do x 
D myHtmlA231.html x 证 DD myHemlA231html x \ ee 
S$ 3 CC Dfie///D/myWork/myHtmlA231.4 字 三 3 CC Dfiley//D/myWork/myHtmlA231.4 窑 三 
[使 用 青色 光源 照射 图像 ”| | 使 用 黄色 光源 照射 图 像 | 使 用 青色 光源 照射 图 铺 。 “| 使 用 商 色 光源 照射 图 像 | 











图 211-1 


<!doctype html >< html >< head ><meta charset = "UTF — 8"> 





图 211-2 


< script src= "js/jquery - 3.1.1.min. js"></script>< script type = "text/javascript"> 
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$ (function() { 
$(" 间 myBtn1").click(function() {// 使 用 青色 光源 照射 图 像 
$ ("svg defs filter feSpecularLighting").attr("lighting - color", "cyan"); 
D); 
$ ("站 myBtn2").click(function() {// 使 用 黄色 光源 照射 图 像 
$ ("svg defs filter feSpecularLighting").attr("lighting — color", "yellow"); 
D; 1D); 
</script> 
<style type= "text/css"> 
svg { margin - top: 20px;position: absolute; left: calc(50% — 200px); } 
div { margin— top: 2px;margin — left: 2px;} 
button{ width:195px;} 
</style></head> 
<body>< div align = "center"> 
<button id= "myBtn1"> 使 用 青色 光源 照射 图 像 </button> 
<button id= "myBtn2"> 使 用 黄色 光源 照射 图 像 </button></div> 
<div><svg width= "400" height = "250">< defs>< filter id = "myFilter" > 
< feGaussianBlur in = "SourceAlpha" stdDeviation = "4" result = "blur"/> 
<feOffset in = "blur" dx= "4" dy="4" result = "offsetBlur"/> 
< feSpecularLighting in = "blur" surfaceScale = "5" specularConstant = "0.75" 
specularExponent = "20" lighting - color = "Yellow”result = "specOut"> 
< fePointLight x= "~ 5000" y= " ~ 10000" z = "20000"/></feSpecularLighting> 
< feComposite in = "specOut"” in2= "SourceAlpha" operator = "atop" result = "specOut"/> 
< feComposite in = "SourceGraphic" in2 = "specOut" operator = "arithnetic" kl = "0" k2="1" k3="1" 
k4="0" result ="litPaint"/></filter ></defs> 
<g filter = "url(#myFilter)">< image id = "myImage" x="0" y="0" width = "400px" height = "250px" 
xlink:href = "img/A195. png"></ image > </g> 
</svg></div> 
</body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,feSpecularLighting 滤 镜 遵循 标准 的 
Phong 照明 模型 (Phong lighting model) ,使 图 像 根 据 光源 产生 凹凸 的 立体 特效 。feSpecularLighting 
滤 镜 通常 与 feGaussianBlur 滤 镜 组 合 在 一 起 实现 这 种 特效 ,feGaussianBlur 滤 镜 产生 的 结果 作为 
feSpecularLighting 滤 镜 的 输入 。< fePointLight > 标签 内 嵌 于 < feSpecularLighting > 标签 中 ,用 于 设 
置 光源 的 位 置 , 对 最 终 的 结果 影响 也 较 大 。 

此 实例 的 源 文件 名 是 myHtmlA231. html。 


212 在 SVG 中 合并 使 用 滤 镜 创建 的 多 个 图 层 


此 实例 主要 通过 使 用 SVG 的 feMerge 滤 镜 实现 对 滤 镜 创建 的 多 个 图 层 进 行 合 并 。 当 在 Google 
Chrome 浏览 器 中 显示 该 页 面 时 , 单 击 * 显 示 原 始 的 文字 ?按钮 ,将 显示 原始 的 文字 ; 单 击 “ 显 示 图 层 合 
并 的 文字 ?按钮 ,将 把 多 个 滤 镜 创建 的 图 层 合并 在 一 起 ,效果 如 图 212-1 所 示 。 有 关 此 实例 的 主要 代码 
如 下 。 





<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<script src= "js/jquery - 3.1.1.min. js"></script >< script type = "text/javascript"> 
$ (function() { 
$("#myBtn1").click(function() {// 显 示 原 始 的 文字 
$ ("#myView").attr("filter", ""); 
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Ds; 
$ ("myBtn2").click(function() {// 显 示 图 层 合并 的 文字 
$ ("#myView").attr("filter", "url(#MyFilter)"); 
]) 
</script> 
<style type= "text/css"> 
svg { margin - top: 10px; position: absolute; left: calc(50% ~ 200px);} 
button { width: 190px;} 
</style></head> 
<body><div align = "center"> 
<button id= "myBtnl"> 显 示 原 始 的 文字 </button > 
<button id= "myBtn2"> 显 示 图 层 合 并 的 文字 </button></div> 
<svg width= "100%" height= "100% ">< defs> 
<filter id= "MyFilter" filterUnits= "userSpaceOnUse"> 
< feGaussianBlur in = "SourceAlpha" stdDeviation = "4" result = "blur"/> 
< feOffset in="blur" dx= "4" dy="4" result = "offsetBlur"/> 
< feSpecularLighting in= "blur" surfaceScale = "5" specularConstant = "0.75" 
specularExponent = "20" lighting— color = "#BBBBBB" result = "specOut"> 
< fePointLight x=" ~- 5000" y="— 10000" z ="20000"/></feSpecularLighting> 
< feComposite in = "specOut" in2= "SourceAlpha" operator = "in" result = "specOut"/> 
< feComposite in = "SourceGraphic" in2 = "specOQut" operator = "arithmetic" kl = "0" k2 = "1" k3="1" k4= 
"0" result = "litPaint"/> 
< feMerge >< feMergeNode in= "offsetBlur"/><feMergeNode in= "litPaint"/></feMerge> 
</filter ></defs> 
<g id= "myView" filter = "url(#MyFilter)"> 
<path fill = "none" stroke="#D90000" stroke— width= "10" d= "M50,190 C0, 190 0, 30 50,30 L350,30 
C400,30 400,190 350,190 z" /> 
<path fill="#D90000" d= "M60,180 C13, 180 13,40 60,40 L340,40 C390, 40 385, 180 340, 180 z" /> 
<g fill="#FFFFFF" stroke= "black" font ~ size="50" font ~ family= "Verdana" ><text x="52" y= 
"126" > 炫 酷 实例 集锦 </text ></g></g></svg></body></html> 








上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,feMerge 滤 镜 用 于 合并 图 层 , 图 层 在 
<feMerge > 标签 的 子 结 点 < feMergeNode > 中 。 实 例 的 图 层 合并 过 程 如 下 。 

(1) feGaussianBlur 接收 输入 的 SourceAlpha, 这 是 源 图 形 的 alpha 通道 ,结果 被 存储 在 名 为 blur 
的 临时 缓冲 区 中 。 
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(2) feOffset 接收 缓冲 区 blur, 并 以 4 个 像素 为 单位 在 正 的 X 和 YY 方向 中 转换 结果 ,然后 创建 一 
个 名 为 offsetBlur 的 新 缓冲 区 ,此 缓冲 区 稍 后 将 被 用 于 创建 投影 效果 

(3) feSpecularLighting 使 用 缓冲 区 blur 作为 表面 提升 的 模型 并 生成 来 自 单个 点 光源 的 光照 效 
果 , 结 果 存储 在 缓冲 区 specOut 中 。 

(4) feComposite 使 用 原始 的 源 图 形 的 alpha 通道 来 遮盖 步骤 (3) 的 结果 ,以 便 使 中 间 结 果 不 会 大 
于 原始 的 源 图 形 。 缓 冲 区 specOut 被 再 次 用 于 存储 结果 。 

(5) feComposite 将 反射 光 效 果 与 原始 的 源 图 形 结合 在 一 起 .结果 被 存放 到 缓冲 区 litPaint 中 。 

(6) feMerge 将 两 个 图 层 结合 在 一 起 。 下 面 的 图 层 由 步骤 (2) 的 投影 效果 构成 ,上 面 的 图 层 由 步 
又 (5) 的 反射 光 效 果 构 成 。 

此 实例 的 源 文件 名 是 myHtmlA215. html。 


213 使 用 SVG 的 feTurbulence 滤 镜 创建 图 像 


此 实例 主要 通过 使 用 SVG 的 feTurbulence 滤 镜 实现 根据 噪声 创建 图 像 。 当 在 Google Chrome 
浏览 器 中 显示 该 页 面 时 , 单 击 " 显 示 低 噪声 的 图 像 ”按钮 , 则 使 用 feTurbulence 滤 镜 创建 的 低 噪声 图 像 
的 效果 如 图 213-1 所 示 ; 单 击 * 显 示 高 噪声 的 图 像 "按钮 , 则 使 用 feTurbulence 滤 镜 创建 的 高 噪声 图 像 
的 效果 如 图 213-2 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 213-1 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<script src= "js/jquery -3.1.1.min.js"></script >< script type= "text/javascript"> 
$ (function() { 
$ ("myBtn1").click(function() {// 显 示 低 噪声 的 图 像 
$ ("svg defs filter feTurbulence").attr("numOctaves"”, "1"); }); 
$ ("myBtn2").click(function() {// 显 示 高 噪声 的 图 像 
$ ("svg defs filter feTurbulence" ).attr("numOctaves"，"30"); });}); 
</script > 
<style type= "text/css"> 
svg {fmargin - top: 20px;position: absolute; left: calc(50 % ~ 200px);} 
div {margin— top: 2px;margin— left: 2px;} 
button { width: 195px;} 
</style></head> 
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<body>< div align = "center">< button id= "myBtn1"> 显 示 低 噪声 的 图 像 </button> 
<button id= "myBtn2"> 显 示 高 噪声 的 图 像 </button ></div> 
<div><svg width= "400" height = "250">< defs > 
<filter id= "MYFilter”filterUnits = "userSpaceOnUse" x= "0"yY="0" width= "400" height = "250"> 
<feTurbulence baseFrequency= "0. 01" numOctaves = "1"/></filter></defs> 
<g>< image id= "myImage" x= "0"Y= "0” width= "400px”height = "250px" xlink:href = "img/A124. jpg" 
filter= "url( 井 MYFilter)"></image></g></svg></div></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,feTurbulence 滤 镜 基于 柏林 扰动 函 
数 (Perlin turbulence function) 创建 图 像 ,通过 设置 feTurbulence 滤 镜 的 type、 baseFrequency、 
numOctaves 等 属性 值 就 可 以 使 图 像 实 现 不 同 的 效果 。 例 如 , 当 设置 type 属性 值 为 fractalNoise 时 
(< feTurbulence type 王 "fractalNoise" baseFrequency 王 "0. 01"”numOctaves 王 "1"/>) ,创建 的 图 像 就 
比较 模糊 ; 当 设 置 type 属性 值 为 turbulence 时 (< feTurbulence type 王 "turbulence”baseFrequency 一 
"0.01"numOctaves 王 "1"/>) ,创建 的 图 像 就 比较 细腻 。type 属性 的 默认 值 为 turbulence。 

此 实例 的 源 文件 名 是 myHtmlA237. html。 


214 在 一 个 元 素 中 设置 线性 渐变 背景 颜色 


此 实例 主要 通过 在 CSS 样式 中 设置 元 素 的 background 属性 为 linear-gradient 使 元 素 (div) 的 背 
景 呈现 线性 渐变 的 颜色 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,由 蓝 向 绿 渐变 的 背景 效果 如 
图 214-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 214-1 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<style> 
div {background: — webkit — linear - gradient(left, blue, green); 
width:400px; height : 250px;} /* 沿 着 水 平方 向 从 左 至 右 由 蓝 到 绿 渐变 * / 
</style> 
<body>< div></div></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,background 属性 用 于 一 次 性 设置 所 
有 与 背景 相关 的 属性 ,可 以 在 此 属性 中 设置 background-attachment、 background-position .background- 


color、 background-size、 background-repeat、 background-origin、 background-clip、 background-image 
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等 ,如 果 不 设置 其 中 的 某 个 值 , 也 不 会 出 问题 ,这 些 值 的 意义 如 表 214-1 所 示 。 
表 214-1 在 background 属性 中 可 以 设置 的 值 








值 描 述 
background-color 规定 要 使 用 的 背景 颜色 
background-position 规定 背景 图 像 的 位 置 
background-size 规定 背景 图 像 的 尺寸 
background-repeat 规定 如 何 重复 背景 图 像 
background-origin 规定 背景 图 像 的 定位 区 域 
background-clip 规定 背景 的 绘制 区 域 
background-attachment 规定 背景 图 像 是 否 周 定 或 者 随 着 页 面 的 其 余部 分 滚动 
background-image 规定 要 使 用 的 背景 图 像 
inherit 规定 应 该 从 父 元 素 继承 background 属性 的 设置 


渐变 (gradient) 是 在 两 个 或 多 个 指定 的 颜色 之 间 显 示 平 稳 的 过 渡 , 渐 变 的 元 素 在 放大 时 看 起 来 效 
果 更 好 ,因为 渐变 是 由 浏览 器 生成 的 。linear-gradient 的 语法 格式 如 下 。 


linear - gradient(direction，color- stopl, color— stop2，… ); 


其 中 ,direction 默认 为 to bottom, 即 从 上 向 下 的 渐变 ; stop 表示 颜色 的 分 布 位 置 ,默认 均匀 分 布 ， 
如 果 有 3 个 颜色 , 则 各 个 颜色 的 stop 均 为 33. 33%。 
此 实例 的 源 文件 名 是 myHtmlB056. html。 


215 ”在 一 个 元 素 中 和 登 加 显示 多 个 背景 图 像 


此 实例 主要 通过 在 CSS 样式 中 设置 元 素 的 background-image,background-position .background- 
repeat 等 属性 值 实现 在 一 个 元 素 (div) 中 县 加 显示 多 个 背景 图 像 。 当 在 Google Chrome 浏览 器 中 显示 
该 页 面 时 ,最 底层 的 背景 图 像 不 重复 显示 ,中 间 层 的 背景 图 像 纵 向 重复 显示 ,最 上 层 的 背景 图 像 横向 
重复 显示 ,如 图 215-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 215-1 


<!doctype html >< html >< head ><meta charset = "UTF — 8"> 
<style> 
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div{ background - image: url (img/BO55A. png), url ( img/B055B. png), url (img/a048. jpg); background — 
repeat: repeat - x, repeat - y, no - repeat; background - position: center, center, center;width: 400px; 
height:250px;} 

</style> 
<body><div></div></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,background-image 属性 用 于 为 元 素 
设置 背景 图 像 ,元 素 的 背景 占据 了 元 素 的 全 部 尺寸 ,包括 内 边 距 和 边框 ,但 不 包括 外 边 距 ; 
background-repeat 属性 用 于 定义 图 像 的 平 铺 模 式 ; background-position 属性 用 于 设置 背景 图 像 的 起 
始 位 置 ,这 个 属性 设置 背景 原 图 像 ( 由 background-image 定义 ) 的 位 置 ,背景 图 像 如 果 要 重复 ,将 从 这 
一 点 开始 。background-position 属性 的 取 值 和 说 明 如 表 215-1 所 示 。 


表 215-1 ”background-position 属性 的 取 值 和 说 明 
值 说 明 
top left top center top right ,center left、 如 果 仅 规定 了 一 个 关键 字 , 那 么 第 二 个 值 将 是 center, 默认 值 是 


center center, center right、bottom left、 0% 0% 





bottom center ,bottom right 








x% y% 第 一 个 值 是 水 平 位 置 ,第 二 个 值 是 垂直 位 置 ; 左上 角 是 0% 0%, 右 下 
角 是 100% 100%; 如 果 仅 规定 了 一 个 值 , 另 一 个 值 将 是 50% 
xpos ypos 第 一 个 值 是 水 平 位 置 ,第 二 个 值 是 垂直 位 置 ; 左上 角 是 0 0, 单 位 是 像 


素 (0px 0px) 或 任何 其 他 的 CSS 单位 ; 如 果 仅 规定 了 一 个 值 , 另 一 个 值 
将 是 50%% ,可 以 混合 使 用 % 和 position 值 


此 实例 的 源 文件 名 是 myHtmlB055. html。 
216 ”在 一 个 元 素 中 平 铺 显 示 多 个 背景 图 像 
此 实例 主要 在 元 素 的 background-image 属性 中 使 用 逗号 设置 多 个 url, 从 而 实现 多 个 不 同 的 背景 


图 像 同 时 平 铺 显 示 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 将 在 垂直 方向 上 显示 3 幅 不 同 的 背 
景 图 像 , 如 图 216-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
< style type= "text/css"> 
div { width: 450px; height:390px; 
background: url ( img/B125A. jpg) no - repeat top right, url( img/B125B. jpg) repeat — x 0px 130px, 
url( img/B125C. jpg) repeat - x bottom; } 
</style></head> 
<body>< div></div></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 .background 属性 可 以 设置 与 元 素 背 
景 相关 的 所 有 属性 , 例如 background-size、background-repeat、background-color、background- 
position,background-origin, background-clip, background-attachment ,background-image。 当 需要 在 
元 素 里 应 用 多 个 背景 图 像 时 ,引用 图 像 之 间 需 要 用 逗号 *." 隔 开 。 

此 实例 的 源 文 件 名 是 myHtmlB125. html。 


217 ”在 元 素 中 同时 设置 背景 图 像 和 背景 闫 色 


此 实例 主要 在 background 属性 中 同时 设置 background-color、background-image 和 background- 
repeat 等 属性 值 ,从 而 实现 在 元 素 中 同时 显示 背景 图 像 和 背景 颜色 。 当 在 Google Chrome 浏览 器 中 
显示 该 页 面 时 ,显示 的 海 绿色 为 背景 颜色 , 星 形 花瓣 为 背景 图 像 , 如 图 217-1 所 示 。 有 关 此 实例 的 主要 
代码 如 下 。 
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<!doctype html >< html >< head >< meta charset = "UTF — 8"> 
< style type = "text/css"> 
body{ background: lightseagreen url(img/B055A. png) repeat ; 
</style></head> 
<body><p> 同 时 设置 背景 图 像 和 背景 颜色 </p></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 .background 属性 用 于 一 次 性 设置 所 
有 与 背景 相关 的 属性 .可 以 在 此 属性 中 设置 background-attachment、 background-position、 
background-color 、background-size、background-repeat、background-origin、background-clip、background- 
image 等 。 

此 实例 的 源 文 件 名 是 myHtmlB057. html。 
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218 ”在 元 素 背景 之 上 娟 加 渐变 色 的 遮 置 层 


此 实例 主要 通过 设置 元 素 的 mask 属性 实现 在 元 素 的 背景 之 上 又 加 渐变 色 的 遮 单 层 。 当 在 
Google Chrome 浏览 器 中 显示 该 页 面 时 , 单 击 “ 从 左 向 右 渐变 "按钮 , 则 背景 和 渐变 色 盖 加 的 效果 如 
图 218-1 所 示 ; 单 击 “从 右 向 左 渐变 ”按钮 , 则 背景 和 渐变 色 和 至 加 的 效果 如 图 218-2 所 示 。 有 关 此 实例 
的 主要 代码 如 下 。 
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图 218-1 图 218-2 


<! doctype html >< html >< head >< meta charset = "UTF - 8"> 
<script src= "js/jquery- 3.1.1.min. js"></script >< script language = "javascript"> 
$ (document). ready(function() { 
$("#myBtnLTR").click(function() {// 从 左 向 右 渐变 
$ ("p").css("— webkit ~ mask", "~ webkit — gradient (linear, 0% 0%, 100% 0%, from(rgba(0,0,0, 
1)), to(rgba(0,0,0,0)))"); 
Ds; 
$ ("myBtnRTL").click(function() {// 从 右 向 左 渐变 
$ ("p").css("— webkit— mask", " — webkit — gradient (linear, right top, left top, from(rgba(0,0,0, 
1)), to(rgba(0,0,0,0)))"); 
D7}); 
</script> 
<style type= "text/css"> 
p { background: url(img/B114. jpg) repeat; 
width: 405px; height:250px; border - radius: 5px; } 
input {width: 195px;border - radius: 2px; padding: 3px;margin: 2px;} 
</style></head> 
<body>< div>< input type= "button" value = "从 左 向 右 渐变 ”id = "myBtnLTR"/> 
< input type = "button" value= "从 右 向 左 渐变 " id = "myBtnRTL"/></div><p></p> 
</body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,background: url(img/B114. jpg) 
repeat 用 于 设置 元 素 的 背景 图 像 ; $ ("p"). css("-webkitrmask"，"-webkitrgradient(linear，right 
top, left top, from(rgba(0.,0.0,1)), to(Crgba(0.0.0. 0)))") 用 于 将 渐变 背景 至 加 到 背景 图 像 上 。 如 
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果 设 置 元 素 的 background: -webkit- gradient(linear, left top, right top, from(rgba(0,0,0,0. 8)), to(rgba 
(0,0,0, 0.2))), 可 以 直接 看 到 这 个 遮 日 层 实际 上 是 一 个 由 黑色 到 白色 的 渐变 图 。-webkit-gradient 
用 于 创建 渐变 遮 单 层 ,其 语法 格式 如 下 。 

webkit-gradient(type, xl Y1，x2 Y2，from( 开始 颜色 值 ),to( 结 束 颜 色 值 )，[color-stop( 偏 移 量 < 小 数 >, 停靠 颜色 

值 )，……] ); 

webkit 内 核 的 Linear Gradients (线性 渐变 ) 的 第 一 组 参数 type( 类 型 ) 为 linear。 第 二 组 参数 是 
xl yl 和 x2 y2, 即 渐变 色 的 两 个 点 的 坐标 ,x1、x2、y1、y2 的 取 值 范围 为 0% 一 100% ,xl 和 x2 可 以 取 
值 left( 或 0%) 或 right( 或 100%),yl 和 y2 可 以 取 值 top( 或 0%) 或 bottom( 或 100%), 当 xl 等 于 
x2、y1 不 等 于 y2 时 实现 垂直 渐变 ,调整 y1、y2 的 值 可 以 调整 渐变 半径 的 大 小 ; 当 yl 等 于 y2、xl 不 等 
于 x2 时 实现 水 平 渐变 ,调整 xl .x2 的 值 可 以 调整 渐变 半径 的 大 小 ; 当 yl1 不 等 于 y2 .xl 不 等 于 x2 时 
实现 角度 渐变 , 当 x1、x2、yl、y2 的 取 值 为 极 值 的 时 候 接 近 垂直 渐变 或 水 平 渐 变 ; 当 xl 等 于 x2、yl 等 
于 y2 时 没有 渐变 , 取 from 颜色 值 ; 在 实现 垂直 渐变 和 水 平 渐变 时 ,xl 和 x2 可 以 直接 取 值 left( 或 
0%) 或 right( 或 100%),yl 和 y2 可 以 直接 取 值 top( 或 0%) 或 bottom( 或 100%)。from( 开 始 颜 色 
值 ) 和 to( 结 束 颜色 值 ) 是 两 个 渐变 颜色 值 。 对 于 [color-stop( 偏 移 量 < 小 数 >, 停 靠 颜色 值 ),…], 可 以 
使 用 多 个 colorstop ,如 果 渐 变 只 有 两 个 颜色 ,那么 可 以 不 使 用 该 参数 ; 偏 移 量 必须 为 小 数 , 如 果 偏 移 
量 > 王 1 ,那么 该 color-stop 相当 于 无 效 ,此 实例 暂 不 考虑 color-stop。 

此 实例 的 源 文件 名 是 myHtmlB146. html。 


219 ”为 元 素 设置 从 中 心 向 圆周 放射 渐变 的 背景 
此 实例 主要 在 CSS 样式 中 设置 元 素 的 background 属性 为 radial-gradient ,从 而 实现 使 元 素 (div) 


的 背景 呈现 3 种 颜色 顺 次 从 中 心 向 圆周 放射 渐变 的 效果 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 
时 , 红 、 绿 、 蓝 3 色 从 中 心 向 圆周 放射 渐变 的 背景 效果 如 图 219-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 219-1 


<!doctype html ><html >< head >< meta charset = "UTF - 8"> 
<style type= "text/css"> 
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div {width: 350px; height: 350px;border - radius: 175px; 
text - align: center; display: table - cell; vertical - align: middle; 
/* 按 照 5$ .25% .50%% 的 比例 配置 3 种 颜色 的 放射 渐变 过 程 * / 
background: — webkit - radial - gradient(red 5%, green 25%, lightblue 50$% );} 
</style></head> 
<body><div></div></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,background 属性 用 于 一 次 性 设置 所 
有 与 背景 相关 的 属性 ,如 果 其 属性 值 是 radial-gradient, 则 会 呈现 中 心 放射 渐变 的 背景 。radial- 
gradient 的 语法 格式 如 下 。 


radial - gradient ([ < position >,]? [ [ < shape> ||<size> ] | < shape- size >{2},]? < color - stop > 
[, <color- stop>]+) 


各 个 参数 的 说 明 如 下 。 

(1) < position >: [ < length> | < percentage > | left | center | right ]? [ < length > | < percentage> | 
top | center | bottom ] 

其 中 ,< length > 表示 用 长 度 值 指定 径 向 渐变 圆心 的 横 坐 标 值 , 可 以 为 负 值 ; < percentage > 表示 用 
百分比 指定 径 向 渐变 圆心 的 横 坐 标 值 , 可 以 为 负 值 ; left 设置 左边 为 径 向 渐变 圆心 的 横 坐 标 值 ; 
center 设置 中 间 为 径 向 渐变 圆心 的 横 坐 标 值 ; right 设置 右边 为 径 向 渐变 圆心 的 横 坐 标 值 ; < length > 
用 长 度 值 指定 径 向 渐变 圆心 的 纵 坐 标 值 ,可 以 为 负 值 ; < percentage > 用 百分比 指定 径 向 渐变 圆心 的 
纵 坐 标 值 ,可 以 为 负 值 ; top 设置 顶部 为 径 向 渐变 圆心 的 纵 坐 标 值 ;: center 设置 中 间 为 径 向 渐变 圆心 
的 纵 坐 标 值 ;bottom 设置 底部 为 径 向 渐变 圆心 的 纵 坐标 值 。 注 意 ,同名 参数 按照 出 现 顺序 说 明 。 

(2) < shape>: circle | ellipse 

其 中 ,circle 指定 圆 形 的 径 向 渐变 ; ellipse 指定 椭圆 形 的 径 向 渐变 。 

(3) < size >: closest-side | closest-corner | farthest-side | farthest-corner | contain | cover 

其 中 ,closest-side 指定 径 向 渐变 的 半径 长 度 为 从 圆心 到 离 圆心 最 近 的 边 ; closest-corner 指定 径 
向 渐变 的 半径 长 度 为 从 圆心 到 离 圆 心 最 近 的 角 ; farthest-side 指定 径 向 渐变 的 半径 长 度 为 从 圆心 到 
离 圆 心 最 远 的 边 ; farthest-corner 指定 径 向 渐变 的 半径 长 度 为 从 圆心 到 离 圆心 最 远 的 角 ; contain 指 
定 径 向 渐变 的 半径 长 度 为 从 圆心 到 离 圆 心 最 近 的 点 ,类 同 于 closest-side; cover 指定 径 向 渐变 的 半径 
长 度 为 从 圆心 到 离 圆心 最 远 的 点 ,类 同 于 farthest-corner。 

(4) < shape-size >: < length > | < percentage > 

其 中 ,< length > 用 长 度 值 指定 径 向 渐变 的 横向 或 纵向 直径 长 度 , 并 根据 横向 和 纵向 的 直径 来 确定 
是 圆 或 椭圆 ,不 允许 为 负 值 ; < percentage > 用 百分比 指定 径 向 渐变 的 横向 或 纵向 直径 长 度 ,并 根据 横 
向 和 纵向 的 直径 来 确定 是 圆 或 椭圆 ,不 允许 为 负 值 。 

(5) < color-stop >: <color > [ <length> | <percentage > ] 

其 中 ,< color > 指定 颜色 ; < length > 用 长 度 值 指 定 起 止 色 位 置 ,不 允许 为 负 值 ; < percentage > 用 
百分比 指定 起 止 色 位 置 。 

此 实例 的 源 文 件 名 是 myHtmlB058. html。 


220 ”为 元 素 设置 重复 的 ,从 中 心 放 射 渐变 的 背景 


此 实例 主要 在 CSS 样式 中 设置 元 素 的 background 属性 为 repeating-radial- gradient, 从 而 实现 使 
元 素 (div) 的 背景 呈现 4 种 颜色 顺 次 从 中 心 向 圆周 放射 渐变 ,并 且 重 复 两 次 的 效果 。 当 在 Google 
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Chrome 浏览 器 中 显示 该 页 面 时 , 黄 、 绿 、 红 、 白 4 色 从 中 心 向 圆周 放射 渐变 ,并 且 重 复 两 次 ( 即 黄 、 绿 、 
红 、 白 、 黄 、 绿 、 红 、 白 ) 的 背景 效果 如 图 220-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 220-1 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<style type= "text/css"> 
div { width: 350px; height: 350px; border - radius: 175px; 
text - align: center; display: table - cell;vertical - align: middle; 
background: - webkit - repeating - radial - gradient(yellow, green 30px, red 50px, white 98px);} 
</style></head> 
<body><div></div></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,background 属性 用 于 一 次 性 设置 所 
有 与 背景 相关 的 属性 ,如 果 其 属性 值 是 repeating-radial-gradient, 则 会 呈现 可 重复 任意 次 数 的 中 心 放 
射 渐变 背景 。repeating-radial-gradient 的 语法 格式 如 下 。 

repeating ~ radial - gradient([ <position>,]? [ [<shape> || <size> ] | < shape - size >{2}, ]? <color— 

stop>[, <color— stop>] +) 

各 个 参数 的 说 明 如 下 。 
(1) < position >: [ <length> | < percentage > | left | center | right ]? [ < length > | < percentage> | 
top | center | bottom J] 
其 中 ,< length > 表示 用 长 度 值 指定 径 向 渐变 圆心 的 横 坐 标 值 ,可 以 为 负 值 ; < percentage > 表示 用 
百分比 指定 径 向 渐变 圆心 的 横 坐 标 值 ,可 以 为 负 值 ; left 用 于 设置 左边 为 径 向 渐变 圆心 的 横 坐 标 值 ; 
center 用 于 设置 中 间 为 径 向 渐变 圆心 的 横 坐 标 值 ; right 用 于 设置 右边 为 径 向 渐变 圆心 的 横 坐 标 值 ; 
< length > 表示 用 长 度 值 指 定 径 向 渐变 圆心 的 纵 坐标 值 ,可 以 为 负 值 ; < percentage > 表示 用 百分比 指 
定 径 向 渐变 圆心 的 纵 坐标 值 ,可 以 为 负 值 ; top 用 于 设置 顶部 为 径 向 渐变 圆心 的 纵 坐标 值 ; center 用 
于 设置 中 间 为 径 向 渐变 圆心 的 纵 坐 标 值 ; bottom 用 于 设置 底部 为 径 向 渐变 圆心 的 纵 坐 标 值 。 注 意 ， 
同名 参数 按照 出 现 顺序 说 明 。 

人 SG | -allipae 
其 中 ,circle 指定 圆 形 的 径 向 渐变 ; ellipse 指定 椭圆 形 的 径 向 渐变 。 
































第 2 部 分 5 


(3) < size >: closest-side | closest-corner | farthest-side | farthest-corner | contain | cover 
其 中 ,closest-side 指定 径 向 渐变 的 半径 长 度 为 从 圆心 到 离 圆 心 最 近 的 边 ; closest-corner 指定 径 
向 渐变 的 半径 长 度 为 从 圆心 到 离 圆心 最 近 的 角 ; farthest-side 指定 径 向 渐变 的 半径 长 度 为 从 圆心 到 
离 圆 心 最 远 的 边 ; farthestrcorner 指定 径 向 渐变 的 半径 长 度 为 从 圆心 到 离 圆心 最 远 的 角 ; contain 指 
定 径 向 渐变 的 半径 长 度 为 从 圆心 到 离 圆心 最 近 的 点 ,类 同 于 closest-side; cover 指定 径 向 渐变 的 半径 
长 度 为 从 圆心 到 离 圆 心 最 远 的 点 ,类 同 于 farthest-corner。 

(4) < shape-size >: <length > | < percentage> 

其 中 ,< percentage > 表示 用 百分比 指定 径 向 渐变 的 横向 或 纵向 直径 长 度 , 并 根据 横向 和 纵向 的 直 
径 来 确定 是 圆 或 椭圆 ,不 允许 为 负 值 ; < length > 表示 用 长 度 值 指定 径 向 渐变 的 横向 或 纵向 直径 长 度 ， 
并 根据 横向 和 纵向 的 直径 来 确定 是 圆 或 椭圆 ,不 允许 为 负 值 。 

(5) <color-stop >=<color>[ <length> | <percentage> ] 

其 中 ,< color > 指定 颜色 ; < length > 表示 用 长 度 值 指定 起 止 色 位 置 , 不 允许 为 负 值 ; < percentage> 表 
示 用 百分比 指定 起 止 色 位 置 。 

此 实例 的 源 文件 名 是 myHtmlB059. html。 


221 以 左上 角 为 中 心 设置 放射 渐变 背景 


此 实例 主要 在 CSS 样式 中 设置 元 素 的 background 属性 为 radial-gradient, 从 而 使 元 素 (div) 的 背 
景 呈 现 3 种 颜色 顺 次 以 左上 角 为 中 心 向 四 周 放射 渐变 的 效果 。 当 在 Google Chrome 浏览 器 中 显示 该 
页 面 时 , 红 、 黄 、 白 3 色 以 左上 角 为 中 心 向 四 周 放 射 渐变 的 效果 如 图 221-1 所 示 。 有 关 此 实例 的 主要 代 
码 如 下 。 
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图 221-1 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
< style > 
div {display: inline- block;width: 200px;height: 218px;margin: 10px; 
background — color: #FFF;border: lpx solid # EEE; position: relative; 
box - shadow: 5px 5px 5px 1px #999,0 0 40px rgba(0, 0, 0, 0.06) inset; 
border — radius: 5px; 
background: radial - gradient(at top left, red 0% ,yellow 50% ,white 100%);} 
div:first- letter {font - size: 24px; /* 设置 首 字样 式 */ 
background - color: white; border - radius: 5px;box— shadow: Opx 0px 10px 5px gray;} 
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Pp { padding - left: 15px; padding - right: 10px; font— size: 14px;} 

body { background - color: lightgray;} 
</style></head> 
<body><div><p> 徐 海 东 (1900 年 6 月 17 日 -1970 年 3 月 25 日 ), 原 名 元 清 ,湖北 省 大 悟 县 新 城镇 ( 原 黄陂 县 
溉 源 乡 会 夏 店 里 滚石 岭 会 ) 人 。 中 国共 产 党 的 优秀 党 员 , 我 军 卓 越 的 军事 家 , 久 经 考验 的 无 产 阶级 忠诚 战士 ,中 
国 工农 红军 及 中 国人 民 解 放 军 主要 领导 人 之 一 ,军事 家 、 中 国人 民 解 放 军 大 将 。</p></div> 
<div><p> 徐 海 东 (1900 年 6 月 17 日 -1970 年 3 月 25 日 ), 原 名 元 清 ,湖北 省 大 悟 县 新 城镇 ( 原 黄陂 县 溉 源 乡 会 
夏 店 里 滚石 岭 会 ) 人 。 中 国共 产 党 的 优秀 党 员 , 我 军 卓越 的 军事 家 , 久 经 考验 的 无 产 阶级 忠诚 战士 ,中国 工 农 红 
军 及 中 国人 民 解 放 军 主要 领导 人 之 一 ,军事 家 、 中 国人 民 解 放 军 大 将 。</p> 
</div></body ></html > 





上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,background 属性 用 于 一 次 性 设置 所 
有 与 背景 相关 的 属性 ,如 果 其 属性 值 是 radial-gradient, 则 将 呈现 中 心 放射 渐变 的 背景 。radial- 
gradient 的 语法 格式 如 下 。 

radial - gradient ([ < position >,]? [ [ < shape> ||<size> ] | < shape- size >{2},]? < color - stop > 

[, <color- stop>]+) 

在 此 实例 中 ,radial-gradient(at top left, red 0% ,yellow 50% ,white 100%) 中 的 at top left 表示 
放射 中 心 是 左上 角 , 以 中 心 为 起 点 ,按照 所 示 比 例 渐变 的 颜色 依次 是 red、yellow、white。 

此 实例 的 源 文件 名 是 myHtmlB061. html。 


222 ”以 左下 角 为 中 心 设置 放射 渐变 背景 


此 实例 主要 在 CSS 样式 中 设置 元 素 的 background 属性 为 repeating-radial- gradient, 从 而 实现 使 
元 素 (div) 的 背景 呈现 4 种 颜色 顺 次 以 左下 角 为 中 心 向 四 周 放射 渐变 、 重 复数 次 的 效果 。 当 在 Google 
Chrome 浏览 器 中 显示 该 页 面 时 ,yellow ,lightblue lightgreen lightcyan 几 色 以 左下 角 为 中 心 向 四 周 
重复 放射 渐变 的 效果 如 图 222-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 222-1 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<style> 
div {display: inline- block; width: 200px; height: 218px;border: lpx solid # EEE; 
margin: 10px; background - color: #FFF; position: relative; border 一 radius: Spx; 





第 2 部 分 图 像 
box - shadow: 5px 5px 5px 1px #999,0 0 40px rgba(0, 0, 0, 0.06) inset; 


background: repeating - radial - gradient (at bottom left, yellow, lightblue 2%, lightgreen 3%, 
lightcyan 15% );} 
div:first 一 letter {/ x 设置 首 字样 式 x/ 
font - size: 24px; background — color: white; 
border - radius: 5px;box - shadow: Opx 0px 10px 5px gray;} 
P{ padding - left: 15px; padding - right: 10px; font ~ size: 14px;} 
body {background - color: lightgray;} 
</style></head> 
<body><div><p> 徐 海 东 (1900 年 6 月 17 日 -1970 年 3 月 25 日 ), 原 名 元 清 ,湖北 省 大 情 县 新 城镇 ( 原 黄陂 县 
流 源 乡 会 夏 店 里 滚石 岭 会 )} 人 。 中 国共 产 党 的 优秀 党 员 , 我 军 卓 越 的 军事 家 , 久 经 考验 的 无 产 阶级 忠诚 战士 ,中 
国 工农 红军 及 中 国人 民 解 放 军 主要 领导 人 之 一 ,军事 家 、 中 国人 民 解 放 军 大 将 。</p></div> 
<div><p> 徐 海 东 (1900 年 6 月 17 日 -1970 年 3 月 25 日 ), 原 名 元 清 ,湖北 省 大 情 县 新 城镇 ( 原 黄 陂 县 溉 源 乡 会 
夏 店 里 滚石 岭 会 ) 人 。 中 国共 产 党 的 优秀 党 员 , 我 军 卓 越 的 军事 家 , 久 经 考验 的 无 产 阶级 忠诚 战士 , 中 国 工农 红 
军 及 中 国人 民 解 放 军 主要 领导 人 之 一 ,军事 家 .中 国人 民 解 放 军 大 将 。</p> 
</div></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,background 属性 用 于 一 次 性 设置 所 
有 与 背景 相关 的 属性 ,如 果 其 属性 值 是 repeating-radial-gradient, 将 呈现 可 重复 任意 次 数 的 中 心 放 射 
渐变 背景 。repeating-radial-gradient 的 语法 格式 如 下 。 

repeating - radial - gradient([ < position>,]? [ [<shape> || <size> ] | < shape - size >{2},]? <color— 

stop>[, <color- stop>] +) 

在 此 实例 中 ,repeating-radial-gradient (at bottom left, yellow, lightblue 2%, lightgreen 3%, 
lightcyan 15%) 中 的 at bottom left 表示 放射 中 心 是 左下 角 ,以 中 心 为 起 点 ,按照 所 示 比 例 渐变 的 颜色 
依次 是 yellow \lightblue ,lightgreen ,lightcyan 。 

此 实例 的 源 文 件 名 是 myHtmlB060. html。 


223 ”为 元 素 设置 重复 的 线性 渐变 背景 


此 实例 主要 在 CSS 样式 中 设置 元 素 的 background 属性 为 repeating-linear-gradient, 从 而 使 元 素 
(Cdiv) 的 背景 呈现 多 次 重复 的 线性 渐变 颜色 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,元 素 背 景 
将 按照 white lightgreen \lightseagreen 的 渐变 颜色 进行 多 次 重复 ,效果 如 图 223-1 所 示 。 有 关 此 实例 
的 主要 代码 如 下 。 
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图 223-1 
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<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
< style> 
div {display: inline - block; width: 370px; height: 258px; margin: 10px; 
text — indent : 2em;background — color: #FFF;border: 1px solid # EEE; 
box — shadow: 5px 5px 5px 1px #999, 0 0 40px rgba(0, 0, 0, 0.06) inset; 
position: relative; border — radius: Spx; 
/* 设置 重复 的 线性 渐变 背景 x / 
background: repeating - linear - gradient(to bottom, white, lightgreen 5% ,1ightseagreen 9 % );} 
p {padding - left: 15px;padding - right: 15px;padding - top: 5pxifont - size: 20px;} 
body {background - color: lightgray;} 
</style></head> 
< body><div><p> 徐 海 东 (1900 年 6 月 17 日 -1970 年 3 月 25 日 ), 原 名 元 清 , 湖 北 省 大 悟 县 新 城镇 ( 原 黄陂 县 当 
源 乡 会 夏 店 里 滚石 岭 会 ) 人 。 中 国共 产 党 的 优秀 党 员 , 我 军 卓 越 的 军事 家 , 久 经 考验 的 无 产 阶级 忠诚 战士 , 中国 
工农 红军 及 中 国人 民 解 放 军 主要 领导 人 之 一 ,军事 家 .中 国人 民 解 放 军 大 将 。</p></div></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,background 属性 用 于 一 次 性 设置 所 
有 与 背景 相关 的 属性 , 当 该 属性 值 为 repeating-linear-gradient 时 将 呈现 重复 的 线性 渐变 背景 颜色 。 
repeating-lineargradient 的 语法 格式 如 下 。 


repeating - linear - gradient([ < point>,]? <color- stop>[, <color- stop>]+) 


各 参数 的 说 明 如 下 。 

(1) < point >: [ left | right ]? [ top | bottom ]? || < angle >? 

其 中 ,left 用 于 设置 左边 为 渐变 起 点 的 横 坐 标 值 ; right 用 于 设置 右边 为 渐变 起 点 的 横 坐 标 值 ; 
top 用 于 设置 顶部 为 渐变 起 点 的 纵 坐 标 值 ; bottom 用 于 设置 底部 为 渐变 起 点 的 纵 坐 标 值 ; < angle > 
用 于 以 角度 值 指定 渐变 的 方向 (或 角度 ) 。 

(2) < color-stop >: < color> [ < length> | < percentage> ]? 

其 中 ,< color > 指定 颜色 ; < length > 表示 用 长 度 值 指定 起 止 色 位 置 ,不 允许 为 负 值 ; 
< percentage > 表示 用 百分比 指定 起 止 色 位 置 。 

在 此 实例 中 , background: repeating-lineargradient (to bottom, white, lightgreen 5»%, 
lightseagreen 9%) 中 的 to bottom 表示 渐变 方向 是 从 上 向 下 ,如 果 是 to top, 则 正好 相反 ,表示 从 下 
向 上 。 

此 实例 的 源 文 件 名 是 myHtmlB062. html。 


224 以 角度 方式 设置 重复 的 线性 渐变 背景 


此 实例 主要 在 CSS 样式 中 设置 元 素 的 background 属性 为 repeating-linear-gradient ,并 设置 旋转 
角度 为 45" ,从 而 使 元 素 (div) 的 背景 在 对 角 线 上 呈现 多 次 重复 的 线性 渐变 颜色 。 当 在 Google Chrome 
浏览 器 中 显示 该 页 面 时 ,元 素 背 景 将 按照 white lightgreen lightseagreen 的 渐变 颜色 在 对 角 线 上 进 
行 多 次 重复 ,效果 如 图 224-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 





<!doctype html ><html >< head >< meta charset = "UTF — 8"> 
<style> 
div {display: inline - block;width: 370px; height: 235px;margin: 10px; 
text — indent: 2em;background — color: #FFF;border: 1px solid # EEE; 
box - shadow: 5px 5px 5px 1px #999, 0 0 40px rgba(0, 0, 0, 0.06) inset; 
position: relative;border - radius: 5px; 





第 2 部 分 Ce 
/* 以 角度 方式 设置 重复 的 线性 渐变 背景 * / 


background: repeat ing - linear - gradient (45deg, white, lightgreen 5%,1ightseagreen 9%);} 
p {padding - left: 15px;padding — right: 15px;padding - top: 5px;font — size: 20px;} 
body {background - color: lightgray;} 
</style></head> 
<body> 
<div><p> 徐 海 东 (1900 年 6 月 17 日 -1970 年 3 月 25 日 ), 原 名 元 清 , 湖 北 省 大 情 县 新 城镇 ( 原 黄陂 县 溉 源 乡 
会 夏 店 里 滚石 岭 会 ) 人 。 中 国共 产 党 的 优秀 党 员 , 我 军 卓越 的 军事 家 , 久 经 考验 的 无 产 阶级 忠诚 战士 ,中 国 工农 
红军 及 中 国人 民 解 放 军 主要 领导 人 之 一 ,军事 家 、 中 国人 民 解 放 军 大 将 。</p></div> 
</body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,background 属性 用 于 一 次 性 设置 所 
有 与 背景 相关 的 属性 , 当 该 属性 值 为 repeating-linear-gradient 时 将 呈现 重复 的 线性 渐变 背景 颜色 。 
线性 渐变 通常 按照 水 平 或 垂直 方向 进行 渐变 .但 是 当 起 始 位置 是 角度 值 时 则 可 以 按照 一 定 的 角度 进 
行 旋转 , 在 此 实例 中 , background: repeating-linear- gradient (45deg, white, lightgreen 5%， 
lightseagreen 9%) 中 的 角度 是 45 ,因此 在 元 素 的 对 角 线 上 呈现 多 次 重复 的 线性 渐变 颜色 。 

此 实例 的 源 文件 名 是 myHtmlB063. html。 
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225 ”使 用 线性 渐变 方法 创建 波纹 带 状 背景 


此 实例 主要 使 用 多 个 线性 渐变 方法 创建 背景 图 像 . 从 而 使 背景 呈现 波纹 带 状 的 效果 。 当 在 
Google Chrome 浏览 器 中 显示 该 页 面 时 ,黑白 相间 的 波纹 带 状 背景 效果 如 图 225-1 所 示 。 有 关 此 实例 
的 主要 代码 如 下 。 





<!doctype html >< html >< head >< meta charset = "UTF — 8"> 
<style> 

/ * 创建 波纹 带 状 的 背景 * / 

.myWaveStripe { background: linear - gradient(135deg, black 25%, transparent 25%) 一 50px 0, 
linear — gradient(225deg, black 25%, transparent 25% ) — 50px 0, 
linear — gradient(315deg, black 25 %, transparent 25% ), 
linear ~ gradient(45deg, black 25%, transparent 25 % ); 
background - size: 40px 40px;} 





HTML5+CSS3 炫 酷 应 用 实例 集锦 





div { position: absolute; width: 270px; height: 240px; 
left:65px; top:15px; border - radius: 5px;background - image: url(img/B274. jpg); 
/x* 以 椭圆 形状 裁剪 背景 图 像 x / 
—webkit — clip— path: ellipse(30% 45% at 50% 50%);} 
</style></head> 
<body class = "myWaveStripe">< div ></div></body ></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,linear-gradient() 方 法 用 于 以 线性 浙 
变 方式 创建 图 像 ,为 了 实现 波纹 带 状 背景 图 像 此 实例 使 用 了 4 次 该 方法 。 此 实例 最 奇妙 的 地 方 就 是 
dk 了 背景 图 像 的 EE 复 模式 , 即 background-repeat: repeat, 因 为 是 默认 值 ,所 以 没有 在 代码 中 出 

。 但 是 ,如 果 仅 允许 背景 图 像 在 水 平方 向 上 重复 , 即 background-repeat:repeat-x, 则 背景 图 像 的 效 
如 图 225-2 所 示 ; 如 果 仅 允许 背景 图 像 在 垂直 方向 上 重复 , 即 background-repeat:repeatry, 则 背景 
图 像 的 履 ; 果 如 图 225-3 所 示 ; 如 果 不 允 许 背 景 图 像 重 复 , 即 ee size: 
background-repeat: no-repeat, 则 背景 图 像 的 效果 如 图 225-4 所 示 ,这 就 是 4 次 使 用 linear-gradient() 
方法 创建 的 图 像 。 因 此 实现 这 种 效果 不 仅 与 图 像 原本 的 形状 有 关 , 而 且 与 重复 模式 和 图 像 尺 寸 也 有 
很 大 的 关系 

此 实例 的 源 文件 名 是 myHtmlB274. html 
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226 ”使 用 线性 渐变 方法 创建 箭头 风格 背景 


此 实例 主要 使 用 多 个 线性 渐变 方法 创建 背景 图 像 , 从 而 使 背景 呈现 箭头 风格 的 效果 。 当 在 
Google Chrome 浏览 器 中 显示 该 页 面 时 ,红色 的 箭头 沿 着 对 角 线 方向 从 右上 角 向 左下 角 重 复 , 蓝 色 的 
箭头 则 沿 着 对 角 线 方向 从 左下 角 向 右上 角 重 复 , 如 图 226-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<style> 
/* 创建 箭头 风格 的 背景 * / 
.myArrowStripe { width: 400px; height:250px; border - radius:. 5em; 
background: linear — gradient(45deg, red 45px, transparent 45px)64px 64px, 
linear — gradient (45deg, red 45px, transparent 45px,transparent 91px, blue 91px, blue 
135px, transparent 135px), 
linear ~- gradient( - 45deg, red 23px, transparent 23px, transparent 68px, red 68px, red 
113px, transparent 113px, transparent 158px, red 158px); 
background - color :blue; background - size: 128px 128px;} 
.myBox { position: absolute; width: 270px; height: 240px; border - radius: 5px; 
left: 135px; top: 15px; background - image: url( img/B277. jpg); 
/* 以 椭圆 形状 裁剪 背景 图 像 */ 
— webkit ~ clip~ path: ellipse(30% 45% at 30% 50%);} 
</style></head> 
<body>< div class = "myArrowStripe" ><div class = "myBox" ></div></div ></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,linear-gradient() 方 法 用 于 以 线性 渐 
变 方 式 创建 图 像 ,为 了 实现 箭头 风格 的 背景 图 像 . 此 实例 使 用 了 3 次 该 方法 。 此 实例 最 奇妙 的 地 方 就 
是 采用 了 背景 图 像 的 默认 重复 模式 , 即 background-repeat: repeat, 因 为 是 默认 值 .所 以 没有 在 代码 中 
出 现 。 如 果 设 置 其 他 重复 模式 , 例如 background-repeat: repeat-y、 background-repeat: repeat-x、 
background-repeat:no-repeat 等 , 则 不 会 产生 此 种 箭头 效果 。 

此 实例 的 源 文件 名 是 myHtmlB277. html。 
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227 ”以 滤 色 模式 显示 渐变 背景 和 图 像 背景 


此 实例 主要 设置 background-blend-mode 属性 为 screen ,并 在 background 属性 中 同时 设置 渐变 
颜色 背景 和 图 像 背景 ,从 而 实现 图 像 背景 和 渐变 颜色 背景 以 滤 色 模式 显示 。 当 在 Google Chrome 浏 
览 器 中 显示 该 页 面 时 , 单 击 * 渐 变 背 景 按 钮 , 则 下 面 的 背景 将 以 由 绿色 到 白色 的 渐变 色 显 示 , 如 
图 227-1 所 示 ; 单 击 “ 图 像 背 景 "按钮 , 则 下 面 的 背景 将 显示 一 幅 图 像 ,如 图 227-2 所 示 ; 单 击 * 滤 色 背 
景 ?按钮 , 则 将 渐变 色 背 景 和 图 像 背景 以 滤 色 模 式 处 理 后 显示 :如 图 227-3 所 示 。 有 关 此 实例 的 主要 代 
码 如 下 。 
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图 227-2 图 227-3 


<!doctype html >< html>< head><meta charset = "UTF - 8"> 
< script src= "js/jquery -3.1.1.min. js"></script>< script language = "javascript"> 
$ (document). ready(function() { 
$ ("#myBtnGradient").click(function() {// 渐 变 背 景 


2 部 分 图 像 < 





$ (".myDiv").css("background", "linear — gradient(]imegreen，transparent)") 
D); 
$ ("#myBtnImage").click(function() {// 图 像 背景 
$ (".myDiv").css("background", "url( img/B152B. jpg)") 
D; 
$ ("myBtnScreen").click(function() {// 滤 色 背 景 
$ (".myDiv").css("background", "linear - gradient(limegreen，transparent),url( img/B152B. jpg)"); 
D2}); 
</script> 
<style type= "text/css"> 
.myDiv { width: 400px; height :250px;line— height: 250px; font - size: 38px; 
text - align: center; border - radius: 10px; 
background: linear - gradient (limegreen, transparent), url( img/B152B. jpg); 
background - blend - mode: screen; background - size: 100% 100%;} 
button{ width:124px; margin: 2px;} 
</style></head> 
<body><div> 
< button id = "myBtnGradient"> 渐 变 背 景 </button > 
<button id = "myBtnImage"> 图 像 背 景 </button > 
< button id = "myBtnScreen"> 滤 色 背 景 </button> 
</div> 
<div class = "myDiv"> 炫 酷 实 例 集锦 </div> 
</body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,background-blend-mode 属性 用 于 定 
义 背 景 层 的 混合 模式 (图 片 与 颜色 )。background-blend-mode: screen 表示 背景 层 的 图 像 和 渐变 色 以 
screen( 滤 色 ) 模 式 混 合 显示 ,在 采用 滤 色 模式 混合 图 像 时 将 查看 每 个 通道 的 颜色 信息 ,并 将 混合 色 的 
互补 色 复 合 ,结果 总 是 显示 较 亮 的 颜色 , 即 任何 颜色 和 白色 进行 滤 色 都 得 到 白色 ,任何 颜色 和 黑色 进 
行 滤 色 都 会 保留 原来 的 颜色 ,在 此 实例 中 经 过 滤 色 后 显示 最 多 的 就 是 绿色 。 需 要 注意 的 是 , 当 使 用 
background-blend-mode: screen 时 , background 属性 中 必须 有 两 个 或 两 个 以 上 的 背景 图 像 。 
background-blend-mode 属性 支持 的 混合 模式 有 normal、 multiply screen、overlay、 darken lighten、 
color-dodge ,color-burn hard-light soft-light difference、exclusion ,hue, saturation, color luminosity， 
其 中 每 一 种 混合 模式 都 有 其 各 自 的 计算 模式 。 

此 实例 的 源 文件 名 是 myHtmlB279. html。 


228 ”通过 重复 线性 渐变 实现 信纸 风格 背景 


此 实例 主要 设置 background 属性 为 repeating-lineargradient, 从 而 使 背景 呈现 细 条 纹 信纸 风格 
的 特殊 效果 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 , 红 、 白 、 绿 、 白 相间 的 细 条 纹 信 纸 风格 的 背 
景 效果 如 图 228-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 





<!doctype html ><html >< head >< meta charset = "UTF — 8"> 
<style type= "text/css"> 
.myStripe { margin: 10px auto;width: 400px; height: 250px;border - radius: 10px; 
/* 通过 重复 的 多 级 渐变 实现 细 条 纹 信纸 风格 的 背景 * / 
background: repeating - linear - gradient (45deg, red Opx, red 1px white 2px, white 5px, 
green 6px, green 7px, white 4px, white 19px);} 
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.myBox { margin: 10px auto; width: 400px;height: 250px; 
background - image: url( img/B003. jpg); background- size: 100% 100%; 
/x* 以 椭圆 形状 裁剪 背景 图 像 */ 


— webkit - clip - path: ellipse(30% 35% at 50% 50%);} 
</style></head> 





<body><div class = "myStripe"><div class = "myBox"></div ></div></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , background: repeating- linear- 
gradient(45deg，red Opx, red 1px, white 2px，white 5px, green 6px，green 7px，white 4px, white 
19px) 用 于 实现 红 、 白 、 绿 、 白 重复 的 背景 ,各 种 颜色 后 面 的 像素 值 主要 用 于 控制 渐变 范围 ,45deg 则 表 
示 所 有 颜色 的 渐变 方向 均 为 45, 即 对 角 线 方向 。 

此 实例 的 源 文 件 名 是 myHtmlB280. html。 
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229 使 用 多 个 径 向 渐变 实现 太极 图 案 背 景 


此 实例 主要 通过 使 用 多 个 radial-gradient() 创 建 不 同 的 圆 形 来 设置 背景 ,从 而 使 背景 呈现 太极 图 
案 的 效果 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,创建 的 太极 图 案 背 景 如 图 229-1 所 示 。 有 
关 此 实例 的 主要 代码 如 下 。 
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<!doctype html ><html >< head >< meta charset = "UTF - 8"> 
<style type= "text/css"> 
.myTaichi { position: absolute; top: 50% ;left: 50%; 
width: 200px; height: 200px; 
transform: translate( ~ 50%, — 50%); border — radius: 50%; 
/* 绘 制 太极 图 案 的 空心 外 圆 * / 

border: solid 1px black; 

background — image: 
/* 绘 制 太 极 图 案 下 面 的 小 黑 点 x*/ 
radial - gradient (black 12. 5px, transparent 12.5px), 
/* 绘 制 太 极 图 案 上 面 的 小 白 点 */ 
radial - gradient (white 12. 5px, transparent 12.5px), 
/* 绘 制 太极 图 案 下 面 的 小 黑 点 的 外 层 白 圆 * / 
radial - gradient(white 50px, transparent 50px), 
/* 绘 制 太极 图 案 上 面 的 小 白 点 的 外 层 黑 圆 * / 
radial - gradient (black 50px, transparent 50px), 
/* 将 最 外 层 的 外 圆 的 左 半 部 分 用 黑色 填充 , 右 半 部 分 用 白色 填充 * / 
linear - gradient (90deg, black 100px, white 100px); 
/*4 个 坐标 分 别 对 应 前 面 的 4 个 圆 的 中 心 点 * / 

background - position: center 50px, center 一 50px，center 50px, center — 50px;} 
</style></head> 
<body>< div class = "myTaichi"></div></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,background-image: radial-gradient 
(black 12, 5px, transparent 12, 5px) 和 background-position: center 50px 用 于 在 大 圆 中 创建 一 个 小 黑 
点 ,并 显示 在 大 圆 的 下 半 部 分 ,如 图 229-2 所 示 , 其 他 3 个 圆 的 实现 原理 与 之 类 似 ; background- 
image:linear-gradient(90deg, black 100px，white 100px) 和 background-position:0 通过 使 用 两 级 线 
性 渐变 使 大 圆 的 左 半 部 分 显示 黑色 , 右 半 部 分 显示 白色 ,如 图 229-3 所 示 。 在 CSS3 中 ,radial-gradient() 
方法 用 于 以 径 向 渐变 方式 创建 图 像 ,linear-gradient() 方 法 用 于 以 线性 渐变 方式 创建 图 像 。 

此 实例 的 源 文 件 名 是 myHtmlB289. html。 
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图 229-3 


230 ”创建 渐变 背景 实现 带 线条 风格 的 稿 纸 


此 实例 主要 设置 background 和 -webkit-background-size 属性 .从 而 以 创建 渐变 背景 的 形式 实现 
带 线条 风格 的 书信 稿 纸 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 , 带 线条 的 书信 稿 纸 效 果 如 
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230-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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中 国 古典 名 著 








《三 国 演义 》 故 事 开始 于 刘备 、 关 羽 、 张 飞机 园 三 结义 ， 
结束 于 王 滩 平 吴 ， 拱 写 了 东汉 末年 和 三 国 时 代 殊 、 蜀 、 吴 

间 的 军事 、 政 治 斗争 。 文 字 浅显 、 人 物 形象 刻画 深 
刻 、 情 节 曲 折 、 结 构 宏大 。 





















人 《水浒 传 》 是 由 作者 在 < 宣 和 遗事 》 及 相关 话 本 、 故 事 的 
基础 上 创作 而 成 。 全 书 以 措 写 农民 战争 为 主要 题材 ， 塑 千 
了 宋江 、 吴 用 、 李 连 、 武 松 、 林 冲 、 鲁 曾 深 等 染 山 英雄 ， 

揭示 了 当时 的 社会 子 牛 。 故 事 曲折 、 语 言 生动 、 人 物性 格 
鲜明 ， 具 有 很 高 的 艺术 成 就 。 




























图 230-1 


<! doctype html >< html >< head >< meta charset = UTF -8> 
< style type = "text/css"> 
.page {line- height: 30px; margin: 0 auto;padding: 15px 0 29px; 
background: - webkit - gradient( linear, left top, left bottom，from(green)，color - stop(5%, 
lightgoldenrodyellow) ); - webkit — background- size: 100% 30px; } 
.Page p { margin: 30px 0;padding: 0 2em;} 
</style></head> 
<body >< div class = "page">< center><h3 > 中 国 古典 名 著 </h3 ></center> 
<p>s 三 国 演义 > 故事 开始 于 刘备 .关羽 , 张 飞 桃园 三 结义 ,结束 于 王 滩 平 吴 ,描写 了 东汉 末年 和 三 国 时 代 魏 、 罚 、 
吴 三 国之 间 的 军事 ,政治 斗争 。 文 字 浅显 .人 物 形象 刻画 深刻 ,情节 曲折 .结构 宏大 。</p> 
<p 兴 水 游 传 }? 是 由 作者 在 ( 宣 和 遗事 ) 及 相关 话 本 ,故事 的 基础 上 创作 而 成 的 。 全 书 以 描写 农民 战争 为 主要 题 
材 ,塑造 了 宋江 、 吴 用 、 李 违 .武松 .林冲 、. 鲁 智 深 等 梁山 英雄 ,揭示 了 当时 的 社会 矛盾 。 故 事 曲 折 ,语言 生动 .人 物 
人 性格 鲜明 ,具有 很 高 的 艺术 成 就 。</p> 
</div></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,-webkit-gradient( linear, left top， 
left bottom, from(green) ,colorstop(5% , lightgoldenrodyellow) ) 用 于 创建 每 行 的 渐变 背景 效果 , 读 
者 试 着 将 5% 修 改 为 75% 即 可 明白 这 种 特殊 的 渐变 效果 ; -webkit-background-size: 100% 30px 用 于 
规定 前 面 所 创建 的 渐变 背景 在 水 平方 向 铺 满 , 在 垂直 方向 每 隔 30px 重复 一 次 ,也 可 以 直接 写 -webkit- 
background-size: 30px, 效 果 相 同 。 在 CSS 中 ,background-size 属性 用 于 规定 背景 图 像 的 尺寸 ,该 属 
性 的 语法 格式 如 下 。 


background — size: length | percentage | cover | contain; 


其 中 ,各 属性 值 的 意义 如 下 。 
(1) length: 表示 设置 背景 图 像 的 高 度 和 宽度 ,第 一 个 值 设置 宽度 ,第 二 个 值 设置 高 度 。 如 果 只 设 
置 一 个 值 , 则 第 二 个 值 会 被 设置 为 auto。 
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(2) percentage: 表示 以 父 元 素 的 百分比 来 设置 背景 图 像 的 宽度 和 高 度 ,第 一 个 值 设置 宽度 ,第 二 
个 值 设置 高 度 。 如 果 只 设置 一 个 值 , 则 第 二 个 值 会 被 设置 为 auto。 

(3) cover: 表示 把 背景 图 像 扩 展 至 足够 大 ,以 使 背景 图 像 完 全 覆盖 背景 区 域 。 背 景 图 像 的 某 些 
部 分 也 许 无 法 显示 在 背景 定位 区 域 中 。 

(4) contain: 表示 把 图 像 扩 展 至 最 大 尺寸 ,以 使 其 宽度 和 高 度 完全 适应 内 容 区 域 。 

此 实例 的 源 文件 名 是 myHtmlB185. html。 


231 使 用 线性 渐变 实现 背景 隔行 错 色 显示 


此 实例 主要 使 用 linear-gradient( ) 方 法 绘制 两 种 颜色 平分 高 度 的 背景 图 形 ,并 设置 line-height 属 
性 值 为 背景 图 形 高 度 的 一 半 , 从 而 实现 文本 的 背景 颜色 隔行 交错 显示 的 效果 。 当 在 Google Chrome 
浏览 器 中 显示 该 页 面 时 ,文本 的 背景 颜色 以 青色 和 粉色 隔行 交错 显示 的 效果 如 图 231-1 所 示 。 有 关 此 
实例 的 主要 代码 如 下 。 
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图 231-1 


<!doctype html >< html ><head><meta charset = "UTF - 8"> 
< style type = "text/css"> 
*{ margin: 0; padding: 0; } 
.myBox{ font - size: 16px;line— height: 30px;background— origin: content ~ box; 
/* 创建 线性 渐变 背景 图 形 * / 
background: linear - gradient (cyan 50% ,pink 50 % ); 
/* 设置 线性 渐变 背景 图 形 的 大 小 ,高 度 为 line- height 的 两 倍 * / 
background - size: 100% 60px; } 
</style></head> 
<body>< div class = "myBox”" > 
<p> 细 胞 吞 叭 外 界 颗粒 的 " 胞 乔 效 应 ", 是 生物 界 普遍 存在 的 一 种 行为 , 但 您 想 过 金属 也 能 像 生物 细胞 一 样 将 
周围 的 颗粒 乔 和 体内 吗 ?我 国 科学 家 通过 研究 就 发 现 了 液态 金属 的 这 种 神奇 的 类 生物 行为 。 日 前 ,这 一 研究 成 
果 以 封面 形式 发 表 在 国际 权威 期 刊 < 尖端 科学 > 上。 不 同 于 常规 环境 下 的 固态 金属 , 久 钢 合金 即使 在 室温 下 也 能 
保持 液态 , 也 就 是 我 们 常 说 的 液态 金属 。 中 科 院 理化 技术 研究 所 与 清华 大 学 联合 小 组 研究 发 现 ,溶液 环境 中 
的 液态 金属 液 滴 , 在 受到 电场 或 化 学 物质 的 作用 时 ,会 产生 类 似 于 细胞 吞 叭 外 界 颗 粒 的 胞 知 效 应 ,能 高 效 地 将 
周围 的 颗粒 知人 体内 。 这 一 发 现 也 开辟 了 一 条 构筑 高 性 能 纳米 金属 流体 材料 的 新 途径 。</p></div></body> 
</html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,line-height: 30px 用 于 设置 行 间 的 距 
离 ( 行 高 ) 为 30px; background:linear-gradient(cyan 50% ,pink 50%) 用 于 创建 青色 和 粉色 各 占 50% 
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的 背景 图 形 ; background-size: 100% 60px 用 于 设置 背景 图 形 的 高 度 为 60px. 即 line-height 属性 值 的 
两 倍 ,宽度 等 于 盒子 的 宽度 。 
此 实例 的 源 文件 名 是 myHtmlB366. html。 


232 在 元 素 的 对 角 线 上 设置 线性 渐变 的 背景 色 


此 实例 主要 在 CSS 样式 中 设置 元 素 的 background 属性 为 linear-gradient, 并 设置 其 渐变 方向 为 
to bottom left, 从 而 使 元 素 (div) 的 背景 呈现 从 右上 和 角 向 左下 角 线 性 渐变 的 颜色 。 当 在 Google 
Chrome 浏览 器 中 显示 该 页 面 时 ,这 种 在 对 角 线 上 线性 渐变 的 背景 效果 如 图 232-1 所 示 。 有 关 此 实例 
的 主要 代码 如 下 。 
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图 232-1 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<style> 
div {display: inline - block;width: 370px; height: 235px;margin: 10px; 
text - indent: 2em; background - color: #FFF; border: 1px solid # EEE; 
box— shadow: 5px 5px 5px lpx #999, 0 0 40px rgba(0, 0, 0, 0.06) inset; 
position: relative;border - radius: 5px; 
/* 设置 从 右上 角 到 左下 角 的 线性 渐变 背景 * / 
background: linear - gradient (to bottom left, white, lightgreen 20%, lightseagreen 80%);} 
p {padding - left: 15px;padding - right: 15px;padding - top: 5px;font - size: 20px;} 
body {background - color: lightgray;} 
</style></head> 
<body><div><p> 徐 海 东 (1900 年 6 月 17 日 -1970 年 3 月 25 日 ), 原 名 元 清 ,湖北 省 大 悟 县 新 城镇 ( 原 黄 陂 县 当 
源 乡 会 夏 店 里 滚石 岭 会 ) 人 。 中 国共 产 党 的 优秀 党 员 , 我 军 卓越 的 军事 家 , 久 经 考验 的 无 产 阶 级 忠诚 战士 ,中 国 
工农 红军 及 中 国人 民 解 放 军 主要 领导 人 之 一 ,军事 家 ,中国 人民 解放 军 大 将 。</p></div></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,background 属性 用 于 一 次 性 设置 所 
有 与 背景 相关 的 属性 ,如 果 此 属性 值 为 lineargradient, 则 将 使 背景 呈现 线性 渐变 效果 。linear- 
gradient 的 语法 格式 如 下 。 


linear ~ gradient(direction，color- stopl, color— stop2，… ); 











其 中 .direction 默认 为 to bottom, 即 从 上 向 下 的 渐变 。 如 果 direction 的 值 为 to bottom left, 则 渐 
变 方向 是 从 右上 角 向 左下 角 , 沿 着 对 角 线 方向 线性 渐变 ; 如 果 采 用 角度 表示 .to bottom left 相当 于 一 
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135deg。 如 果 direction 的 值 为 to bottom right, 则 渐变 方向 是 从 左上 和 角 向 右 下 角 , 沿 着 对 角 线 方向 线 
性 渐变 ; 如 果 采 用 角度 表示 ,to bottom right 相当 于 135deg。 

如 果 不 想 将 渐变 色 的 起 点 或 终点 设置 为 元 素 的 顶端 . 底 端 ,左边 .右边 ,左上 角 \ 左 下 角 、 右 上 角 或 
右 下 角 , 可 以 在 起 点 色 或 终点 色 后 边 指定 离 渐 变色 起 点 或 渐变 色 终 点 的 偏离 位 置 (不 指定 时 默认 值 分 
别 是 0% 和 100%), 例 如 background: linear-gradient (to bottom left, white, lightgreen 20%， 
lightseagreen 80% ) 。 

此 实例 的 源 文 件 名 是 myHtmlB064. html。 


233 ”透明 显示 在 元 素 背 景 中 从 加 的 两 幅 图 像 


此 实例 主要 通过 改变 -webkit-cross-fade (url(img/B156A. jpg),， url(img/B156B. jpg)，50%) 方 
法 中 的 百分比 值 实现 以 不 同 的 透明 度 显 示 在 元 素 背 景 中 县 加 的 两 幅 图 像 。 当 在 Google Chrome 浏览 
器 中 显示 该 页 面 时 ,使 用 鼠标 拖 动 滑 块 修改 透明 度 值 ( 即 百分比 值 ), 即 能 够 以 不 同 的 透明 度 显 示 两 幅 
图 像 的 县 加 效果 ,如 图 233-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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扼 动 滑 块 改变 图 像 的 透明 度 : 





图 233-1 


<!doctype html >< html >< head >< meta charset = UIF -8> 
<script src= "js/jquery — 3.1.1.min. js"></script >< script language = "javascript"> 
$ (document). ready(function() { 
function myFunc() {// 获 取 滑 块 的 当前 值 并 转换 成 float 
var myFade = parseFloat( $ ("#myFade").prop("value")); 
// 根 据 滑 块 值 重 置 图 像 的 透明 度 
$ ("div"). css("background - image”"," — webkit - cross - fade(url (img/B156A. jpg), url (img/B156B. 
jpg), " + myFade); } 
setInterval (myFunc, 1); 
J 
</script> 
<style type= "text/css"> 
div{ width:450px; height:300px; border - radius: 10px; background - image: - webkit - cross - fade(url 
(img/B156A. jpg), url(img/B156B. jpg), 50%); } 
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input{ width: 230px;} 
</style></head> 
<body >< center > 拖 动 滑 块 改变 图 像 的 透明 度 : < input type = "range" id= "myFade" min="0" max="1" value= 
"0.5" step = "0.05" /><br><br><div></div></center ></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,background-image: -webkit-cross- 
fade(url(img/B156A. jpg), url(img/B156B. jpg)，50%) 表 示 以 50% 的 透明 度 控制 第 二 幅 图 像 与 第 
一 幅 图 像 琶 加 显示 ,目前 的 测试 表明 ,透明度 百分比 值 只 作用 于 第 二 幅 图 像 上 。 

此 实例 的 源 文 件 名 是 myHtmlB177. html。 


234 以 登 如 和 滤 色 模式 混合 显示 背景 的 两 幅 图 像 


此 实例 主要 设置 元 素 的 background-blend-mode 属性 分 别 为 overlay 和 screen, 从 而 实现 以 释 加 
和 滤 色 模式 混合 显示 背景 的 两 幅 图 像 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,两 幅 图 像 在 未 
混合 前 只 显示 一 幅 图 像 , 单 击 " 肥 加 模式 "按钮 . 则 两 幅 图 像 经 过 从 加 模式 混合 后 的 效果 如 图 234-1 所 
示 ; 单 击 “ 滤 色 模 式 " 按 钮 , 则 两 幅 图 像 经 过 滤 色 模式 混合 后 的 效果 如 图 234-2 所 示 。 有 关 此 实例 的 主 
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图 234-1 


<! doctype html >< html >< head ><meta charset = "UTF - 8"> 
< script src= "js/jquery -3.1.1.min. js"></script>< script language = "javascript"> 
$ (document). ready(function() { 
$ (" 间 myBtnOverlay").click(function() {// 又 加 模式 
$ (".box").css("background - blend— mode", "overlay"); }); 
$ ("myBtnScreen").click(function() {// 滤 色 模 式 
$ (".box").css("background— blend- mode", "screen"); });}); 
</script > 
<style type= "text/css"> 
.box {width: 450px; height: 300px; border - radius: 10px;margin: 3px;background: url( img/B151A. jpg) 
no - repeat center，url( img/B151B. jpg) no - repeat center;} 
input { width: 220px; border — radius: 2px; padding: 3px; margin: 2px; } 
</style></head> 








2 部 分 图 像 < 


<body>< div>< input type="button”value = "从 加 模式 " id= "myBtnOverlay"/> 
< input type= "button"” value = " 滤 色 模式 ”id= "myBtnScreen"/></div> 
<div class = "box"></div></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 .background-blend-mode 属性 用 于 
定义 背景 层 的 混合 模式 (图 片 与 颜色 ) 。$ (". box"). css("background-blend-mode"，"overlay") 表 
示 元 素 背 景 层 的 两 幅 图 像 以 琶 加 模式 混合 显示 .在 采用 释 加 模式 混合 图 像 时 .复合 或 过 滤 颜 色 取 决 
于 基色 (backdrop) 的 值 ,图 像 或 颜色 在 现 有 的 像素 上 又 加 .同时 保留 基色 的 明暗 度 。$(". box"). 
css("background-blend-mode" , "screen" ) 表 示 元 素 背 景 层 的 两 幅 图 像 以 滤 色 模式 混合 显示 ,在 采用 
滤 色 模式 混合 图 像 时 将 查看 每 个 通道 的 颜色 信息 .并 将 混合 色 的 互补 色 和 基色 复合 ,结果 总 是 较 亮 的 
颜色 ,任何 颜色 和 白色 进行 滤 色 都 得 到 白色 ,任何 颜色 和 黑色 进行 滤 色 都 会 保留 原来 的 颜色 。 

此 实例 的 源 文件 名 是 myHtmlB151. html。 


235 ”以 差 值 和 排除 模式 混合 显示 背景 的 两 幅 图 像 


此 实例 主要 设置 元 素 的 background-blend-mode 属性 分 别 为 difference 和 exclusion ,从 而 实现 以 
差 值 和 排除 模式 混合 显示 背景 的 两 幅 图 像 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,两 幅 图 像 
在 未 混合 前 只 显示 一 幅 图 像 , 单 击 * 排 除 模式 "按钮 , 则 两 幅 图 像 经 过 排除 模式 混合 后 的 效果 如 图 235-1 
所 示 ; 单 击 “ 差 值 模式 "按钮 , 则 两 幅 图 像 经 过 差 值 模式 混合 后 的 效果 如 图 235-2 所 示 。 有 关 此 实例 的 
主要 代码 如 下 。 











百 -o x 百 - oo x 


[DD myHemlB152html x DD myHemlB152 html x 
3 © Dfile///D/myWork/myHtmlB152html 它 三 ”3 © Dfile///D/myWorW/myHtmlB15Zhtml 安 三 
| 


的 模式 | 若 什 复式 排队 模式 |[ mR 式 | 

















图 235-1 图 235-2 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
< script src= "js/jquery- 3.1.1.min. js"></script>< script language = "javascript"> 
$ (document). ready(function() { 
$ ("myBtnExclusion").click(function() {// 排 除 模式 
$ (".box").css("background - blend- mode"，"exclusion"); }); 
$ ("#myBtnDifference").click(function() {// 差 值 模式 
$ (".box").css("background — blend- mode", "difference"); });}); 
</script> 
<style type= "text/css"> 
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.box { width: 450px; height: 300px;border — radius: 10px;margin: 3px; 
background: url( img/B152A. jpg) no - repeat center, url(img/B152B. jpg) no - repeat center;} 
input { width: 220px;border - radius: 2px; padding: 3px; margin: 2px;} 
</style></head> 
<body>< div>< input type = "button”value = "排除 模式 ”id = "myBtnExclusion"/> 
< input type= "button”value = " 差 值 模式 ”id = "myBtnDifference"/></div> 
<div class = "box"></div></body></html > 





上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,background-blend-mode 属性 用 于 定 
义 背 景 层 的 混合 模式 (图 片 与 颜色 ) 。$ (". box"). css("background-blend-mode"，"difference") 表 示 
元 素 背 景 层 的 两 幅 图 像 以 差 值 模式 混合 显示 , 差 值 模式 在 混合 图 像 时 将 查看 每 个 通道 的 颜色 信息 ,并 
从 基色 中 减 去 混合 色 或 从 混合 色 中 减 去 基色 ,具体 取决 于 哪 一 个 颜色 的 亮度 值 更 大 ,与 白色 混合 将 反 
转 基 色 值 ,与 黑色 混合 则 不 产生 变化 。$ (". box"). css("background-blend-mode",， "exclusion") 表 
示 元 素 背景 层 的 两 幅 图 像 以 排除 模式 混合 显示 ,排除 模式 在 混合 图 像 时 将 插入 一 种 与 差 值 模式 相似 
但 对 比 度 更 低 的 效果 ,与 白色 混合 将 反 转 基色 值 , 与 黑色 混合 不 发 生变 化 。 

此 实例 的 源 文件 名 是 myHtmlB152. html。 


236 ”以 强 光 和 和 柔 光 模式 混合 显示 背景 的 两 幅 图 像 


此 实例 主要 设置 元 素 的 background-blend-mode 属性 分 别 为 hard-light 和 soft-light, 从 而 实现 以 
强 光 和 和 柔 光 模 式 混合 显示 背景 的 两 幅 图 像 。 当 在 Google Chrome 浏览 嚣 中 显示 该 页 面 时 ,两 幅 图 像 
在 未 混合 前 只 显示 一 幅 图 像 , 单 击 * 强 光 模式 "按钮 , 则 两 幅 图 像 经 过 强 光 模式 混合 后 的 效果 如 图 236-1 
所 示 ; 单 击 “ 柔 光 模 式 ” 按 钮 , 则 两 幅 图 像 经 过 柔 光 模式 混合 后 的 效果 如 图 236-2 所 示 。 有 关 此 实例 的 
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<! doctype html ><html ><head ><meta charset = "UTF — 8"> 
<script src= "js/jquery - 3.1.1.min. js"></script >< script language = "javascript"> 
$ (document). ready(function() { 
$ (" 井 myBtnHard") .click(function() {// 强 光 模式 
$ (".box").css("background— blend — mode", "hard— light"); }); 
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$ ("#myBtnSoft").click(function() {// 柔 光 模 式 
$ (".box").css("background— blend- mode"，"soft- light"); });}); 
</script > 
<style type= "text/css"> 
.box { width: 450px; height: 300px;border - radius: 10px; margin: 3px;background: url( img/B153A. jpg) 
no - repeat center, url(img/B153B. jpg) no - repeat center; } 
input { width: 220px; border — radius: 2px; padding: 3px; margin: 2px;} 
</style></head> 
<body>< div>< input type = "button"” value = " 强 光 模式 " id= "myBtnHard"/> 
< input type= "button" value = " 柔 光 模 式 ”id= "myBtnSoft"/></div> 
<div class = "box"></div></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,background-blend-mode 属性 用 于 定 
义 背 景 层 的 混合 模式 (图 片 与 颜色 ) 。$(". box"). css("background-blend-mode","hard-light") 表 示 
元 素 背 景 层 的 两 幅 图 像 以 强 光 模式 混合 显示 , 强 光 模 式 在 混合 图 像 时 将 过 滤 颜 色 , 具 体 取 决 于 混合 
色 , 此 效果 与 耀眼 的 聚光灯 照 在 图 像 上 相似 ,如 果 混 合 色 比 50% 的 灰 度 色 亮 , 则 图 像 变 亮 ; 如 果 混 合 
色 比 50% 的 灰 度 色 暗 , 则 图 像 变 上 暗 。$(". box"). css("background-blend-mode"，"soft-light") 表 示 
元 素 背 景 层 的 两 幅 图 像 以 柔 光 模式 混合 显示 ,和 柔 光 模式 在 混合 图 像 时 将 使 颜色 变 亮 或 变 暗 ,具体 取决 
于 混合 色 ,此 效果 与 发 散 的 聚光灯 照 在 图 像 上 的 效果 类 似 , 如 果 混 合 色 比 50% 的 灰 度 色 亮 , 则 图 像 变 
亮 ,就 像 被 减 淡 一 样 ; 如 果 混 合 色 比 50% 的 灰 度 色 暗 , 则 图 像 变 上 暗 , 就 像 被 加 深 了 一 样 。 

此 实例 的 源 文 件 名 是 myHtmlB153. html。 


237 以 加 深 和 减 淡 模 式 混合 显示 背景 的 两 幅 图 像 


此 实例 主要 设置 元 素 的 background-blend-mode 属性 分 别 为 color-dodge 和 color-burn ,从 而 实现 
以 颜色 减 淡 和 颜色 加 深 模 式 混合 显示 背景 的 两 幅 图 像 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 
时 ,两 幅 图 像 在 未 混合 前 只 显示 一 幅 图 像 . 单 击 “ 颜 色 减 淡 模 式 ” 按 钮 . 则 两 幅 图 像 经 过 颜色 减 淡 模 式 
混合 后 的 效果 如 图 237-1 所 示 ; 单 击 “ 颜 色 加 深 模式 "按钮 . 则 两 幅 图 像 经 过 颜色 加 深 模 式 混合 后 的 效 
果 如 图 237-2 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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<!doctype html >< html >< head >< meta charset = "UTF — 8"> 
<script src= "js/jquery - 3.1.1.min. js"></script >< script language = "javascript"> 
$ (document). ready(function() { 
$ ("站 myBtnDodge").click(function() {// 颜 色 减 淡 模 式 
$ (".box").css("background— blend- mode", "color - dodge"); }); 
$ (" 提 myBtnBurn") .click(function() {// 颜 色 加 深 模式 
$ (".box").css("background — blend- mode"，"color - burn"); });}); 
</script> 
<style type= "text/css"> 
.box { width: 450px; height: 300px;border - radius: 10px; margin: 3px;background: url( img/B154B. jpg) 
no - repeat center, url(img/B154A. jpg) no - repeat center; } 
input {width: 220px; border - radius: 2px; padding: 3px; margin: 2px; } 
</style></head> 
<body>< div>< input type = "button" value = "颜色 减 淡 模式 " id= "myBtnDodge"/> 
< input type = "button" value = "颜色 加 深 模式 ”id = "myBtnBurn"/></div> 
<div class = "box"></div></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,background-blend-mode 属性 用 于 定 
义 背 景 层 的 混合 模式 (图 片 与 颜色 )。$ (". box"). css("background-blend-mode","color-dodge") 表 
示 元 素 背景 层 的 两 幅 图 像 以 颜色 减 淡 模式 混合 显示 ,颜色 减 淡 模 式 在 混合 图 像 时 将 查看 每 个 通道 中 
的 颜色 信息 ,并 通过 减 小 对 比 度 使 基色 变 亮 以 反映 混合 色 ,与 黑色 混合 不 发 生 任何 变化 。$$(". box"). 
css("background-blend-mode", “color- burn") 表 示 元 素 背 景 层 的 两 幅 图 像 以 颜色 加 深 模式 混合 显 
示 ,颜色 加 深 模式 在 混合 图 像 时 将 查看 每 个 通道 中 的 颜色 信息 ,并 通过 增加 对 比 度 使 基色 变 暗 以 反映 
混合 色 ,与 白色 混合 不 会 发 生变 化 。 

此 实例 的 源 文件 名 是 myHtmlB154. html。 


238 ”以 增 暗 和 增 亮 模式 混合 显示 背景 的 两 幅 图 像 


此 实例 主要 设置 元 素 的 background-blend-mode 属性 分 别 为 darken 和 lighten, 从 而 实现 以 增 暗 
和 增 亮 模式 混合 显示 背景 的 两 幅 图 像 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,两 幅 图 像 在 未 
混合 前 只 显示 一 幅 图 像 , 单 击 * 增 暗 模式 ”按钮 , 则 两 幅 图 像 经 过 增 暗 模式 混合 后 的 效果 如 图 238-1 所 
示 ; 单 击 * 增 亮 模式 ”按钮 , 则 两 幅 图 像 经 过 增 亮 模式 混合 后 的 效果 如 图 238-2 所 示 。 有 关 此 实例 的 主 
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<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<script src= "js/jquery -3.1.1.min. js"></script >< script language = "javascript"> 
$ (document). ready(function() { 
$ (" 井 myBtnDarken"). click( function() {// 增 暗 模 式 
$ (".box").css("background— blend— mode", "darken"); }); 
$ (" 井 myBtnLighten") .click(function() {// 增 亮 模 式 
$ (".box").css("background— blend- mode", "lighten"); });}); 
</script > 
< style type= "text/css"> 
.box {width: 450px; height: 300px; border - radius: 10px;margin: 3px; background: url (img/B155A. jpg) 
no - repeat center, url(img/B155B. jpg) no - repeat center;} 
input {width: 220px;border - radius: 2px;padding: 3px; margin: 2px;} 
</style></head> 
<body>< div>< input type = "button” value = " 增 暗 模式 "id= "myBtnDarken"/> 
< input type = "button" value = " 增 亮 模 式 " id= "myBtnLighten"/></div> 
<div class = "box"></div ></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,background-blend-mode 属性 用 于 定 
义 背 景 层 的 混合 模式 (图 片 与 颜色 )。 $ (". box"). css("background-blend-mode","darken") 表 示 元 
索 背 景 层 的 两 幅 图 像 以 增 暗 模 式 混合 显示 , 增 暗 模式 在 混合 图 像 时 将 查看 每 个 通道 的 颜色 信息 ,并 选 
择 基 色 或 混合 色 中 较 暗 的 颜色 作为 结果 色 , 比 混合 色 亮 的 像素 被 替换 , 比 混合 色 上 暗 的 像素 保持 不 变 。 
$(".box"). css("background-blend-mode", "lighten") 表 示 元 素 背 景 层 的 两 幅 图 像 以 增 亮 模式 混合 
显示 , 增 亮 模式 在 混合 图 像 时 将 选择 基色 或 混合 色 中 较 亮 的 颜色 作为 结果 色 , 比 混合 色 暗 的 像素 被 蔡 
换 , 比 混合 色 亮 的 像素 保持 不 变 

此 实例 的 源 文件 名 是 myHtmlB155. html 


239 ”以 色相 和 亮度 模式 混合 显示 背景 的 两 幅 图 像 


此 实例 主要 设置 元 素 的 background-blend-mode 属性 分 别 为 hue 和 luminosity, 从 而 实现 以 色相 
和 亮度 模式 混合 显示 背景 的 两 幅 图 像 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,两 幅 图 像 在 未 
混合 前 只 显示 一 幅 图 像 , 单 击 “ 色 相模 式 ” 按 钮 , 则 两 幅 图 像 经 过 色相 模式 混合 后 的 效果 如 图 239-1 所 
示 ; 单 击 “ 亮 度 模式 ”按钮 , 则 两 由 图 像 经 过 亮度 模式 混合 后 的 效果 如 图 239-2 所 示 。 有 关 此 实例 的 主 
要 代码 如 下 。 
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<!doctype html >< html >< head >< meta charset = "UTF — 8"> 
<script src= "js/jquery - 3.1.1.min. js"></script>< script language = "javascript"> 
$ (document). ready(function() { 
$ ("#myBtnHue").click(function() {// 色 相模 式 
$ (".box").css("background — blend- mode", "hue"); }); 
$ ("#myBtnLuminosity") .click(function() {// 亮 度 模式 
$ (".box").css("background— blend — mode", "luminosity"); });}); 
</script> 
<style type= "text/css"> 
.box {width: 450px; height: 300px; border - radius: 10px; margin: 3px;background: url( img/B156B. jpg) 
no - repeat center, url(img/B156A. jpg) no - repeat center;} 
input {width: 220px;border - radius: 2px;padding: 3px;margin: 2px;} 
</style></head> 
<body>< div>< input type = "button” value = "色相 模式 "id= "myBtnHue"/> 
< input type = "button" value = "亮度 模式 ”id = "myBtnLuminosity"/></div> 
<div class = "box"></div ></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,background-blend-mode 属性 用 于 定 
义 背 景 层 的 混合 模式 (图 片 与 颜色 ) 。$ (". box"). css("background-blend-mode"，"hue") 表 示 元 素 
背景 层 的 两 幅 图 像 以 色相 模式 混合 显示 ,色相 模式 在 混合 图 像 时 只 用 混合 色 颜色 的 色相 值 进行 着 色 ， 
而 使 饱和 度 和 亮度 值 保持 不 变 。$(". box"). css("background- blend-mode", "luminosity") 表 示 元 
素 背景 层 的 两 幅 图 像 以 亮度 模式 混合 显示 ,亮度 模式 在 混合 图 像 时 能 够 使 用 混合 色 颜 色 的 亮度 值 进 
行 着 色 ,而 保持 基色 颜色 的 饱和 度 和 色相 值 不 变 ,其 实 就 是 用 基色 中 的 色相 和 饱和 度 以 及 混合 色 的 亮 
度 创建 结果 色 。 

此 实例 的 源 文件 名 是 myHtmlB156. html。 


240 ”以 饱和 度 和 颜色 模式 混合 显示 背景 的 两 幅 图 像 


此 实例 主要 设置 元 素 的 background-blend-mode 属性 分 别 为 color 和 saturation, 从 而 实现 以 颜色 
和 饱和 度 模 式 混合 显示 背景 的 两 幅 图 像 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,两 幅 图 像 在 
未 混合 前 只 显示 一 幅 图 像 , 单 击 " 颜 色 模 式 ” 按 钮 . 则 两 幅 图 像 经 过 颜色 模式 混合 后 的 效果 如 图 240-1 
所 示 ; 单 击 “ 饱 和 度 模 式 ” 按 钮 , 则 两 幅 图 像 经 过 饱和 度 模式 混合 后 的 效果 如 图 240-2 所 示 。 有 关 此 实 
例 的 主要 代码 如 下 。 
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<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<script src= "js/jquery - 3.1.1.min. js"></script>< script language = "javascript"> 
$ (document). ready(function() { 
$ (" 间 myBtnColor").click(function() {// 颜 色 模 式 
$ (".box").css("background— blend — mode", "color"); }); 
$ ("#myBtnSaturation").click(function() {// 饱 和 度 模 式 
$ (".box").css("background - blend — mode", "saturation"); });}); 
</script> 
<style type= "text/css"> 
.box { width: 450px; height: 300px;border - radius: 10px;margin: 3px;background: url(img/B157A. jpg) 
no - repeat center, url(img/B157B. jpg) no - repeat center;} 
input { width: 219px;border - radius: 2px;padding: 3px; margin: 2px;} 
</style></head> 
<body>< div>< input type = "button” value = "颜色 模式 " id= "myBtnColor"/> 
< input type = "button”value = "人 饱和 度 模 式 "”id= "myBtnSaturation"/></div> 
<div class = "box"></div ></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,background-blend-mode 属性 用 于 定 
义 背 景 层 的 混合 模式 (图 片 与 颜色 )。$ (". box"). css("background-blend-mode"，"color") 表 示 元 素 
背景 层 的 两 幅 图 像 以 颜色 模式 混合 显示 ,颜色 模式 在 混合 图 像 时 能 够 使 用 混合 色 的 颜色 的 饱和 度 值 
和 色相 值 同时 进行 着 色 , 而 使 基色 的 颜色 的 亮度 值 保持 不 变 , 颜 色 模 式 可 以 看 成 是 饱和 度 模式 和 色相 
模式 的 综合 。$ (".box"). css("background -blend-mode"， "saturation" ) 表 示 元 素 背 景 层 的 两 幅 图 
像 以 饱和 度 模式 混合 显示 ,饱和 度 模式 的 作用 方式 与 色相 模式 相似 , 它 只 用 混合 色 的 颜色 的 饱和 度 值 
进行 着 色 ,而 使 色相 值 和 亮度 值 保 持 不 变 。 

此 实例 的 源 文件 名 是 myHtmlB157. html。 


241 ”以 正片 谷底 模式 混合 显示 背景 的 两 幅 图 像 


此 实例 主要 设置 元 素 的 background-blend-mode 属性 为 multiply, 从 而 实现 以 正片 释 底 模式 混合 
显示 背景 的 两 幅 图 像 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,两 幅 图 像 在 未 混合 前 只 显示 一 
幅 图 像 , 单 击 * 以 正片 琶 底 模式 混合 显示 背景 的 两 幅 图 像 " 按 钮 , 则 两 幅 图 像 经 过 正片 释 底 模式 混合 后 
的 效果 如 图 241-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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<!doctype html >< html ><head >< meta charset = "UTF - 8"> 
<script src= "js/jquery - 3.1.1.min. js"></script>< script language = "javascript"> 
$ (document). ready(function() { 
$ ("myBtnMultiply").click(function() {// 以 正片 释 底 模式 混合 显示 背景 的 两 幅 图 像 
$(".box").css("background— blend— mode", "multiply"); });}); 
</script >< style type= "text/css"> 
.box {width: 400px; height: 250px; border - radius: 10px;margin: 3px;background: url( img/B158A. jpg) 
no - repeat center，url( img/B158B. jpg) no - repeat center;} 
input { width: 400px;border - radius: 2px;padding: 3px;margin: 2px;} 
</style></head> 
<body > < div > < input type = "button” value = "以 正片 全 底 模式 混合 显示 背景 的 两 幅 图 像 ”id = 
"myBtnMultiply"/></div>< div class = "box"></div></body ></html > 





上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,background-blend-mode 属性 用 于 定 
义 背 景 层 的 混合 模式 (图 片 与 颜色 )。$(". box"). css("background-blend-mode", "mnultiply") 表 示 
元 素 背 景 层 的 两 幅 图 像 以 正片 释 底 模式 混合 显示 ,正片 释 底 模式 在 混合 图 像 时 将 查看 每 个 通道 的 颜 
色 信 息 , 选 择 基 色 或 混合 色 复 合 ,结果 色 通常 比 源 或 目标 的 颜色 暗 ,任何 颜色 和 黑色 相 乘 都 得 到 黑色 ， 
任何 颜色 和 白色 相 乘 都 会 保留 原来 的 颜色 。background-blend-mode 属性 的 默认 值 是 normal, 采 用 该 
混合 模式 的 混合 色 的 像素 会 透 过 所 用 的 颜色 显示 出 来 。 

此 实例 的 源 文件 名 是 myHtmlB158. html。 


242 ”以 多 种 混合 模式 混合 显示 背景 的 多 幅 图 像 


此 实例 主要 在 元 素 的 background-blend-mode 属性 中 设置 多 种 混合 模式 值 ,从 而 实现 多 幅 背 景 图 
像 以 多 种 混合 模式 处 理 后 的 特效 显示 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,3 幅 背景 图 像 在 
未 混合 前 只 显示 一 幅 图 像 , 单 击 * 滤 色 模式 "按钮 , 则 背景 图 像 经 过 滤 色 模式 混合 后 的 效果 如 图 242-1 所 
示 ; 单 击 * 颜 色 模式 "按钮 , 则 背景 图 像 经 过 颜色 模式 混合 后 的 效果 如 图 242-2 所 示 ; 单 击 * 滤 色 模 式 
和 颜色 模式 "按钮 , 则 背景 图 像 经 过 这 两 种 模式 混合 后 的 效果 如 图 242-3 所 示 。 有 关 此 实例 的 主要 代 
码 如 下 。 
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<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<script src= "js/jquery- 3.1.1.min. js"></script >< script language = "javascript"> 
$ (document). ready(function() { 
$ ("#myBtnScreen").click(function() {// 滤 色 模 式 
$(".box").css("background— blend— mode", "screen"); }); 
$ ("myBtnColor").click(function() {// 颜 色 模 式 
$ (".box").css("background - blend - mode", "color"); }); 
$ ("#myBtnMulti").click(function() {// 滤 色 模式 和 颜色 模式 
//$ (".box").css("background - blend - mode", "screen,color, hard— light"); 
$ (".box").css("background - blend - mode", "screen, color"); });}); 
</script> 
<style type= "text/css"> 
.box {width: 450px; height: 300px; border — radius: 10px; margin: 3px; 
background - image: url(img/B153A. jpg), radial - gradient (circle at center, rgb(220, 75, 200), 
rgb(0, 0, 75)), url( img/B153B. jpg);} 
button {width: 142px; padding: 3px; margin: 2px;} 
</style></head> 
<body>< div>< button id = "myBtnScreen"> 滤 色 模 式 </button> 
<button id = "myBtnColor"> 颜 色 模 式 </button > 
<button id = "myBtnMulti"> 滤 色 模式 和 颜色 模式 </button></div> 
<div class = "box"></div></body></html > 





上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,background-blend-mode 属性 用 于 定 
义 背 景 层 的 混合 模式 (图 片 与 颜色 ) 。$(".box"). css("background-blend-mode", "color") 表 示 元 素 
背景 层 的 图 像 以 颜色 模式 混合 显示 ,颜色 模式 在 混合 图 像 时 能 够 使 用 混合 色 的 颜色 的 饱和 度 值 和 色 
相 值 同时 进行 着 色 , 而 使 基色 的 颜色 的 亮度 值 保持 不 变 ,颜色 模式 可 以 看 成 是 饱和 度 模式 和 色相 模式 
的 综合 效果 。$(".box"). css("background- blend-mode","screen") 表 示 元 素 背 景 层 的 图 像 以 滤 色 
模式 混合 显示 ,在 采用 滤 色 模式 混合 图 像 时 将 查看 每 个 通道 的 颜色 信息 ,并 将 混合 色 的 互补 色 复 合 ， 
结果 总 是 较 亮 的 颜色 ,任何 颜色 和 白色 进行 滤 色 都 得 到 白色 ,任何 颜色 和 黑色 进行 滤 色 都 会 保留 原来 
的 颜色 。$(". box"). css("background-blend-mode". "screen ,color") 表 示 元 素 背景 层 的 图 像 以 滤 色 
模式 和 颜色 模式 综合 处 理 后 显示 。 需 要 说 明 的 是 .如 果 background- blend-mode 属性 值 有 两 种 混合 
模式 , 则 background-image 属性 值 应 该 有 3 幅 图 像 ; 如 果 background-blend-mode 属性 值 有 3 种 混合 











HTML5+CSS3 炫 酷 应 用 实例 集锦 


模式 , 则 background-image 属性 值 应 该 有 4 幅 图 像 .以 此 类 推 。background-blend-mode 属性 支持 的 
混合 模式 有 normal、 multiply、 screen、 overlay、 darken, lighten、 color-dodge、 color-burn、 hard-light 、 
soft-light difference .exclusion .hue saturation ,color ,luminosity, 其 中 每 一 种 混合 模式 都 有 其 各 自 的 
计算 模式 。 

此 实例 的 源 文件 名 是 myHtmlB161. html。 


243 ”使 用 铁 空 技术 为 png 背景 图 标 设置 颜色 


此 实例 主要 使 用 png 图 标 来 设置 元 素 的 background-image 属性 ,并 同时 设置 元 素 的 background- 
color 属性 ,从 而 实现 使 用 background-color 属性 指定 的 颜色 来 显示 background-image 属性 指定 的 
png 图 标 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,使 用 红色 显示 的 png 图 标 如 图 243-1 所 示 。 
使 用 绿色 显示 的 png 图 标 如 图 243-2 所 示 , 当然 可 以 通过 单 击 “ 更 改 图 标 颜 色 : ”按钮 选择 不 同 的 颜色 
来 定制 不 同 颜色 的 图 标 。 有 关 此 实例 的 主要 代码 如 下 。 
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<! doctype html >< html >< head >< meta charset = "UTF - 8"> 
< script src= "js/jquery -3.1.1.min. js"></script>< script language = "javascript"> 
$ (document). ready(function() { 
$ ("#myColorDlg").change( function() { 
var myIcons = document. get ElementsByTagName( "i"); 
var i=0, 1= myIcons. length; 
for (; i<l; i+=1) { 
myIcons[ i]. style. backgroundColor = this. value; 
} D2}); 
</script> 
< style type= "text/css"> 
.icon { display: inline~ block; width: 16px; height: 20px; 
background - image: url(img/B164.png); background - color: #34538B; } 
. iconl { background ~ position: 0 0; } 
. icon2 { background - position: ~ 20px 0;} 
. icon3 { background ~ position: — 40px 0; } 
</style></head> 
<body>< center > 更 改 图 标 颜 色 : 
< input id = "myColorDlg" type= "color" value = "#34538B" autocomplete= "off"> 
<p><iclass="icon icon1"></i><a href =" 井 井 "> 返回 </a> 
<iclass= "icon icon2"></i><a href =" 井 井 "> 刷新 </a> 
<iclass="icon icon3"></i><ahref ="# 井 "> 收藏 </a></p></center> 
</body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 .mylcons[i]. style。backgroundColor 一 
this. value 用 于 设置 每 个 图 标的 背景 颜色 : background-image: url(img/B164. png) 用 于 设置 每 个 图 
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标的 背景 图 像 ,由 于 这 种 png 图 像 不 是 实心 ( 即 猴 空 ) 的 ,所 以 默认 的 码 加 机 制 会 将 background-color 
属性 指定 的 颜色 作用 于 background-image 属性 指定 的 png 图 标 上 。 需 要 说 明 的 是 , 当 在 JS 代码 中 操 
作 background-color 这 种 带 有 ”- ”符号 的 属性 时 ,往往 需要 去 掉 “- 符 号 。 

此 实例 的 源 文件 名 是 myHtmlB164. html。 


244 以 绝对 定位 实现 背景 模糊 .前 景 清晰 的 特效 


此 实例 主要 设置 position 属性 为 absolute 并 使 用 模糊 滤 镜 ,从 而 实现 背景 模糊 .前 景 清晰 的 特 
效 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,背景 显示 的 是 模糊 的 图 像 ,文字 则 以 清晰 的 方式 显 
示 , 如 图 244-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<style type= "text/css"> 
.myBlur { background - image: url(img/B196. jpg); position: absolute; 
width: 400px; height: 250px; - webkit ~ filter: blur(8px); } 
.myContent { position: absolute; width: 400px;height: 250px; 
font - size: 20px; color: white;text — align: center; } 
img{ width: 50px; height:50px;} 
</style></head> 
<body>< div class = "myBlur"></div> 
<div class = "myContent">< img src = "img/B209A. png"> 
<p> 曾 经 沧海 难为 水 ,</p><p > 除却 巫山 不 是 云 。</p> 
<p> 取 次 花丛 懒 回顾 , </p><p> 半 缘 修 道 半 缘 君 。</p></div></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 .position: absolute 表示 生成 绝对 定 
位 的 元 素 , 该 元 素 相 对 于 static( 默 认 值 ) 定 位 以 外 的 第 一 个 父 元 素 进行 定位 ,因此 元 素 的 位 置 通常 应 
该 通过 left top \right 以 及 bottom 属性 进行 规定 ; -webkit-filter: blur(8px) 表 示 以 8px 的 模糊 半径 
模糊 图 像 。 该 实例 采用 了 两 个 div 元 素 ,一 个 模糊 的 div 元 素 用 于 背景 , 另 一 个 div 元 素 用 于 前 景 , 即 
将 前 景 div 元 素 直 接生 加 在 模糊 的 div 元 素 上 (这 是 因为 两 个 div 均 设置 了 position: absolute) 。 

此 实例 的 源 文件 名 是 myHtmlB251. html。 


245 ”使 用 transition 属性 平滑 地 旋转 图 像 

此 实例 主要 在 CSS 样式 中 设置 元 素 的 transition 属性 ,从 而 使 图 像 在 指定 的 时 间 内 旋转 指定 的 角 
度 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,图 像 在 0 时 状态 如 图 245-1 所 示 ; 当 鼠 标 指 针 悬 浮 
在 图 像 上 时 , 则 图 像 将 在 5 秒 内 以 线性 过 渡 的 方式 从 0 旋转 到 270 ,如 图 245-2 所 示 。 有 关 此 实例 的 





主要 代码 如 下 。 
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图 245-1 





<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
< style type = "text/css"> 
img{ position: absolute; margin: 10px;transition: transform 5s linear;} 
div:hover img{position: absolute; transform: rotate(270deg);} 
</style></head> 


<body>< div>< img src = "img/B065. jpg"/></div></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,transition: transform 5s linear 用 于 
设置 图 像 在 5 秒 内 以 线性 过 渡 方式 执行 transform 所 定义 的 操作 (此 实例 是 旋转 270 )。CSS3 的 
transition 允许 属性 值 在 一 定 的 时 间 内 平滑 地 过 渡 . 这 种 效果 可 以 在 鼠标 单 击 、 获 得 焦点 ,被 单 击 或 对 
元 素 的 任何 改变 中 触发 ,并 平滑 地 以 动画 效果 改变 属性 值 。transition 的 语法 格式 如 下 。 
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transition: [<'transition - property'> || <'transition- duration'> 

|| <'transition - timing ~ function'> || <'transition- delay'> 

[, [<'transition - property'> || <'transition - duration'> || 

<'transition - timing - function'> || <'transition- delay'>]] * 

从 以 上 可 以 看 出 ,transition 主要 包含 4 个 属性 值 , 即 transition-property (执行 变换 的 属性 )、 
transition-duration( 变 换 延 续 的 时 间 ) transition-timing-function( 在 延续 时 间 段 变换 的 速率 变化 )、 
transition-delay( 变 换 延 迟 时 间 ) 。 

transition-property 属性 值 用 来 指定 当 元 素 的 一 个 属性 改变 时 执行 transition 效果 ,主要 的 值 为 
none( 没 有 属性 改变 ) ,all( 所 有 属性 改变 ,这 也 是 其 默认 值 ) ident( 元 素 属 性 名 )。 当 ident 值 为 none 
时 ,transition 马上 停止 执行 ; 当 ident 值 指定 为 all 时 , 则 元 素 的 任何 属性 值 产 生变 化 时 都 将 执行 
transition 效果 ,ident 是 可 以 指定 的 元 素 的 某 一 个 属性 值 。ident 对 应 的 类 型 如 下 。 

(1) color: 通过 红 、 绿 . 蓝 和 透明 度 组 件 变换 ,例如 border-color、background-color、 color、outline- 
color 等 属性 。 

(2) length: 真实 的 数字 , 例如 word-spacing、 width、 vertical-align、 top、 right、 bottom、 left、 
padding .outline-width、margin、min-width min-height、 max-width、 max-height, line-height, height 、 
border-width、border-spacing ,background-position 等 属性 。 

(3) percentage: 真实 的 数字 ,例如 word-spacing、width vertical-align、 top ,right bottom、 left、 
min-width .min-height .max-width、max-height ,line-height ,height、background-position 等 属性 。 

(4) integer: 离散 步骤 (整个 数字 ) ,在 真实 的 数字 空间 以 及 使 用 floor() 转 换 为 整数 时 发 生 ,例如 
outline-offset、z-index 等 属性 。 

(5) number:( 浮 点 型 ) 数 值 ,例如 zoom .opacity ,font-weight 等 属性 。 

(6) transform list: 对 元 素 进行 旋转 \ 缩 放 ,移动 或 倾斜 等 。 

(7) rectangle: 通过 x、y、width 和 height( 转 为 数值 ) 变 换 , 例 如 crop。 

(8) visibility: 离散 步骤 ,在 0 到 1 数字 范围 之 内 ,0 表示 隐藏 ,1 表示 完全 显示 ,例如 visibility 。 

(9) shadow: 作用 于 color、x、y 和 blur( 模 糊 ) 属 性 ,例如 text-shadow 。 

(10) gradient: 通过 每 次 停止 时 的 位 置 和 颜色 进行 变化 。 它 们 必须 有 相同 的 类 型 (放射 状 的 或 者 
线性 的 ) 和 相同 的 停止 数值 ,以 便 执行 动画 .例如 background-image。 

(11) paint server(SVG): 只 支持 从 gradient 到 gradient 以 及 从 color 到 color, 之 后 的 工作 与 上 
面 类 似 。 
(12) space-separated list of above: 如 果 列 表 有 相同 的 项 目 数值 , 则 列表 中 的 每 一 项 按照 上 面 的 
规则 进行 变化 ,否则 无 变化 。 

(13) a shorthand property: 如 果 缩 写 的 所 有 部 分 都 可 以 实现 动画 , 则 像 所 有 单个 属性 变化 一 样 
变化 。 
transition-duration 属性 值 用 来 指定 元 素 转换 过 程 的 持续 时 间 , 取 值 < time > 为 数值 ,单位 为 8 
( 秒 ) 或 者 ms( 毫 秒 ) ,可 以 作用 于 所 有 元 素 , 包 括 :before 和 :after 伪 元 素 。 其 默认 值 是 0, 也 就 是 变换 
是 即时 的 。 

transition-timing-function 属性 值 允 许 根 据 时 间 的 推进 去 改变 属性 值 的 变换 速率 , transition- 
timing-function 有 以 下 6 个 可 能 值 。 

(1) ease: 逐渐 变 慢 ,默认 值 ,ease 函数 等 同 于 贝 塞 尔 曲线 (0. 25, 0. 1, 0. 25, 1. 0) 。 

(2) linear: 匀速 ,linear 函数 等 同 于 贝 塞 尔 曲 线 (0.0, 0.0. 1.0, 1.0)。 

(3) ease-in: 加 速 ,ease-in 函数 等 同 于 贝 塞 尔 曲线 (0.42. 0, 1.0, 1.0)。 

(4) ease-out: 减速 ,ease-out 函数 等 同 于 贝 塞 尔 曲 线 (0. 0, 0. 58, 1. 0)。 
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(5) ease-in-out: 加 速 然 后 减速 ,ease-in-out 函数 等 同 于 贝 塞 尔 曲线 (0. 42. 0. 0.58, 1.0) 。 

(6) cubic-bezier: 该 值 允 许 自 定义 一 个 时 间 曲 线 ,特定 的 cubic-bezier 曲线 。(x1. y1，x2，y2) 特 
定 于 曲线 上 的 点 Pl 和 点 P2。 所 有 值 需要 在 [0, 1] 区 域内 ,否则 无 效 。 

transition-delay 属性 值 用 来 指定 一 个 动画 开始 执行 的 时 间 , 也 就 是 说 当 改变 元 素 属 性 值 后 多 长 
时 间 开 始 执行 transition 效果 ,其 取 值 < time > 为 数值 .单位 为 s( 秒 ) 或 者 ms( 毫 秒 ) ,其 使 用 和 
transition-duration 极其 相似 ,也 可 以 作用 于 所 有 元 素 . 包 括 before 和 after 选择 器 。 其 默认 大 小 是 0， 
也 就 是 变换 立即 执行 ,没有 延迟 。 

此 实例 的 源 文 件 名 是 myHtmlB065. html。 


246 使 用 transition 属性 移动 和 旋转 图 像 


此 实例 主要 在 元 素 (img) 的 transition 属性 中 设置 多 个 动作 属性 值 ,从 而 使 图 像 在 指定 的 时 间 内 
同时 实现 旋转 和 移动 的 动作 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,电话 机 图 像 的 初始 状态 
在 左上 角 ; 当 鼠 标 指针 悬浮 在 电话 机 图 像 上 时 , 则 电话 机 图 像 立 即 执行 旋转 和 移动 的 动作 ,如 图 246-1 所 
示 , 并 在 指定 的 时 间 内 移动 到 右 下 角 , 如 图 246-2 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 246-1 


<!doctype html ><html >< head >< meta charset = "UTF - 8"> 
<style type= "text/css"> 
div {background — image: url("img/a050A. jpg"); width: 400px; height: 250px;} 
img {position: absolute; top: 10px;left: 20px; 
transition: left 5s linear, top 5s linear, transform 3s ease— in— out;} 
div:hover img {position: absolute; left: 290px;top: 140px; 
transform: rotate(360deg);} 
</style></head> 
<body><div>< img src ="img/BO66A. png"/></div></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,transition: left 5s linear, top 5s 
linear， transform 3s ease-in-out 负责 完成 过 渡 动 画 的 移动 和 旋转 动作 .其 中 的 transform 是 指 rotate 
(360deg) 这 个 旋转 动作 ,移动 操作 指 元 素 的 left 值 从 20 移动 到 290 top 值 从 10 移动 到 140 ,linear 表 
示 移 动 过 程 是 匀速 ,ease-in-out 表示 旋转 过 程 是 先 加 速 后 减速 。 

此 实例 的 源 文 件 名 是 myHtmlB066. html。 
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247 ”使 用 transition 属性 实现 图 像 的 膨胀 


此 实例 主要 在 CSS 样式 中 设置 元 素 的 transition 属性 .从 而 使 图 像 在 指定 的 时 间 内 放大 到 预定 
的 比例 ,以 产生 膨胀 特效 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,最初 的 图 像 如 图 247-1 所 
示 ; 当 鼠 标 指针 悬浮 在 图 像 上 时 , 则 图 像 将 逐渐 膨胀 ,如 图 247-2 所 示 。 有 关 此 实例 的 主要 代码 
如 下 。 
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<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<style type= "text/css"> 
div{ width: 400px; height: 250px; overflow: hidden;border - radius: 3px; } 
img {transition: all 3s ease - in- out;} 
img:hover {transform: scale(1.9);} 
</style></head> 
<body>< div>< img src = "img/B196. jpg" /></div></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,transition: all 3s ease-in-out 用 于 设 
置 图 像 在 3 秒 内 以 ease-in-out 过 渡 方式 执行 所 有 变更 ,此 处 即 是 transform 所 定义 的 操作 ,所 以 此 行 
代码 修改 为 transition: transform 3s ease-in-out 也 能 实现 相同 的 效果 ; transform: scale(1.9) 用 于 将 
图 像 放大 1. 9 倍 ; overflow: hidden 用 于 实现 当 放 大 的 图 像 超出 div 盒子 的 宽度 和 高 度 时 自动 隐藏 超 
出 部 分 ,所 以 给 人 的 错觉 是 在 膨胀 而 不 是 在 放大 。 

此 实例 的 源 文件 名 是 myHtmlB196. html。 


248 ”使 用 transition 属性 实现 侧 滑 工具 栏 


此 实例 主要 在 CSS 样式 中 设置 元 素 的 transition 属性 ,从 而 实现 在 页 面 右 侧 布 局 滑动 工具 栏 按 
钮 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,在 页 面 右 侧 的 绿色 工具 栏 上 有 3 个 按钮 ,如果 鼠标 
指针 悬浮 在 第 一 个 按钮 上 , 则 将 向 左 滑 出 说 明文 字 . 如 图 248-1 所 示 ; 如 果 鼠 标 指针 悬浮 在 第 二 个 按 
钮 上 ,也 将 向 左 滑 出 说 明文 字 , 如 图 248-2 所 示 ; 如 果 鼠 标 指针 悬浮 在 第 三 个 按钮 上 .也 将 向 左 滑 出 说 
明文 字 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 248-1 图 248-2 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<script src= "js/jquery -3.1.1.min.js"></script >< script language = "javascript"> 
$ (function() { 
$ ('.button'). hover(function() { 
$ (this). find( 'p').addClass("button - hover" ); 
}, function() { 
$ (this). find( 'p'). removeClass("button — hover"); 
DD;}); 
</script > 
<style type= "text/css"> 
body { background:url( img/B209D. jpg) ;background — size:cover; } 

/* 在 页 面 右 侧 设 置 工具 栏 */ 

.toolbar { position: absolute; right: Opx; top: Opx; width: 35px; height: 100%; 

border - right: 3px solid green; background ~ color: transparent; } 

/* 设 置 按 钮 盒子 * / 

.myBox { position: absolute;top: 50% ; left: Opx;width: 35px; margin - top: — 61px;} 

/* 设 置 按 钮 样式 * / 

.button {position: relative; width: 35px; height: 35px; margin - bottom: 1px; 
cursor : pointer;background— color: green; border — radius: 3px 0px Opx 3px; 
font: 12px/150 % Arial, Verdana, "宋体 ";display: inline - block; } 

/* 设 置 按钮 左 侧 的 文字 * / 

Pp { width: 92px; height: 35px; line— height: 35px; font— style: normal; 
text - align: center; font - family: "微软 雅 黑 "; position: absolute; 
z- index: 1; left: 35px;top: 0px; background - color: green; color: white; 
border - radius: 3px 0px Opx 3px; margin: Opx; padding: Opx; cursor: pointer; 
transition: left 0.3s ease— in~ out;} 

img{ margin: 2px; } 


/x 滑动 当 前 按钮 左 侧 的 位 置 */ 
.button - hover { left: - 90px; background - color: red;} 
</style></head> 


<body><div class = "toolbar">< div class = "myBox"> 
<div class = "button"><p> 罗 曼 蒂 克 消亡 史 </p> 
< img src = "img/B209A. png" width = "32" height = "32"/></div> 
<div class = "button"><p> 我 不 是 潘 金莲 </p> 
< img src = "img/B209B. png” width = "32”height = "32"/></div> 
<div class= "button"><p> 疯 针 动 物 城 </p> 
< img src= "img/B209C. png”width = "32" height = "32"/></div></div></div> 
</body></html> 
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上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,transition: left 0. 3s ease-in-out 用 于 
实现 按钮 左 侧 文字 在 0. 3 秒 内 以 ease-in-out 过 渡 方 式 将 left 属性 值 从 35px 改变 为 一 90px, 背 景 颜色 
也 设置 为 红色 。 

此 实例 的 源 文件 名 是 myHtmlB209. html。 


249 使 用 transition 属性 高 仿 toggle 开关 


此 实例 主要 在 CSS 样式 中 设置 checkbox 的 transition 属性 ,从 而 实现 高 仿 toggle 开关 的 切换 效 
果 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 , 单 击 toggle 开关 的 左 端 ,白色 圆圈 将 从 右 端 滑 到 左 
端 ,并 变 为 黄色 圆圈 ,如 图 249-1 所 示 ; 单 击 toggle 开关 的 右 端 ,黄色 圆圈 将 从 左 端 滑 到 右 端 ,并 变 为 
白色 圆圈 ,如 图 249-2 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 














百 一 口 x 百 一 口 x 
D myHtml8211 .html x \ D myHtmle211 .html x Ss 
全 3 G Dfiley//D/myWorkW/myHtm 窑 三 ‘3 C Dfile///D/myWork/myHtm 字 | 三 
是 否 允许 非 朋友 浏览 朋友 图 ，C 寻 是 否 允许 非 朋友 浏览 朋友 回 : 往 [ ) 





图 249-1 图 249-2 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<style type = "text/css"> 
/* 设 置 左 滑 槽 样式 * / 
input[type ='checkbox']. toggle { display: inline— block; outline: none; 
— webkit - appearance: none;width: 55px; height: 28px; top:10px; 
background - color: green; position: relative; 
— webkit — border - radius: 28px; - webkit — transition: all 0.2s ease 
-in-out;} 
/* 设 置 左 滑 圆 的 样式 * / 
input[type = 'checkbox'].toggle:after { content: ''; position: absolute; 
display: inline - block; width: 24px; height: 24px; top: 2px; 
left: 2px; 
background - color: yellow; — webkit ~ border ~- radius: 50%; 
— webkit — transition: all 0.2s ease — in— out; } 
/* 设 置 右 滑 槽 样式 * / 
input[type = 'checkbox'] :checked. toggle { - webkit- box— shadow: inset 0 0 0 15px darkcyan; } 
/* 设 置 右 滑 圆 的 样式 * / 
input[ type = 'checkbox'] :checked. toggle:after { left: 29px; 
background - color: white; } 
</style></head> 
<body>< div> 是 否 人 允许 非 朋 友 浏 览 朋 友 圈 : < input class = 'toggle' type = "checkbox" checked = 'checked'/> 
</div></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,两 个 相同 的 -webkit- transition: all 
0.2s ease-in-out 主要 用 于 选中 或 未 选中 状态 下 在 0. 2 秒 内 以 ease-in-out 过 渡 方 式 改变 圆圈 的 位 置 和 
颜色 以 及 滑 槽 的 颜色 。 

此 实例 的 源 文 件 名 是 myHtmlB211. html。 
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250 ”使 用 transition 属性 旋转 菜单 指示 符 


此 实例 主要 在 CSS 样式 中 设置 菜单 项 右 侧 的 三 角形 箭头 指示 符 的 transition 属性 ,从 而 实现 在 向 
上 \ 向 下 切换 指示 箭头 时 出 现 旋转 动画 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,“ 渝 北 区 人 民 
政府 ”菜单 右 侧 显 示 的 是 箭头 向 下 的 三 角形 .使 用 鼠标 单 击 该 菜单 项 , 则 将 展开 该 菜单 项 的 二 级 菜单 ， 
同时 右 侧 显 示 的 箭头 向 下 的 三 角形 将 逆 时 针 旋 转 180”, 变 为 箭头 向 上 的 三 角形 ,如 图 250-1 所 示 ; 使 
用 鼠标 再 次 单 击 该 菜单 项 , 则 将 折 秋 该 菜单 项 的 二 级 菜单 .同时 右 侧 显示 的 箭头 向 上 的 三 角形 将 顺 时 
针 旋 转 180, 变 为 箭头 向 下 的 三 角形 。 单 击 其 他 菜单 项 将 实现 类 似 的 效果 。 有 关 此 实例 的 主要 代码 
如 下 。 
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图 250-1 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<style type = "text/css"> 
body { font — family: "Lato", Helvetica, Arial;font— size: 16px; } 
.myBox { width: 350px; } 
/x* 去掉 默认 的 列表 样式 * / 
.myBox > ul { list— style: none; } 
/x* 去 掉 下 夯 线 */ 
.dropdown a { text - decoration: none;} 
/* 设 置 一 级 菜单 的 样式 * / 
. dropdown [data - toggle = "dropdown"] { position: relative; display: block; 
color: white;background: lightseagreen; padding: 10px; 
border - radius: 3px; margin - bottom: lpx; } 
/* 设 置 一 级 菜单 的 悬浮 颜色 * / 
.dropdown [data - toggle = "dropdown" ] :hover {background: darkblue;} 
/* 设置 右 侧 的 三 角形 指示 符 的 样式 * / 
.dropdown . icon - arrow { position: absolute; display: block; font - size: 18px; 
color: #FFF;top: 10px;right: 10px; } 
/* 反 转 三 角形 指示 符 * / 
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.dropdown . icon - arrow. open { — webkit - transform: rotate( - 180deg); 
— webkit - transition: — webkit- transform 1s;} 
/=* 三 角形 指示 符 复位 * / 
. dropdown . icon - arrow. close { — webkit — transform: rotate(0deg); 
— webkit — transition: —webkit— transform 1s;} 
/* 设 置 三 角形 指示 符 * / 
. dropdown . icon - arrow:before { content: '\25BC'; } 
/* 设 置 二 级 菜单 */ 
.dropdown .dropdown— menu { max — height: 0; overflow: hidden; 
list— style: none; padding: 0;margin: 0; font - size: 14px; } 
/x* 设 置 二 级 菜单 项 x / 
.dropdown .dropdown— menu li a { display: block; color: black; background: cyan; 
padding: 10px 10px; margin - bottom: 1px; border — radius: 3px;} 
/* 设 置 二 级 菜单 项 的 悬浮 颜色 */ 
. dropdown .dropdown - menu li a:hover { background: red; } 
. dropdown .show, .dropdown .hide { — webkit- transform— origin: 50% 0%;} 
/* 显 示 二 级 菜单 */ 
.dropdown .show { display: block; max- height: 9999px; 
— webkit — transform: scaleY(1); — webkit— transition: max - height 0. 1s ease— in— 
out; } 
/* 隐藏 二 级 菜单 * / 
. dropdown .hide { max- height: 0; - webki 让 -transform: scaleY(0); 
— webkit — transition: max— height 0.1s ease— out; } 
</style></head> 
<body>< div class = "myBox"><ul ><1i class= "dropdown"> 
<a href ="#"”data- toggle= "dropdown"> 渝 北 区 人 民政 府 <i class = "icon- arrow"> </i></a> 
<ul class = "dropdown - menu"> 
<1i><ahref ="#" 渝 北 区 民政 局 </a></li><1li><a hreft=" 井 "> 渝 北 区 财政 局 </a></1i> 
<1i><a href =" 间 "> 龙山 街道 办 事 处 </a></1i><1i><a href="#"> 回 兴 街道 办 事 处 </a> 
</1i> 
<1i><ahref="#"> 双 龙 街道 办 事 处 </a></1i></ul></1i> 
<1i class = "dropdown"> 
<a href ="#"”data- toggle= "dropdown"> 长 寿 区 人 民政 府 <i class = "icon 一 arrow"> </i></a> 
<ul class = "dropdown - menu"> 
<1i><ahref="#" 长 寿 区 环保 局 </a></1i><1i><a href ="#"> 长 寿 区 移民 局 </a></1i> 
<li><a href ="#"> 风 城 街道 办 事 处 </a > </1li ><1i><a href ="#"> 江 南 街道 办 事 处 </a> 
</1i></ul></1i> 
<1i class = "dropdown"> 
<a href="#"”data- toggle= "dropdown"> 江 北 区 人 民政 府 <i class = "icon - arrow"> </i></a> 
<ul class = "dropdown - menu"> 
<1li><a href ="#"> 江 北 区 审计 局 </a></1i><1i><a href ="#"> 五 里 店 街 道 办 事 处 </a> 
</1i> 
<1i><a href =" 间 "> 观音 桥 街道 办 事 处 </a></1i></u1></1i></ul></div> 
<script> 
var dropdown = document. querySelectorAll( '. dropdown' ); 
var dropdownArray = Array. prototype. slice.call( dropdown, 0); 
dropdownArray. forEach(function(el) { 
var button = el.querySelector( 'a[data- toggle = "dropdown"]'), 
menu = el. querySelector( '. dropdown — menu' ), 
arrow = button. querySelector( 'i. icon - arrow' ); 
button. onclick = function(event) { 
if (!menu. hasClass('show')) { 
menu. classList.add( 'show'); menu. classList. remove( 'hide' ); 
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arrow. classList. add( ‘open' ) ; arrow. classList. remove('close'); 
event. preventDefault( ); 
} else{ 
menu. classList. remove( 'show') ; menu. classList. add( 'hide'); 
arrow. classList. remove( 'open'); arrow. classList.add( 'close'); 
event. preventDefault(); 
13;}) 
Element. prototype. hasClass = function(className) { 
return this. className && new RegExp("(^|\\s)" + className+ "(\\s| $ )"). test(this. className); }; 
</ script ></body ></html > 





上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,两 个 相同 的 -webkit- transition:- 
webkit-transform 1s 主要 用 于 单 击 一 级 菜单 时 在 1 秒 内 以 顺 时 针 或 逆 时 针 的 方式 旋转 右 侧 的 三 角形 
指示 符 。 实 际 上 ,以 顺 时 针 或 道 时 针 的 方式 旋转 右 侧 的 三 角形 指示 符 是 通过 -webkit-transform: 
rotate(0deg ) 或 -webkit-transform: rotate( 一 180deg) 代 码 完成 的 .如果 没有 -webkit-transition: - 
webkit-transform 1s 这 行 代码 ,用户 就 看 不 见 三 角形 箭头 指示 符 的 上 下 切换 过 程 ,没有 那 种 动感 炫 酷 
的 效果 。 

此 实例 的 源 文件 名 是 myHtmlB212. html。 


251 使 用 transition 属性 高 仿 纸张 卷 边 


此 实例 主要 通过 transition 属性 动态 绘制 渐变 色 背 景 , 从 而 实现 动态 变化 纸张 边 角 卷 边 的 特效 。 
当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,如 果 和 鼠标 指针 悬浮 在 图 像 上 , 则 图 像 的 左上 角 开 始 卷 
边 , 如 图 251-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 251-1 


<!doctype html >< html >< head >< meta charset = UTF -8> 
< style type = "text/css"> 
.myImg { margin: .4em; padding: lem; background: # ECECEC; 
color: #666; border - radius: 2px; } 
.curl - top - left { display: inline - block; position: relative; } 
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.curl - top - left:before { position: absolute; content: ''; 
height: Opx; width: Opx; top: 0; left: 0; background: 
linear ~ gradient(135deg, white 45%, #AAA 50%, #CCC 56%, white 80%); 
transition: all ls ease— in— out } 
/* 设 置 卷 角 大 小 */ 
-curl - top - left:hover:before { width: 45px; height: 45px; } 
</style></head> 
<body>< center ><a class= "myImg curl - top— left"> < img src = "img/B222. jpg"></a> 
</center ></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,transition: all 1s ease-in-out 主要 用 
于 在 鼠标 指针 悬浮 于 图 像 或 离开 图 像 时 展开 或 收缩 卷 边 的 渐变 背景 , 即 卷 边 的 这 种 特效 本 质 上 就 是 
一 幅 大 小 通过 过 渡 动 画 进行 变化 的 渐变 背景 ; background: linear-gradient(135deg, white 45%，# 
AAA 50%，,#CCC 56% ,white 80%) 用 于 根据 预 园 的 宽度 和 高 度 按照 比例 绘制 渐变 背景 。 

此 实例 的 源 文件 名 是 myHtmlB222. html。 


252 ”使 用 transition 属性 实现 悬空 阴影 


此 实例 主要 通过 transition 属性 动态 改变 椭圆 阴影 的 透明 度 ,从 而 实现 为 图 像 创 建 悬空 的 阴影 。 
当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,如 果 鼠 标 指针 悬浮 在 图 像 上 , 则 图 像 将 悬空 在 椭圆 阴影 
的 上 方 , 如 图 252-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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<!doctype html >< html >< head >< meta charset = UTF -8> 
< style type = "text/css"> 
.myShadow { margin: .4em; padding: lem; } 
.hover - shadow { display: inline- block; position: relative; } 
.hover - shadow: before { pointer - events: none; position: absolute; 
content: ''; top: 100% ; left: 5%; height: 20px; width: 85% ; opacity: 0; 
background: radial - gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%); 
transition: opacity 0.3s ease— in— out; } 
. hover - shadow: hover: before { opacity: 0.8; } 
</style></head> 
<body>< center ><a class= "myShadow hover — shadow">< img src = "img/B209A. png"></a> 
</center ></body ></html > 
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上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,transition: opacity 0. 3s ease-in-out 
主要 用 于 在 鼠标 指针 悬浮 于 图 像 或 离开 图 像 时 通过 改变 透明 度 (0 至 0. 8) 逐 渐 显示 或 隐藏 椭圆 形 的 
渐变 背景 , opacity 属性 值 为 0.0 表示 完全 透明 ,opacity 属性 值 为 1. 0 表示 完全 不 透明 ; background: 
radial-gradient(ellipse at center, rgba(0, 0, 0, 0. 35) 0%, rgba(0, 0, 0, 0) 80% ) 表 示 在 图 像 下 方 
的 水 平 中 心 位 置 创建 渐变 透明 (0. 35 至 0) 的 放射 椭圆 。 

此 实例 的 源 文件 名 是 myHtmlB223. html。 


253 ”使 用 transition 属性 实现 纸张 卷 拱 


此 实例 主要 通过 transition 属性 动态 改变 两 个 中 心 渐 变 椭圆 的 透明 度 , 从 而 实现 为 超 链接 创建 纸 
张 卷 拱 的 阴影 特效 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,如 果 鼠 标 指针 未 放 在 超 链接 “ 炫 酷 应 
用 实例 集锦 ”上 , 则 显示 正常 的 超 链 接 ; 如 果 鼠 标 指针 悬浮 在 超 链接 “ 炫 酷 应 用 实例 集锦 ”上 , 则 在 超 链接 
的 上 、 下 方 将 出 现 中 心 渐 变 阴 影 , 如 同 纸张 卷 拱 的 效果 ,如 图 253-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 253-1 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<style> 
.myShow { margin: . 4em; padding: lem; cursor: pointer; background: ## ECECEC; 
text - decoration: none;color: #666; width: 200px; } 
.shadow - radial { display: inline— block; position: relative; } 
. Shadow - radial :before, .shadow - radial:after { position: absolute; content: ''; 
left: 0; width: 100 % ; height: 5px; opacity: 0; 
/* 改变 透明 度 显 示 或 隐藏 渐变 阴影 * / 
transition: opacity 0.5s ease 一 in-out; } 
/* 绘 制 上 面 的 渐变 阴影 * / 
. Shadow - radial :before { bottom: 100% ; background: radial - gradient(ellipse at 50% 150%, rgba(0, 
0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80% ); } 
/* 绘 制 下 面 的 渐变 阴影 * / 
.shadow- radial:after { top: 100 % ;background: radial - gradient(ellipse at 50% —50%, rgba(0, 0, 0, 
0.6) 0%, rgba(0, 0, 0, 0) 80%);} 


/* 显 示 渐变 阴影 */ 
. shadow - radial :hover:before，. shadow - radial:hover:after { opacity: 1;} 
</style></head> 
<body>< center><a class= "myShow shadow- radial"> 炫 酷 应 用 实例 集锦 </a></center > </body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,transition: opacity 0. 5s ease-in-out 
主要 用 于 在 鼠标 指针 悬浮 于 超 链 接 或 离开 超 链 接 时 通过 改变 透明 度 (0 至 1) 逐 渐 显示 或 隐藏 超 链接 
上 、 下 的 两 个 中 心 渐变 阴影 ,opacity 属性 值 为 0. 0 表示 完全 透明 ,opacity 属性 值 为 1. 0 表示 完全 不 透 
明 ; background: radial-gradient(ellipse at 50% 150%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 
80%) 表 示 在 图 像 上 方 的 水 平 中心 位 置 创 建 渐变 透明 (0.6 至 0) 的 中 心 放 射 椭圆 。 

此 实例 的 源 文件 名 是 myHtmlB227. html。 
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254 ”使 用 transition 属性 实现 图 像 由 模糊 变 清晰 


此 实例 主要 使 用 transition 属性 动态 改变 模糊 滤 镜 -webkit-filter, 从 而 实现 图 像 由 模糊 状态 逐渐 
变 为 清晰 状态 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 .如 果 鼠 标 指针 未 悬浮 在 图 像 上 , 则 显示 
模糊 的 图 像 ,如 图 254-1 所 示 ; 如 果 鼠 标 指针 悬浮 在 图 像 上 , 则 图 像 逐 渐变 得 清晰 ,直到 显示 原 图 。 有 
关 此 实例 的 主要 代码 如 下 。 
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图 254-1 


<!doctype html >< html >< head >< meta charset = "UTF — 8"> 
<style type= "text/css"> 
img { width:400px; height:250px; border - radius: 10px; 
/* 显示 模糊 半径 为 10px 的 图 像 * / 
— webkit — filter: blur(10px); - webkit — transition: all 2s ease ~ in— out; } 
img:hover { /* 在 鼠标 指针 悬浮 时 显示 清晰 图 像 * / 
— webkit ~ filter: blur(0px); } 
</style></head> 
<body>< center >< img src= "img/B246. jpg"></center ></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 .-webkit-filter: blur(0px) 表 示 滤 镜 
的 模糊 半径 为 0px, 即 一 点 也 不 模糊 ; -webkit-filter: blur(10px) 表 示 滤 镜 的 模糊 半径 为 10px, 即 相当 
模糊 ; -webkit-transition: all 2s ease-in-out 表示 在 两 秒 内 以 ease-in-out 方式 将 滤 镜 的 模糊 半径 
由 10px 改变 为 0px, 该 代码 在 此 实例 中 也 等 于 -webkit- transition: -webkit-filter 2s ease-in-out。 

此 实例 的 源 文件 名 是 myHtmlB246. html。 


255 ”使 用 transition 属性 实现 动态 拉 伸 文本 框 的 边线 


此 实例 主要 通过 使 用 transition 属性 动态 改变 span 元 素 的 宽度 ,从 而 实现 动态 拉 伸 焦点 文本 框 
底部 边线 的 特殊 效果 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 .如 果 “ 申 请 职位 : "文本 框 获得 焦 
点 , 则 其 灰色 底线 上 立即 有 一 条 蓝 色 的 线条 从 左 向 右 拉 伸 ,直到 完全 覆盖 灰色 底线 ,此 时 即 可 在 “申请 
职位 :" 文 本 框 中 输入 信息 ; 如 果 * 毕 业 院 校 :" 文 本 框 获得 焦点 , 则 * 申 请 职位 : "文本 框 的 蓝 色 底线 将 从 
右 向 左 收缩 ,直到 露出 全 部 的 灰色 底线 ,此 时 “毕业 院 校 :" 文 本 框 的 灰色 底线 上 立即 有 一 条 蓝 色 的 线 
条 从 左 向 右 拉 伸 , 直 到 完全 覆盖 原来 的 灰色 底线 ,然后 即 可 在 “毕业 院 校 :" 文 本 框 中 输入 信息 ,如 图 
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255-1 所 示 ; 如 果 “ 职 称 名 称 : "文本 框 获得 焦点 , 则 “毕业 院 校 :" 文 本 框 的 蓝 色 底线 将 从 右 向 左 收缩 ， 
直到 露出 全 部 的 灰色 底线 ,此 时 “职称 名 称 :” 文 本 框 的 灰色 底线 上 立即 有 一 条 蓝 色 的 线条 从 左 向 右 拉 
伸 , 直 到 完全 覆盖 原来 的 灰色 底线 ,然后 即 可 在 “职称 名 称 :" 文 本 框 中 输入 信息 。 有 关 此 实例 的 主要 
代码 如 下 。 
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申请 职位 ， 会 计 助理 
毕业 院 校 ， 教育 部 认可 的 高 等 院 
职称 名 称 ， 职业 资格 证 于 








图 255-1 


<! doctype html >< html >< head >< meta charset = "UTF - 8"> 
< style type = "text/css"> 
/* 隐 藏 获取 焦点 时 的 边框 线 * / 
:focus { outline: none; } 
/* 创建 盒子 模型 * / 
.myBox { width: 300px; margin - top: 30px; position: relative; } 
/* 设 置 输入 框 的 大 小 */ 
input[type = "text"] { font: 15px/24px "Lato", Arial, sans— serif;width: 190px; } 
/* 隐 藏 除 底线 外 的 其 他 3 条 边框 线 * / 
.myEffect { border: 0; border ~ bottom: 1px solid #CCC; } 
/* 设 置 过 渡 动画 的 位 置 距离. 时间 .颜色 * / 
.myEffect ~ . focus - border { position: absolute; bottom: 0; left: 100px; 
width: 0; height: 2px;background— color: #3399FF; 
transition: 0.4s;} 
/* 设 置 过 渡 动 画 的 距离 (从 0 增加 到 190, 然后 反 向 执行 ) * / 
.myEffect:focus ~ .focus - border { width: 190px;} 
</style></head> 
<body >< center > 
<div class= "myBox"> 申请 职位 : < input class = "myEffect” type= "text" placeholder = "请 参考 招聘 信息 "人 > 
<span class = "focus - border"></span></div> 
<div class = "myBox"> 毕业 院 校 : < input class = "myEffect”type = "text”placeholder = "教育 部 认可 的 高 等 
院 校 "/>< span class = "focus - border"></span></div> 
<div class = "myBox"> 职称 名 称 : < input class = "myEffect" type = "text"” placeholder = "职业 资格 证 书 "/> 
< span class = "focus - border"></span></div></center></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 .position: absolute 表示 元 素 脱离 正 
常 文档 流 , 使 用 top、right、bottomleft 等 属性 进行 绝对 定位 ,而 其 层 炙 通过 z-index 属性 定义 ,在 此 实 
例 中 因为 span 是 直接 和 至 加 在 input 上 ,所 以 需要 用 left: 100px 以 绝对 定位 方式 进行 重 倒 ; transition: 
0. 4s 表示 在 0. 4 秒 内 完成 动画 ,由 于 此 动画 只 是 将 线条 的 长 度 进行 拉 伸 和 缩减 ,所 以 此 代码 也 可 写成 
transition: 0. 4s width 。 


此 实例 的 源 文件 名 是 myHtmlB252. html。 
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256 ”使 用 transition 属性 实现 从 边线 两 端 向 中 心 靠拢 


此 实例 主要 使 用 transition 属性 动态 改变 span 元 素 的 宽度 ,并 将 其 伸缩 行为 分 解 在 before 选择 
器 和 after 选择 器 中 ,从 而 实现 从 边线 两 端 向 中 心 靠拢 的 特殊 动态 效果 。 当 在 Google Chrome 浏览 器 
中 显示 该 页 面 时 ,如 果 * 申 请 职位 :" 文 本 框 获得 焦点 , 则 其 灰色 底线 上 立即 有 两 条 蓝 色 的 线条 分 别 从 
左 ` 右 两 端 向 中 心 靠拢 ,直到 完全 覆盖 灰色 底线 ,此 时 即 可 在 * 申 请 职位 :" 文 本 框 中 输入 信息 ; 如 果 “ 毕 
业 院 校 : "文本 框 获得 焦点 , 则 “申请 职位 :” 文 本 框 的 蓝 色 底 线 将 从 中 心 分 别 向 左右 两 端 收缩 ,直到 露 
出 全 部 的 灰色 底线 ,此 时 “毕业 院 校 :" 文 本 框 的 灰色 底线 上 立即 有 两 条 蓝 色 的 线条 分 别 从 左 、 右 两 端 
向 中 心 靠拢 , 直到 完全 覆盖 原来 的 灰色 底线 ,然后 即 可 在 “毕业 院 校 :" 文 本 框 中 输入 信息 , 如 
图 256-1 所 示 ; 如 果 ”* 职 称 名 称 :" 文 本 框 获得 焦点 , 则 “毕业 院 校 :" 文 本 框 的 蓝 色 底线 将 从 中 心 分 别 向 
左 \ 右 两 端 收 缩 , 直 到 露出 全 部 的 灰色 底线 ,此 时 “职称 名 称 : "文本 框 的 灰色 底线 上 立即 有 两 条 蓝 色 的 
线条 分 别 从 左 、 右 两 端 向 中 心 靠拢 ,直到 完全 覆盖 原来 的 灰色 底线 .然后 即 可 在 “职称 名 称 :" 文 本 框 中 
输入 信息 。 有 关 此 实例 的 主要 代码 如 下 。 








西 - oo x 
DD mytemle2s3html x _ 
3 © Dfie///D/myWork/myHtmlB253.html 安 三 


申请 职位 。 会 计 助理 


毕业 院 校 。 鹏 育 部 认可 的 高 等 院 


职称 名 称 ， 职业 言 # 








图 256-1 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
< style type = "text/css"> 
/* 隐 藏 获取 焦点 时 的 边框 线 * / 
:focus { outline: none; } 
/* 创 建 盒子 模型 */ 
.myBox { width: 300px; margin - top: 30px; position: relative; } 
/* 设 置 输入 框 的 大 小 * / 
input[type = "text"] { font: 15px/24px "Lato", Arial, sans— serif;width: 190px; } 
/* 隐 藏 除 底线 外 的 其 他 3 条 边框 线 x / 
.myEffect { border: 0; border ~— bottom: 1px solid #CCC; } 
/* 设 置 演示 收缩 . 拉 伸 的 底线 * / 
.myEffect ~ . focus - border { position: absolute; bottom: 0; 
left: 100px; width: 190px; height: 2px; z— index: 99; } 
.myEffect ~ . focus - border:before, .myEffect ~ .focus— border:after { 
content: ""; position: absolute; bottom: 0; left: Opx; 
/* 设置 左 、 右 初始 宽度 为 0x*/ 
width: 0; height: 100% ;background— color: #3399FF; transition: 2s;} 
/* 负责 右 半 部 分 拉 伸 ,表示 离 右 端的 距离 为 0, 即 向 右 收 缩 * / 
.myEffect ~ .focus— border:after { left: auto; right: 0; } 
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/V* 左 \ 右 两 部 分 各 完成 宽度 的 一 半 * / 
.myEffect:focus ~ . focus ~ border :before, 
.myEffect :focus ~ .focus— border:after { width: 50% ; } 
</style></head> 
<body ><center ><div class = "myBox"> 申请 职位 : < input class = "myEffect" type = "text"” placeholder = "请 
参考 招聘 信息 "/>< span class = "focus - border"></span></div> 
<div class = "myBox"> 毕业 院 校 : < input class = "myEffect" type = "text" placeholder = "教育 部 认可 的 高 等 
院 校 "/>< span class = "focus - border"></span></div> 
<div class= "myBox"> 职称 名 称 : < input class = "myEffect”type = "text”placeholder = "职业 资格 证 书 "/> 
< span class = "focus - border"></span></div></center ></body></htnml > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 position: absolute 表示 对 元 素 进 行 绝 
对 定位 ,在 此 实例 中 因为 span 是 直接 大 加 在 input 上 ,所 以 需要 用 left: 100px 以 绝对 定位 方式 进行 
重 益 ; transition: 2s 表示 在 两 秒 内 同时 完成 左 、 右 两 个 伸缩 动画 ,由 于 此 动画 只 是 将 线条 的 长 度 进行 
拉 伸 和 缩减 ,所 以 此 代码 也 可 写成 transition: 2s width; . myEffect 一 . focus-border: before 表示 在 
myEffect ~ . focus-border 的 前 面 插入 内 容 ; .myEffect 一 .focus-border:after 表示 在 . myEffect 一 
. focus-border 的 后 面 插入 内 容 。 

此 实例 的 源 文件 名 是 myHtmlB253. html。 


257 使 用 transition 属性 实现 动态 滑 出 焦点 按钮 的 背景 


此 实例 主要 通过 使 用 transition 属性 动态 改变 焦点 按钮 背景 的 宽度 ,从 而 实现 动态 滑 出 焦点 按钮 
背景 的 特殊 效果 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,如 果 鼠 标 指针 悬浮 在 “清华 大 学 出 版 
社 ” 按 钮 上 , 则 该 按钮 将 从 左 向 右 滑 出 浅 绿色 的 背景 ; 如 果 鼠 标 指针 悬浮 在 “中 国 水 利水 电 出 版 社 ” 按 
钮 上 . 则 该 按钮 将 从 左 向 右 滑 出 浅 绿色 的 背景 .同时 “清华 大 学 出 版 社 " 按 钮 的 浅 绿色 背景 将 从 右 向 左 
收缩 ,直到 完全 消失 ,如 图 257-1 所 示 ; 如 果 鼠 标 指针 悬浮 在 “电子 科技 大 学 出 版 社 " 按 钮 上 将 实现 类 
似 的 效果 。 有 关 此 实例 的 主要 代码 如 下 。 
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<!doctype html ><html >< head >< meta charset = "UTF — 8"> 
<style type= "text/css"> 
/* 设 置 盒子 * / 
.myBox { height: 37px; width: 250px; margin - top: Spx; 
background - color: #FEBA1D; border - radius: 5px;} 
/* 设置 盒子 中 的 按钮 * / 

.myButton {line - height: 37px; height: 37px; width: 250px; 
text - align: center; margin - right: auto; margin - left: auto; 
cursor: pointer; border - radius: 5px;position: relative; } 
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/x* 设 置 按钮 文字 */ 
.myButton span { display: block; position: absolute; 
width: 100 % ; height: 100% ; color:black; } 
. myButton: :before { border — radius: 5px; content: ''; position: absolute; 
top: 0; left: 0; /* 设置 动画 起 点 * / 
width: 0% ; height: 100 % ;background — color:1ightgreen; 
/x 设置 动画 时 间 */ 
— webkit — transition: all 0.3s; } 
. myButton: hover: :before { width: 100% ; } 
</style></head> 
<body><center ><div class = "myBox">< div class = "myButton">< span > 清华 大 学 出 版 社 </span ></div></div> 
<div class = "myBox">< div class = "myButton">< span> 中 国 水 利水 电 出 版 社 </span></div> </div> 
<divclass= "myBox"><div class = "myButton">< span > 电子 科技 大 学 出 版 社 </span></div> </div></center> 
</body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,position: absolute 表示 对 元 素 进行 
绝对 定位 ,在 一 般 情况 下 , 如果 元 素 需 要 使 用 left、top、right、bottom 进行 绝对 定位 , 则 需要 先 设 置 
position: absolute; -webkit-transition: all 0. 3s 表示 在 0. 3 秒 内 从 左 向 右 滑 出 浅 绿色 的 背景 或 从 右 
向 左 收缩 浅 绿色 的 背景 ; . myButton: : before 表示 在 .myButton 的 前 面 插入 内 容 , 在 此 实例 中 . 
myButton: :before 也 可 以 写成 . myButton :before。 

此 实例 的 源 文件 名 是 myHtmlB254. html。 


258 ”使 用 transition 属性 高 仿 扑 死 牌 正 反面 的 旋转 


此 实例 主要 使 用 transition 属性 改变 元 素 在 Z 轴 的 堆 释 顺序 和 YY 轴 的 旋转 角度 ,从 而 实现 高 仿 扑 
克 牌 正 、 反 面 的 旋转 切换 的 动态 效果 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,如 果 鼠 标 指针 县 
浮 在 扑克 牌 正 面 上 ,如 图 258-1 所 示 , 则 扑克 牌 的 正面 将 围绕 Y 轴 旋 转 180 ,同时 扑克 牌 的 反面 将 反 
向 围绕 Y 轴 旋 转 180 ,如 图 258-2 所 示 ; 如 果 鼠 标 指针 悬浮 在 扑克 牌 反面 上 ,如 图 258-2 所 示 , 则 扑克 
牌 的 反面 将 围绕 Y 轴 旋 转 一 180 ,同时 扑克 牌 的 正面 将 反 向 围绕 Y 轴 旋 转 一 180 ,如 图 258-1 所 示 。 
有 关 此 实例 的 主要 代码 如 下 。 
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图 258-1 图 258-2 


<!doctype html >< html ><head><meta charset = "UTF — 8"> 
< style type= "text/css"> 
/* 设 置 扑克 牌 盒子 * / 
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.myBox { position: absolute; margin: 30px 35%;} 


/x 旋转 后 反面 在 前 */ 

. myBox:hover .back { — webkit - transform: rotateY(0deg);z- index: 2; } 
/* 旋 转 后 正面 在 后 * / 

.myBox:hover . front { — webkit- transform: rotateY(180deg);z- index: 1; } 
/=* 正 面 在 前 * / 

.front { z- index: 2; - webkit -transform: rotateY(0deg); } 

/=* 反 面 在 后 * / 

.back { z- index: 1; - webkit — transform: rotateY( - 180deg);} 

/* 设 置 正 、 反 面 图 像 的 大 小 * / 

img { width: 108px; height: 150px;overflow: hidden; border — radius: 5px; } 
/* 设 置 过 渡 动画 属性 * / 


.front，. back { position: absolute;top: 0; left: 0; 
— webkit — transition: ls ease— out; } 
</style></head> 
<body>< div class = "myBox "><div class = "front">< img src = "img/B256A. jpg"/></div> 
<div class= "back">< img src = "img/B256B. jpg"/></div></div></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,position: absolute 表示 对 元 素 进行 
绝对 定位 ,在 一 般 情况 下 ,如 果 元 素 需 要 使 用 left、top, right、bottom 进行 绝对 定位 , 则 需要 先 设置 
position: absolute, 因 为 在 此 实例 中 扑克 牌 的 正 、 反 面 是 两 个 独立 的 div, 它 们 根据 z-index 属性 值 解决 
重合 问题 ,所 以 旋转 之 后 的 最 后 一 瞬间 需要 进行 绝对 定位 ; rotateY(180deg) 表 示 将 扑克 有 牌 从 当前 角 
度 围 绕 Y 轴 旋 转 180 ; z-index 属性 用 于 设置 扑克 牌 正 .反面 的 堆 释 顺序 ,拥有 更 高 堆 释 顺序 
属性 值 大 小 ) 的 扑克 牌 正 ( 反 ) 面 总 是 会 处 于 堆 秋 顺序 (z-index 属性 值 大 小 ) 的 扑克 有 牌 反 ( 正 ) 面 的 前 
面 ; -webkit-transition: 1s ease-out 表示 在 1 秒 内 以 ease-out 模式 围绕 Y 轴 旋 转 180", 同 时 更 改 
z-index 属性 值 ,需要 特别 注意 的 是 ,此 时 扑克 牌 的 正 、 反 面 两 个 过 渡 动 画 是 在 同时 反 向 旋转 和 更 改 
z-index 属性 值 , 即 是 两 个 动画 ,而 不 是 一 个 动画 在 执行 。 

此 实例 的 源 文件 名 是 myHtmlB256. html。 


259 ”使 用 transition 和 transform 属性 实现 平行 四 边 形 
风格 菜单 
此 实例 主要 通过 综合 使 用 transition 和 transform 属性 实现 平行 四 边 形 风 格 的 菜单 。 当 在 
Google Chrome 浏览 器 中 显示 该 页 面 时 ,如 果 和 鼠标 指针 悬浮 在 “集团 首页 "菜单 上 ,显示 的 平行 四 边 形 


效果 如 图 259-1 所 示 ; 如 果 鼠 标 指针 悬浮 在 “组 织 架 构 " 菜 单 上 ,显示 的 平行 四 边 形 效果 如 图 259-2 所 
示 。 当 然 , 鼠 标 指针 悬浮 在 其 他 菜单 上 也 能 实现 类 似 的 效果 。 有 关 此 实例 的 主要 代码 如 下 。 


z-index 
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<!doctype html ><html >< head >< meta charset = "UTF - 8"> 
< style type= "text/css"> 
*{ margin: 0; padding: 0; list- style: none; } 
body{ background - color: snow; } 
ul { margin— left: 12px; } 
1i{ float: left; } 
/x 设置 菜单 盒子 样式 x* / 
.myBox { margin - top: 50px; width: 100% ; height: 35px; 
background - color: blue; box — shadow: 2px 2px 8px black; } 
/* 设 置 菜单 项 样式 * / 
.myItem { padding - top: 8px; width: 100px; height: 27px; text - align: center; 
— webkit- transform: skew( - 25deg); - webkit — transition: all ls ease; 
font - size: 16px; font - weight: bold; color: white; } 
/* 设 置 悬浮 菜单 项 样式 * / 
.myItem:hover { background- color: red; } 
</style></head> 
<body>< div class = "myBox"><ul><1i><div class = "myItem"> 集 团 首页 </div></1i> 
<1i><div class= "myItem"> 新 闻 中 心 </div></1i> 
<1i>< div class = "myItem"> 组 织 架构 </div></1i> 
<1i><div class = "myItem"> 联 系 我 们 </div></1i></ul ></div></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,-webkit-transform: skew( 一 25deg) 
用 于 使 菜单 项 向 右倾 斜 25°,-webkit-transform: skew(25deg) 则 使 菜单 项 向 左倾 斜 25° ,用 户 可 以 根据 
需要 进行 选择 ,因为 默认 的 div 元 素 是 矩形 , 当 它 5° 之 后 自然 变 成 一 个 平行 四 边 形 ; -webkit 
transition: all 1s ease 表示 在 1 秒 内 以 ease 模式 将 菜单 项 的 背景 置 为 红色 或 从 红色 恢复 为 原来 
的 背景 色 。 

此 实例 的 源 文 件 名 是 myHtmlB257. html。 


260 ”使 用 transition 属性 和 translateY( ) 方 法 实现 在 图 
像 上 滑 出 简介 层 


此 实例 主要 通过 综合 使 用 transition 属性 和 translateY() 方 法 实现 当 鼠 标 指针 悬浮 在 图 像 上 时 从 
下 向 上 滑 出 图 像 简 介 的 效果 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,如 果 鼠 标 指针 悬浮 在 第 
一 幅 图 像 上 , 则 从 下 向 上 滑 出 该 图 像 的 简介 ,如 图 260-1 所 示 ; 如 果 鼠 标 指针 悬浮 在 第 二 幅 图 像 上 ,也 
将 从 下 向 上 滑 出 该 图 像 的 简介 ,如 图 260-2 所 示 ; 如 果 鼠 标 指针 悬浮 在 第 三 幅 图 像 上 , 仍 将 从 下 向 上 
滑 出 该 图 像 的 简介 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 260-1 图 260-2 
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<! doctype html >< html >< head >< meta charset = "UTF - 8"> 
< style type= "text/css"> 
*{ margin: 0;padding: 0;} 
body{ background - color: black;} 
/* 设 置 盒子 样式 * / 
.myBox { display: inline - block; padding: 0px;border - radius: 5px; margin: 10px; } 
/* 设 置 文字 背景 层 样 式 * / 
[class^ ='myBrief- '], [class* ='myBrief- '] {border ~ radius: 5px; 
position: relative; color: yellow; display: inline- block; 
background ~ color: rgba(1, 87, 155, 0.75); overflow: hidden; } 
/* 设 置 文字 位 置 * / 
[class^ ='myBrief — '] div, [class * ='"'myBrief 一 '] div { background- color: inherit; 
padding: 5px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } 
p{ text - align: left; margin: 5px; font - size: 14px; } 
h3{ margin: 5px; } 
/* 平 移动 画 * / 
[class^ ='myBrief — slide— ']:hover div，[class* ="'myBrief — slide— ']:hover div { 
— webkit — transform: translate(0); - webkit - transition: all 0.35s ease; } 
.myBrief - slide - up div { - webkit - transform: translateY(100% ); }/ * 垂直 平移 */ 
</style></head> 
<body >< center >< div class = "myBox"> 
<div class= "myBrief- slide - up"> < img src = "img/B259A. jpg" > 
<div><h3 > 镇 远古 镇 </h3><p> 镇 远古 镇 是 贵州 省 黔 东南 苗族 侗族 自治 州 镇 远 县 名 镇 ,位 于 舞阳 河畔 , 四 周 
皆 山 。 河 水 蚁 晓 , 以 S 形 穿 城 而 过 ,北岸 为 旧 府 城 ,南岸 为 旧 卫 城 , 远 观 颇 似 太极 图 。 两 城池 皆 为 明代 所 建 , 现 尚 
存 部 分 城墙 和 城 门 。</p></div></div></div> 
<div class= "myBox">< div class= "myBrief ~ slide— up">< img src = "img/B259B. jpg" > 
<div><h3 > 丽江 古镇 </h3 ><p> 丽 江 古 城 ,又 名 "大 研 古 镇 ,世界 文化 遗产 ,国家 5A 级 旅游 景区 , 全 国文 明 风 
景 旅游 区 示范 点 。 位 于 中 国 西南 部 云南 省 的 丽江 市 ,坐落 在 丽江 坝 中 部 ,玉龙 雪山 下 , 北 倚 象 山 . 金 虹 山西 枕 狮 
子 山 。</p></div></div></div> 
<div class= "myBox"><div class = "myBrief - slide— up">< img src = "img/B259C. jpg" > 
<div><h3 > 西塘 古镇 </h3 ><p> 西 塘 是 江南 六 大 古镇 之 一 ,位 于 浙江 省 嘉兴 市 嘉善 县 。 嘉 善 位 于 上 海 西南 方 
向 与 上 海 零 距离 接壤 , 距 上 海 市 中 心 80 公里 ,大 虹桥 商务 区 60 公里 , 西 至 杭州 110 公里 , 南 濒 嘉兴 港 乍浦 港 区 
35 公里 , 北 接 苏 州 85 公里 ,处 于 长 江 三 角 洲 地 带 。</p></div></div></div></center></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,translateY(100%%) 表 示 在 垂直 方向 
当前 位 置 平移 高 度 的 距离 ; -webkit-transition: all 0. 35s ease 表示 在 350 毫秒 内 以 ease 模式 执 
直方 向 上 的 平移 动作 。 

此 实例 的 源 文件 名 是 myHtmlB259. html。 


261 使 用 transition 属性 和 translateY() 方 法 实现 在 图 像 上 
推出 简介 层 


此 实例 主要 通过 综合 使 用 transition 属性 和 translateY() 方 法 实现 当 鼠 标 指针 悬浮 在 图 像 上 时 简 
从 下 向 上 推出 图 像 的 效果 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,如 果 和 鼠标 指针 悬浮 在 
幅 图 像 上 , 则 该 图 像 对 应 的 简介 层 从 下 向 上 推出 该 图 像 至 可 视 范 围 外 ,简介 层 则 占据 可 视窗 口 的 
区 域 ,如 图 261-1 所 示 ; 如 果 鼠 标 指针 悬浮 在 第 二 幅 图 像 上 , 则 该 图 像 对 应 的 简介 层 从 下 向 上 推 
图 像 至 可 视 范 围 外 ,简介 层 则 占据 可 视窗 口 的 全 部 区 域 .如 图 261-2 所 示 ; 如 果 鼠 标 指针 悬浮 在 
幅 图 像 上 , 则 该 图 像 对 应 的 简介 层 从 下 向 上 推出 该 图 像 至 可 视 范 围 外 ,简介 层 则 占据 可 视窗 口 的 
区 域 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 261-1 图 261-2 


<! doctype html >< html ><head >< meta charset = "UTF - 8"> 
< style type= "text/css"> 
x* { margin: 0; padding: 0; } 
body { background — color: black;} 
/* 设 置 盒子 样式 */ 
.myBox { display: inline— block; padding: Opx; border — radius: 5px; margin: 10px; } 
/* 设 置 简介 层 样式 */ 
[class^ ='myBrief - ']{ border - radius: 5px; position: relative; display: inline ~ block; background— 
color: darkgreen; color: yellow;overflow: hidden;} 
/* 设 置 图 像 项 部 对 齐 */ 
[class^ = 'myBrief — ']> img { vertical - align: top; max— width: 100% ; } 
/* 设 置 文 字样 式 */ 
p { text— align: left; margin: 5px; font — size: 14px; } 
h3 { margin: 5px;} 
[class^ ='myBrief ~ '] figcaption{ background— color: inherit; 
padding: 5px; position: absolute; top: 0; bottom: 0; left: 0; right: 0;} 
/* 设 置 动 画 的 参数 * / 
[class^ ='myBrief - '] *{ ~ webkit— transition: all 0.5s ease; } 
/* 鼠标 指针 悬浮 时 开始 执行 动画 * / 
[class^ = 'myBrief - push— ']:hover figcaption{ ~ webkit ~ transform: translate(0, 0); } 
/* 向 上 移动 简介 */ 
.myBrief - push— up figcaption { - webkit - transform: translateY(100% ); } 
/x* 向 上 移动 图 像 */ 
.myBrief - push— up:hover > img { - webkit — transform: translateY( — 100% ); } 
</style></head> 
<body><center ><div class = "myBox"> <figure class = "myBrief - push ~ up"> 
< img src = "img/B259A. jpg">< figcaption >< h3 > 镇 远古 镇 </h3 ><p> 镇 远古 镇 是 贵州 省 黔 东 南 苗族 侗族 自 
治 州 镇 远 县 名 镇 ,位 于 舞阳 河畔 ,四 周 缘 山 。 河 水 蚁 星 , 以 S 形 穿 城 而 过 , 北岸 为 旧 府 城 , 南 岸 为 旧 卫 城 , 远 观 颇 
似 太 极 图 。 两 城池 皆 为 明代 所 建 , 现 尚 存 部 分 城墙 和 城 门 。</p></figcaption></figure></div> 
<div class= "myBox">< figure class= "myBrief- push— up">< img src = "img/B259B. jpg"> 
<figcaption><h3 > 丽江 古镇 </h3 ><p> 丽 江 古 城 ,又 名 "大 研 古 镇 "世界 文化 遗产 , 国家 5A 级 旅游 景区 ,全 
国文 明 风景 旅游 区 示范 点 。 位 于 中 国 西南 部 云南 省 的 丽江 市 , 坐落 在 丽江 坝 中 部 ,玉龙 雪山 下 , 北 倚 象 山 、 金 虹 
山西 枕 狮 子 山 。</p></figcaption></figure></div> 
<div class= "myBox">< figure class = "myBrief — push— up">< img src = "img/B259C. jpt 
<figcaption ><H3 > 西塘 古镇 </h3><p> 西 塘 是 江南 六 大 古镇 之 一 , 位 于 浙江 省 嘉兴 市 嘉善 县 。 嘉善 位 于 上 海 
西南 方向 与 上 海 零 距离 接壤 , 距 上 海 市 中 心 80 公里 ,大 虹桥 商务 区 60 公里 , 西 至 杭州 110 公里 , 南 泪 嘉兴 港 乍 浦 
港 区 35 公里 , 北 接 苏州 85 公里 ,处 于 长 江 三 角 洲 地 带 。</p ></figcaption></figure></div></center></body> 
</html > 
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上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,< figcaption > 标签 是 HTML5 的 新 
标签 , 它 用 于 定义 figure 元 素 的 标题 ,通常 figcaption 元 素 应 该 被 置 于 figure 元 素 的 第 一 个 或 最 后 一 
个 子 元 素 的 位 置 ; translateY(100%) 表 示 在 垂直 方向 上 从 当前 位 置 平移 高 度 的 距离 ,此 实例 即 是 将 简 
介 层 全 部 推 人 可 视窗 口内 ; -webkit-transform: translateY( 一 100%) 表 示 在 垂直 方向 上 从 0 位置 平移 
高 度 的 距离 ,此 实例 即 是 将 图 像 全 部 推出 可 视窗 口外 ; -webkit-transition: all 0. 5s ease 表示 在 500 毫 
秒 内 以 ease 模式 执行 垂直 方向 上 的 平移 动作 ,包括 图 像 向 外 移动 和 简介 层 进 入 可 视窗 口 的 动画 ,此 行 
代码 也 可 写成 -webkit-transition: -webkit-transform 0. 5s ease。 

此 实例 的 源 文件 名 是 myHtmlB260. html。 


262 ”使 用 transition 和 opacity 属性 实现 淡 入 和 淡出 的 切换 效果 


此 实例 主要 通过 综合 使 用 transition 属性 和 opacity 属性 实现 当 鼠 标 指针 悬浮 在 图 像 上 时 简介 层 
以 淡 入 的 效果 显示 在 图 像 之 上 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,如 果 鼠 标 指针 悬浮 在 
第 一 幅 图 像 上 , 则 该 图 像 对 应 的 简介 层 将 以 淡 入 的 效果 显示 在 图 像 之 上 ,同时 在 其 他 图 像 上 之 前 显示 
的 简介 层 将 以 淡出 的 效果 消失 ,如 图 262-1 所 示 ; 如 果 鼠 标 指针 悬浮 在 第 二 幅 图 像 上 , 则 该 图 像 对 应 
的 简介 层 将 以 淡 入 的 效果 显示 在 图 像 之 上 ,同时 在 其 他 图 像 上 之 前 显示 的 简介 层 将 以 淡出 的 效果 消 
失 , 如 图 262-2 所 示 ; 如 果 鼠 标 指 针 悬 浮 在 第 三 幅 图 像 上 , 则 该 图 像 对 应 的 简介 层 将 以 淡 入 的 效果 显 
示 在 图 像 之 上 ,同时 在 其 他 图 像 上 之 前 显示 的 简介 层 将 以 淡出 的 效果 消失 。 有 关 此 实例 的 主要 代码 
如 下 。 
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<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<style type = "text/css"> 
* { margin: 0; padding: 0; } 
body { background — color: black;} 
/* 设 置 盒子 样式 * / 
.myBox { display: inline- block; padding: 0px; border ~ radius: 5px; margin: 10px; } 
/* 设 置 简介 层 样 式 * / 
[class^ ='myBrief- '] { border- radius: 5px; position: relative; display: inline - block;background— 
color: darkgreen;color: yellow; overflow: hidden; } 

/* 设 置 图 像 项 部 对 齐 */ 
[class^ ='myBrief — ']> img { vertical — align: top; max- width: 100% ;} 
/* 设 置 文字 样式 * / 
p { text—align: left;margin: 5px; font — size: 14px; } 





第 3 部 分 > 


ha { margin: 5px;} 
[class^ = 'myBrief - '] figcaption{ background ~ color: inherit; 
padding: 5px; position: absolute; top: 0; bottom: 0;left: 0; right: 0; } 


/* 设 置 动画 的 参数 */ 
[class^ ='myBrief - '] *{ - webkit— transition: all 5s ease- in- out;} 
/* 鼠标 指针 悬浮 时 开始 执行 动画 * / 


[class^ = 'myBrief - blur']:hover figcaption{ opacity: 1; } 
/* 改 变 简介 层 的 透明 度 ,opacity 从 0.0( 完 全 透明 ) 到 1. 0( 完 全 不 透明 ) * / 
.myBrief- blur figcaption {opacity: 0; } 
/* 改 变 图 像 的 模糊 度 * / 
.myBrief - blur:hover> img { - webkit- filter: blur(50px);} 
</style></head> 
<body>< center >< div class = "myBox"> < figure class = "myBrief - blur"> < img src = " img/B259A. jpg"> 
<figcaption >< h3 > 镇 远古 镇 </h3><p> 镇 远古 镇 是 贵州 省 黔 东南 苗族 侗族 自治 州 镇 远 县 名 镇 ,位 于 舞阳 河畔 ， 
四 周 皆 山 。 河 水 蚁 蜂 , 以 S 形 穿 城 而 过 ,北岸 为 旧 府城 ,南岸 为 旧 卫 城 , 远 观 颇 似 太极 图 。 两 城池 皆 为 明代 所 建 ， 
现 尚 存 部 分 城墙 和 城 门 。</p></figcaption></figure></div> 
<div class= "myBox"><figure class = "myBrief - blur">< img src = "img/B259B. jpg"> < figcaption>< h3 > 丽 
江 古 镇 </h3 ><p> 丽 江 古 城 ,又 名 "大 研 古镇 ”世界 文化 遗产 ,国家 5 级 旅游 景区 ,全 国文 明 风景 旅游 区 示范 点 。 
位 于 中 国 西南 部 云南 省 的 丽江 市 , 坐落 在 丽江 坝 中 部 ,玉龙 雪山 下 , 北 倚 象 山 . 金 虹 山 、 西 枕 狮 子 山 。</p > 
</figcaption></figure ></div> 
<div class = "myBox">< figure class = "myBrief — blur">< img src = "img/B259C. jpg"> <figcaption>< h3 > 西 
塘 古 镇 </h3 ><p> 西 塘 是 江南 六 大 古镇 之 一 ,位 于 浙江 省 嘉兴 市 嘉善 县 。 嘉 善 位 于 上 海 西南 方向 与 上 海 零 距 离 
接壤 , 距 上 海 市 中 心 80 公里 ,大 虹桥 商务 区 60 公里 , 西 至 杭州 110 公里 , 南 濒 嘉兴 港 乍浦 港 区 35 公里 , 北 接 苏 州 
85 公里 ,处 于 长 江 三 角 洲 地 带 。</p ></figcaption ></figure></div></center></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,opacity: 1 表示 设置 简介 层 为 完全 不 
透明 ; -webkit-filter: blur(50px) 表 示 使 用 模糊 滤 镜 在 淡 入 淡出 时 产生 模糊 特效 ; -webkit-transition 
all 5s ease-in-out 表示 在 5 秒 内 以 ease-in-out 模式 同时 执行 改变 模糊 度 和 透明 度 的 动画 。 

此 实例 的 源 文 件 名 是 myHtmlB261. html。 


263 ”使 用 transition 属性 和 jQuery 代码 实现 折 欠 和 展开 
多 幅 图 像 


此 实例 主要 通过 综合 使 用 transition 属性 和 jQuery 代码 实现 类 似 于 售 楼 手册 的 折 和 友和 展开 多 幅 
图 像 的 特效 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 .如果 使 用 鼠标 单 击 蓝 色 的 封面 “中 国 古 
镇 ”, 将 向 左 展开 多 幅 图 像 ,如 图 263-1 所 示 ; 如 果 在 图 263-1 中 使 用 鼠标 单 击 红色 的 封面 “中 国 古 
镇 ”, 将 向 中 间 折 全 这 些 图 像 。 有关 此 实例 的 主要 代码 如 下 。 
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<!doctype html >< html >< head >< meta charset = "UTF — 8"> 
< script src= "js/jquery - 3.1.1.min. js"></script>< script type= "text/javascript"> 
$ (function() { 
$ ('.myCover').on('click', function() { 
// 收 缩 或 展开 大 盒子 
$ ('.myBox'). toggleClass( 'myExpanded') ; 
// 切 换 封面 的 两 种 状态 
$ ('.myContainer , .myCover'). toggleClass('open'); 
D2}); 
</script > 
<style type= "text/css"> 

*{ margin: 0; padding: 0;} 

body { background— color: lightgray;} 

/* 设 置 大 盒子 * / 

.myBox { display: block; box- sizing: border - box; background: white;height: 252px; 
width: 150px; padding: Opx; border — radius: 5px; overflow: hidden; 
position: relative; margin: 10px auto;box— shadow: 4px 4px 12px black; 
transition: all 1.3s cubic - bezier(0.53, 0, 0.15, 1.3);} 


/* 设 置 展开 后 的 大 盒子 宽度 */ 

.myExpanded { width:455px; } 

/* 设 置 疼 像 盒 子 */ 

span{ float: left; height: 250px; width: 150px; margin:1px ; } 
/* 设 置 封面 盒子 */ 

.myContainer { position: absolute; top: Opx; right:0px; } 

/* 设 置 封面 */ 


.myCover{ position: relative; height: 252px; width: 150px; cursor: pointer; 
background — color: blue; border - radius: 5px; } 

/* 设 置 展开 后 的 封面 * / 

. myCover. open { background— color: red; } 

img{ border - radius: 5px;} 

/* 设 置 封面 标题 * / 

p{ position: absolute; font - size: 20px; font - weight: bold; color: white; 
top: 110px;left: 35px; } 
</style></head> 

<body>< div class = "myBox">< div class = "myContainer"><div class = "myCover"><p> 中 国 古 镇 </p></div> 
</div>< span >< img src = "img/B259A. jpg"></span>< span >< img src = "img/B259B. jpg"></span></div></ 
body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,float: left 用 于 使 span 元 素 向 左 浮 
动 , 如 果 省 略 此 代码 ,在 span 元 素 之 间 将 会 出 现 一 定 程 度 的 空白 ; overflow: hidden 用 于 控制 span 元 
素 在 超出 大 盒子 时 自动 被 修剪 ,并且 是 不 可 见 的 ,如 果 省 略 此 代码 ,span 元 素 ( 图 像 ) 将 在 下 面 出 现 , 不 
能 表现 折 有 全 效果 ; transition: all 1. 3s cubic-bezier(0. 53. 0. 0. 15, 1. 3) 用 于 在 使 用 jQuery 代码 ( 即 
单 击 封面 折 秋 和 展开 图 像 时 使 过 滤 动画 在 1. 3 秒 内 以 cubic-bezier 模式 完成 大 盒子 宽度 的 改变 ， 
cubic-bezier 又 称 三 次 贝 塞 尔 , 主 要 是 为 动画 生成 速度 曲线 的 函数 。 

此 实例 的 源 文件 名 是 myHtmlB264. html。 


264 使 用 transition 属性 和 target 选择 器 模拟 类 似 手 风 雁 的 
折 炙 特效 
此 实例 主要 通过 综合 使 用 transition 属性 和 target 选择 器 实现 类 似 于 手风琴 的 折 关 .展开 特效 。 


当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,默认 情况 下 将 展开 第 一 幅 图 像 . 折 生 其 他 4 幅 图 像 , 如 
图 264-1 所 示 ; 使 用 鼠标 单 击 纵向 标题 栏 * 第 二 名 : 伦敦 ". 则 将 展开 第 二 幅 图 像 , 折 符 其 他 4 幅 图 像 ， 
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如 图 264-2 所 示 ; 使 用 鼠标 单 击 纵 向 标题 栏 “ 第 五 名 : 东京 ”. 则 将 展开 第 五 幅 图 像 . 折 侠 其 他 4 幅 图 
像 , 如 图 264-3 所 示 。 当 然 , 使 用 鼠标 单 击 任意 一 个 纵向 标题 栏 都 能 够 展开 对 应 的 图 像 , 折 姜 其 他 4 幅 
图 像 。 有 关 此 实例 的 主要 代码 如 下 。 
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<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
< style type= "text/css"> 
* { margin: Opx; padding: Opx;} 
body { background: black; } 
/* 设 置 大 盒子 样式 * / 
# myAccordion { padding: 0; margin: 20px auto; list - style: none; width: 730px; height: 300px; 
overflow: hidden; position: relative; border: 1px solid lightgreen; } 
/* 设 置 竖 栏 + 图 片 盒子 样式 * / 
#myAccordion div { width: 530px; height: 300px; position: relative; } 
/* 设 置 竖 栏 盒子 样式 ,设置 过 渡 动画 时 间 是 1 秒 * / 
#myAccordion li { width: 50px; height: 300px; float: left; 
— webkit ~ transition: 1s; } 
/* 设 置 简介 样式 (在 竖 栏 盒子 里 面 ) * / 
#myAccordion div span { display: block; background: rgba(0, 0, 0, 0.6); 
width: 460px;height: 45px;position: absolute;bottom: 300px;right: 0; 
padding: 10px; color: yellow; font - size: 14px;border - top: 1px solid #000; } 
/* 设 置 竖 栏 标题 超 链接 样式 */ 
#myAccordion li div >a { display: block; width: 49px; height: 300px; float: left; 
position: relative; color: white;text - decoration: none; 
box — shadow: - 10px 0 10px - 10px rgba(0, 0, 0, 0.6);} 
/* 设 置 竖 栏 标题 样式 */ 
#myAccordion li div>a b { display: block; width: 280px; height: 30px; 
padding ~ left: 20px; position: absolute; left: 50px;bottom: 5px; 
font - size: 20px; font— weight: bold;text ~— shadow: 0 0 2px rgba(0, 0, 0, 0.6); 
/* 竖 栏 标题 逆 时 针 旋转 90 直立 起 来 * / 
一 webk 让 一 transform: rotate( - 90deg); - webk 让 一 transform- origin: bottom 
left; } 
/* 设 置 图 像样 式 * / 
#myAccordion 1i img { width: 480px; height: 300px; display: block; float: left; } 
/x#* 首 次 展开 pl*/ 
#myAccordion li.pl { width: 530px;} 
/* 首 次 展开 pl, 显示 简 介 */ 
#myAccordion li. pl div span { bottom: 0; } 
/* 设 置 pl 坚 栏 超 链接 背景 样式 * / 
井 myRccordion li a.al { background: #460;border - left: 1px solid #682;} 
/* 设 置 p2 坚 栏 超 链接 背景 样式 * / 
# 井 myRccordion li a.a2 { background: #793; border — left: lpx solid #9B5; } 
/* 设 置 p3 竖 栏 超 链接 背景 样式 * / 
井 myYRccordion li a.a3 { background: #AC3;border ~ left: lpx solid #CE5; } 
/* 设 置 M 竖 栏 超 链接 背景 样式 * / 
井 myYRccordion li a.a4 { background: #CD5;border— left: lpx solid #EF7; } 
/* 设 置 p5 坚 栏 超 链接 背景 样式 */ 
#myAccordion li a.a5 { background: #069;border - left: lpx solid #28B; } 
/* 设 置 垂直 滑动 距离 (图 像 和 标题 ) * / 
井 pl :target 一 #myRMccordion 1i，#p2:target 一 井 myRccordion 1i，#Pp3:target 一 井 myRccordion 1i, 
井 p4:target 一 井 myRhccordion 1i， 井 p5:target 一 井 myYRccordion li { 
width: 50px; } 
##pl:target 一 ##myAccordion 1i.pl, #p2:target 一 #myAccordion 1i.p2, #p3:target 一 井 myRccordion 
1i.p3, #p4:target ~ #myAccordion li.p4, #p5:target ~ #myAccordion 1i.p5 { width: 530px; } 
/* 设置 底部 距离 (简介 ) * / 
pl:target ~ 间 #myAccordion li.pl div span, #p2:target ~ #myAccordion li.p2 div span, #p3:target ~ 
井 myaRccordion 1i.p3 div span,#p4:target ~ #myAccordion 1i.p4 div span，#p5:target ~ 井 myRhccordion 
1i.p5 div span { bottom: 0;} 
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</style></head> 
<body><div> <b id= "pl"></b><b id= "p2"></b><b id="p3"></b><b id="p4"></b> 

<b id= "p5"></b><ul id= "myAccordion"><1i class = "pl"> 

<div><a class= "al" href="#pl"><b> 第 一 名 : 纽约 </b></a>< img src = "img/B266A. jpg">< span> 纽 约 
是 一 座 世 界 级 城市 , 直接 影响 着 全 球 的 经 济 、 金 融 , 媒 体 、 政 治 、 教 育 .娱乐 与 时 尚 界 , 其 中 联合 国 总 部 也 位 于 该 
市 ,因此 纽约 也 被 公认 为 世界 之 都 。</span></div></1i> 

<liclass="p2"><div><aclass="a2" href ="#p2"><b> 第 二 名 : 伦敦 </b></a>< inmg src = 
"img/B266B. jpg">< span > 伦敦 是 英国 的 政治 ,经 济 、 文 化 ,金融 中 心 和 世界 著名 的 旅游 胜地 ,有 数量 众多 的 名 胜 


景点 与 博物 馆 。 伦 敦 是 多 元 化 的 大 都 市 , 居民 来 自 世 界 各 地 ,一座 种 族 、 宗 教 与 文化 的 大 熔炉 城市 。</span > 
</div></1i> 


<1li class="p3"><div><aclass="a3" href ="#p3"><b> 第 三 名 : 香港 </b></a>< img src = 
"img/B266C. jpg">< span > 香港 是 全 球 高 度 繁荣 的 国际 大 都 会 之 一 ,全 境 由 香港 岛 、 九 龙 半 岛 .新 界 等 3 大 区 域 组 


成 。 管 辖 陆地 总 面积 1104. 32 平方 公里 ,截至 2014 年 末 , 总 人 口 约 726.4 万 人 ,人 口 密度 居 全 球 界 第 三 。</span> 
</div></1i> 


<liclass="p4"><div><a class ="a4" href ="#p4"><b> 第 四 名 : 新 加 坡 </b></a>< img src= "img/ 
B266D, jpg">< span > 新 加 坡 是 东南 亚 的 一 个 岛国 ,被 誉 为 "亚洲 四 小 龙 "之 一 ,其 经 济 模式 被 称 为 国家 资本 主义 。 


根据 2014 年 的 全 球 金融 中 心 指数 排名 报告 ,新 加 坡 是 国际 金融 中 心 , 也 是 亚洲 重要 的 服务 和 航运 中 心 之 一 。 
</span></div></1i> 


<liclass="p5"><div><a class= "a5" href ="#p5"><b> 第 五 名 : 东京 </b></a>< img src = "img/B266E. 
jpg">< span > 东京 是 日 本 国 的 政治 ,经 济 、 文 化 中 心 ,海陆 空 交通 枢纽 ,根据 建成 区 面积 、 人 口 以 及 国民 生产 总 值 
等 指标 , 东京 是 世界 第 一 大 城市 ,全 球 最 大 的 经 济 中 心 之 一 。 在 2014 全 球 城市 综合 实力 排名 中 位 于 世界 第 四 。 
</span></div></li></ul ></div> 
</body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,-webkit-transition: 1s 用 于 使 过 渡 动 
画 在 1 秒 内 完成 每 个 模块 宽度 的 改变 。 因 为 在 <a class 一 "al" href 二 "#pl"><b > 第 一 名 : 纽约 </b > 
</a > 中 已 经 通过 href = 二"# pl" 指 定 选 择 嚣 # pl:target 一 # myAccordion li、# pl: target 一 
# myAccordion 1i. pl 等 中 设置 的 width 属性 值 让 过 渡 动 画 来 改变 。 在 CSS3 中 ,target 选择 器 可 用 于 
选取 当前 活动 的 目标 元 素 , 它 通常 用 于 响应 URL, 后 面 跟 有 锚 名 称 # ,指向 文档 内 某 个 具体 的 元 素 ， 
这 个 被 链接 的 元 素 就 是 目标 元 素 (target element) 。 

此 实例 的 源 文件 名 是 myHtmlB266. html。 


265 ”使 用 transition 属性 实现 图 像 由 彩色 变 为 黑白 


此 实例 主要 在 transition 属性 中 动态 改变 滤 镜 -webkitrfilter, 从 而 将 彩色 图 像 逐 渐 改 变 成 黑白 图 
像 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,如 果 鼠 标 指针 未 悬浮 在 图 像 上 , 则 显示 彩色 的 图 
像 ; 如 果 鼠 标 指针 悬浮 在 图 像 上 , 则 彩色 图 像 逐 渐变 成 黑白 图 像 , 如 图 265-1 所 示 ; 反之 ,如 果 鼠 标 指 
针 离开 图 像 , 则 黑白 图 像 逐渐 变 成 彩色 图 像 。 有 关 此 实例 的 主要 代码 如 下 。 








<!doctype html >< html><head ><meta charset = "UTF - 8"> 
< style> 
div { display: inline - block; width: 400px; height: 250px;margin: 5px auto; 
overflow: hidden; background - color: #FFF;border: lpx solid # EEE; position: relative; box— 
shadow: 5px 5px 5px 1px #999, 0 0 2px rgba(0, 0, 0, 0.06) inset;} 
body { background— color: lightgray;} 
img { - webkit ~ filter: grayscale(0); — webkit 一 transition: - webkit- filter 5s ease; } 
img:hover { - webkit ~ filter: grayscale(1);} 
</style></head> 
<body>< div>< img src= "img/B266D. jpg" 人 ></div></body></html> 
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上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,-webkitfilter: grayscale(1) 表 示 将 
图 像 完全 变 成 黑白 ( 灰 度 ) 效 果 ; -webkit-filter: grayscale(0) 表 示 图 像 保持 原状 ,没有 灰 度 滤 镜 效果 ; 


-webkit-transition: -webkit-filter 5s ease 表示 在 5 秒 内 以 ease 方式 将 图 像 由 -webkit-filter: grayscale(0) 
原始 状态 改变 成 -webkit-filter:grayscale(1) 黑 白 状 态 。 


此 实例 的 源 文 件 名 是 myHtmlB267. html。 
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图 265-1 


266 ”使 用 transition 属性 动态 改变 圆 饼 图 的 百分比 


此 实例 主要 在 transition 属性 中 对 圆 饼 图 按照 一 定 的 角度 进行 旋转 ,从 而 实现 动态 改变 圆 饼 图 的 
每 部 分 的 百分比 ( 占 比 )。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,如 果 鼠 标 指标 未 悬浮 在 圆 饼 
上 , 则 显示 绿色 部 分 在 圆 饼 中 的 占 比 是 87. 5%; 如 果 鼠 标 指标 悬浮 在 圆 饼 上 , 则 圆 饼 从 45° 顺 时 针 旋 
转 到 135 ,因此 绿色 部 分 在 圆 饼 中 的 占 比 就 改变 为 62. 5% ,如 图 266-1 所 示 。 有 关 此 实例 的 主要 代码 
如 下 。 
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图 266-1 


<!doctype html >< html >< head ><meta charset = "UTF - 8"> 
< style type= "text/css"> 
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.myPie { position: absolute;top: 50% ; left: 50% ;transform: translate( — 50%, -50%); 
width: 200px; height:200px;line- height: 200px; border — radius: 50%; 
text — align: center; color: white;font - size: 24px; background — color: green; 
overflow: hidden; background — image: linear - gradient (to right, transparent 50%, lightblue 
0); box- shadow: 2px 2px 8px black; } 
/* 初始 旋 转 45 * / 
.myPie:before { content: "87.5%"; position: absolute; top: 0; left: 50%; 
width: 50% ; height: 100% ;background— color: inherit; 
transform - origin: left; transform: rotate(45deg);} 
. myPie: hover:before{ content: "62.5%";transition: transform 1s; 
transform: rotate(135deg); } / * 鼠标 指针 悬浮 时 旋转 135” x / 
</style></head> 
<body>< div class = "myPie"></div></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,transform: rotate(135deg) 表 示 将 元 
素 ( 圆 饼 ) 旋 转 到 135 ;transition: transform 1s 表示 在 1 秒 内 以 默认 方式 完成 将 元 素 ( 圆 饼 ) 旋 转 到 
135 的 动作 。 

此 实例 的 源 文件 名 是 myHtmlB272. html。 


267 ”使 用 transition 属性 拉 伸 和 收缩 文本 的 下 画 线 


此 实例 主要 在 transition 属性 中 改变 背景 下 夯 线 的 横 坐 标 位 置 ,从 而 实现 动态 拉 伸 和 收缩 下 画 线 
的 效果 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,如 果 鼠 标 指针 悬浮 在 (巴山 夜 雨 《天 云 山 传 
奇 》 上 , 则 将 在 其 底部 从 左 向 右 拉 出 红色 的 下 画 线 , 其 他 下 画 线 则 从 右 向 左 收缩 至 消失 ,如 图 267-1 所 
示 ; 如 果 鼠 标 指针 悬浮 在 其 他 片 名 上 ,也 将 在 其 底部 从 左 向 右 拉 出 红色 的 下 画 线 ,其 他 下 夯 线 则 从 三 
向 左 收缩 至 消失 。 有 关 此 实例 的 主要 代码 如 下 。 
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最 佳 故事 片 : 《巴山 夜 而 》、《 天 云 山 传奇 》。 
最 佳 科教 片 ，《 生 命 与 爱 白 质 - 人 工 合成 腹 岛 素 》。 
最 佳 记 录 片 : 《蛇口 痊 鸣 曲 》。 


最 佳 儿 疣 片 : 《烛光 里 的 微笑 》。 
最 住 合 折 故事片: 《 宋 氏 三 姐妹 》。 
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<!doctype html >< html >< head>< meta charset = "UTF — 8"> 
< style> 


/* 绘 制 阴影 框 */ 
div { display: inline - block; width: 380px; height: 200px; 
padding - left: 20px; padding - right: 20px; padding - bottom: 20px; 
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margin: 10px;background— color: #FFF;border: 1px solid # EEE; 
box— shadow: 5px 5px 5px 1px #999, 0 0 40px rgba(0, 0, 0, 0.06) inset; 
position: relative; border - radius: 5px; } 
body { background- color: lightgray; } 
/* 取消 段落 默认 的 下 画 线 属性 ,设置 字体 大 小 ,注意 必须 与 span 中 的 字体 大 小 一 致 */ 
p {line — height: 35px; text - decoration: none;font — family: 楷体 ;font- size: 16px; } 
/* 定 制 下 画 线 的 风格 * / 
span { position: absolute; height: 35px; font — size: 16px; 
background: linear - gradient (red, red) no — repeat; 
background - size: 100 % 2px; 
background - position: - 30em 2em; transition:1.5s; } 
span: hover { background— position: 0 2em; } 
</style></head> 
<body >< div><p> 最 佳 故事 片 : < span > 巴山 夜 雨 ? «天 云 山 传奇 ></span >« 巴 山 夜 十 > < 天 云 山 传奇 >。< br> 
最 佳 科教 片 : < span > 生命 与 蛋白 质 - 人 工 合成 胰岛 素 >»</span >< 生 命 与 蛋白 质 - 人 工 合成 胰岛 素 »。 
<br> 
最 佳 纪 录 片 : < span >« 蛇 口 奏鸣曲 »</span >« 蛇 口 奏鸣曲 »。< br > 
最 佳 儿童 片 : < span >« 烛 光 里 的 微笑 >»</span >« 烛 光 里 的 微笑 >。< br> 
最 佳 合拍 故事 片 : < span >« 宋 氏 三 姐妹 »</span >« 宋 氏 三 姐妹 »。<br></p></div> 
</body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,background-position: 一 30em 2em 


用 于 隐藏 background: linear-gradient(red,red) no-repeat 创建 的 红色 下 面 线 ; transition: 1. 5s 表示 
在 1.5 秒 内 以 默认 方式 将 创建 的 自 定义 红色 下 面 线 移动 到 background-position: 0 2em。 此 处 的 
transition 属性 虽然 没有 明确 指定 过 渡 的 属性 名 称 , 但 它 完 全 等 价 于 transition: background-position 


1.5s。 


单 。 
示 ; 


此 实例 的 源 文件 名 是 myHtmlB275. html。 


268 ”使 用 transition 属性 实现 扇形 风格 的 多 级 菜单 


此 实例 主要 在 transition 属性 中 旋转 包含 子 级 菜单 的 无 序列 表 , 从 而 实现 滑 出 扇形 风格 的 子 级 菜 
当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,默认 情况 下 将 在 左上 角 显 示 主 菜单 ,如 图 268-1 所 
如 果 鼠 标 指针 悬浮 在 主 菜单 上 , 则 将 逆 时 针 旋 转 90" , 滑 出 一 级 菜单 ,如 图 268-2 所 示 ; 如 果 鼠 标 


指针 悬浮 在 一 级 菜单 上 , 则 将 逆 时 针 旋转 90°, 滑 出 二 级 菜单 ,如 图 268-3 所 示 ; 如 果 鼠 标 指针 悬浮 在 
二 级 菜单 上 ,如 图 268-4 所 示 , 单 击 此 菜单 将 弹出 一 个 消息 框 ,响应 鼠标 单 击 事件 。 一 旦 鼠标 指针 离开 
某 个 菜单 , 则 其 子 菜单 将 顺 时 针 旋 转 90° ,恢复 初 始 状 态 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 268-1 图 268-2 
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<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<style type= "text/css"> 

* { margin: Opx; padding: Opx; } 

body { background: #B1B1B1; margin: Opx; 

padding: Opx; font - size: 14px; color: black; } 

/* 设 置 主 菜单 盒子 * / 

.menuHolder { width: 100px; height: 100px;position: relative; z- index: 100; } 

/* 设 置 主 菜单 样式 * / 

.menuHolder ul { padding: 0; margin: 0; list- style: none; position: absolute; 

left: 0; top: 0; width: 0; height: 0; } 

/* 设 置 菜单 项 样式 * / 

.menuHolder ul 1ia{ color: #000; text - decoration: none; text 一 align: center; 

font: bold 13px/30px arial，sans - serif; 
box - shadow: — 5px 7px 10px rgba(0, 0, 0, 0.5);— webkit -transform - origin: 0 
0;} 

/* 设 置 子 菜单 的 z 轴 顺序 ,注释 此 代码 即 可 看 到 整个 扇形 结构 * / 

.menuHolder ul. p2 { z- index: — 1;} 

.menuHolder ul.p3 { z- index: -1;} 

/* 设 置 主 菜单 样式 * / 

.menuHolder 1i. sl>a { position: absolute; width: 100px;height: 100px; 
display: block; background: lightseagreen;border - radius: 0 0 100px 0; } 

/* 设 置 一 级 子 菜 单 样 式 */ 

.menuHolder 1i. s2>a { position: absolute; display: block;width: 100px; 
padding - left: 100px; height: 200px; background: lightgrey; 
border - radius: 0 0 200px 0; overflow: hidden; } 

/* 设置 二 级 子 菜 单 样式 * / 

.menuHolder ul. p3 li a { position: absolute; display: block;width: 100px; 
padding — left: 200px; height: 300px; background: #999; 
border — radius: 0 0 300px 0; overflow: hidden; } 

/* 悬浮 时 旋转 90" 滑 出 子 菜单 */ 

.menuHolder ul ul { — webkit ~ transform- origin: 0 0; 

— webkit - transform: rotate(90deg); - webkit— transition: 1s;} 


/* 设 置 子 菜单 (项 ) 的 旋转 角度 和 背景 */ 
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-menuHolder 1i. s2:nth— of - type(6)>a{ 

background: #888; — webkit — transform: rotate(75deg); } 
.menuHolder 1i. s2:nth— of - type(5)>a{ 

background: #999; - webkit — transform: rotate(60deg);} 
.menuHolder 1i. s2:nth— of - type(4)>a{ 

background: #AAA; — webkit - transform: rotate(45deg); } 
.menuHolder 1i. s2:nth— of - type(3)>a{ 

background: #BBB; — webkit - transform: rotate(30deg); 
.menuHolder 1i. s2:nth— of - type(2)>a { 

background: ##CCC; - webkit - transform: rotate(15deg); 
.menuHolder .a6 li:nth- of ~ type(6)>a { 

background: #444; - webkit- transform: rotate(75deg); 
.menuHolder .a6 li:nth- of -type(5)>a { 

background: #555; - webkit - transform: rotate(60deg); 
.menuHolder .a6 li:nth- of ~ type(4)>a { 

background: #666; - webkit — transform: rotate(45deg); } 
.menuHolder .a6 li:nth- of -type(3)>a{ 

background: #777; - webkit — transform: rotate(30deg); } 
.menuHolder .a6 li:nth- of - type(2)>a { 

background: #888; - webkit - transform: rotate(15deg);} 
.menuHolder .a5 li:nth— of ~ type(5)>a { 

background: #555; - webkit - transform: rotate(72deg); 
.menuHolder .a5 li:nth- of -type(4)>a { 

background: #666; - webkit- transform: rotate(54deg); 
.menuHolder .a5 li:nth- of -type(3)>a { 

background; #777; - webkit - transform: rotate(36deg); 
.menuHolder .a5 li:nth— of -type(2)>a { 

background: #888; - webkit - transform: rotate(18deg); 
.menuHolder .a3 li:nth— of ~ type(3)>a { 

background: #777; - webkit - transform: rotate(60deg); 
.menuHolder .a3 li:nth- of -type(2)>a { 

background: #888; - webkit - transform: rotate(30deg); 
/* 悬浮 时 显示 一 级 菜单 */ 
.menuHolder 1i. sl:hover ul.p2 { — webkit — transform: rotate(0deg);} 
/* 悬浮 时 显示 二 级 菜单 */ 
.menuHolder 1i. s2:hover ul. p3 { - webkit - transform: rotate(0deg);} 
/* 设置 主 菜单 悬浮 时 的 背景 颜色 和 文本 颜色 * / 
.menuHolder ul 1i:hover >a { background: blue; color: #FFF;} 
/* 设置 一 级 菜单 悬浮 时 的 背景 颜色 和 文本 颜色 * / 
.menuHolder 1i. s2:hover >a { background: blue; color: #FFF; } 
/* 设置 二 级 菜单 悬浮 时 的 背景 颜色 和 文本 颜色 * / 
.menuHolder .a6 li:hover >a { background: blue;color: #FFF; } 
.menuHolder .a5 1i:hover >a { background: blue;color: #FFF; } 
.menuHolder .a3 1i:hover >a { background: blue;color: #FFF; } 
.menuWindow { width: 110px; height: 110px; left: 0; top: 0; z- index: 100; 

overflow: hidden; position: absolute; - webkit- transition: 0s 1s; } 
.menuHolder: hover .menuWindow { width: 310px; height: 310px; 
—webkit — transition: 0s 0s;} 


-Pl{ } 
.si{ } 
.s2{ } 





第 3 部 分 > 


</style></head> 
<body>< div class = "menuHolder"><div class = "menuWindow"><ul class= "pl"> 
<1li class ="sl"> <ahref ="#url"> 主 菜单 </a> 
<ul class="p2"><1i class= "s2"> 
<a href ="#url">< span> 一 级 菜单 1 </span></a> 
<ul class= "p3 a6"> 
<1i><a href ="#"> 二 级 菜单 1</a></1i><1i><ahref="# 必 二 级 菜单 2</a></1i> 
<1i><a href = "##"> 二 级 菜单 3</a></1i><1i><a href = "#"> 二 级 菜单 4</a></1i> 
<1i><a href = "并 "> 二 级 菜单 5</a></1i><1i><a href ="#"> 二 级 菜单 6</a></1i> </ul></1i> 
<1li class ="s2"><a href="#url">< span> 一 级 菜单 2</span></a> 
<ul class= "p3 a5"> 
<1i><a href ="#"> 二 级 菜单 1</a></1i><1i><a href ="#"> 二 级 菜单 2</a></1i> 
<1i><a href =" 间 "> 二 级 菜单 3</a></1i><1i><a href = "#"> 二 级 菜单 4</a></1i> 
<1i><a href ="#"> 二 级 菜单 5</a></li></ul></li> 
<1li class = "s2"><a href ="#url">< span> 一 级 菜单 3 </span ></a> 
<ul class= "p3 a3"> 
<1i><a href="#"> 二 级 菜单 1 </a></1i> 
<1li><ahref="#"”onclick= "alert(' 这 是 二 级 菜单 ')"> 二 级 菜单 2</a></1i> 
<1i><a href ="#"> 二 级 菜单 3</a></1i></ul></1i> 
<1i class = "s2"> 
<ahref ="#url">< span> 一 级 菜单 4</span></a> 
<ul class = "p3 a3"> 
<1i><a href="#"> 二 级 菜单 1 </a></1i><1i><ahref = "#"> 二 级 菜单 2</a></1i> 
<1i><a href ="#"> 二 级 菜单 3</a></1i></ul></1i> 
<1i class = "s2"> 
<a href ="#url">< span> 一 级 菜单 5</span ></a> 
<ul class= "p3 a3"> 
<1i><a href ="#"> 二 级 菜单 1</a></1i><1i><ahref="#"> 二 级 菜单 2</a></1i> 
<1i><a href ="#"> 二 级 菜单 3</a></1i></ul></1i> 
<1i class = "s2"> 
<a href ="#url">< span> 一 级 菜单 6</span ></a> 
<ul class= "p3 a3"> 
<1i><a href ="#"> 二 级 菜单 1</a></1i><1i><ahref="#"> 二 级 菜单 2</a></1i> 
<1i><a href ="#"> 二 级 菜单 3</a></1i></ul></1i></ul></1i></ul></div></div> 
</body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,-webkit-transform: rotate(90deg) 用 
F 旋 转 90 滑 出 子 级 菜单 ,此 处 实质 上 旋转 的 是 整个 子 级 菜单 的 容器 。-webkitrtransition: 1s 表示 在 
1 秒 内 以 默认 方式 执行 90 的 旋转 动作 , 它 相 当 于 -webkit-transition: transform 1s, 即 以 过 渡 动 画 方 式 
旋转 90°, 滑 出 子 级 菜单 。 

此 实例 的 源 文 件 名 是 myHtmlB304. html。 


269 ”使 用 transition 属性 实现 抽 层 风格 的 滑 出 菜单 


此 实例 主要 在 transition 属性 中 改变 元 素 的 左 内 边 距 , 从 而 实现 抽 居 风格 的 滑 出 菜单 。 当 在 
Google Chrome 浏览 器 中 显示 该 页 面 时 ,如 果 和 鼠标 指针 悬浮 在 “宾夕法尼亚 大 学 "菜单 上 , 则 将 增加 左 
内 边 距 , 向 右 滑 出 菜单 ,如 图 269-1 所 示 ; 如 果 鼠 标 指针 悬浮 在 其 他 大 学 菜单 上 ,也 将 增加 左 内 边 距 ， 
向 右 滑 出 菜单 。 一 旦 鼠标 指针 离开 某 个 菜单 项 , 则 将 恢复 菜单 项 初始 状态 的 左 内 边 距 。 有 关 此 实例 
的 主要 代码 如 下 。 
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<!doctype html >< html >< head >< meta charset = "UTF — 8"> 
<style type= "text/css"> 
* { margin: 0; padding: 0; } 
body { position: relative; height: 100%; 
background: linear - gradient (to right, cyan, white);} 
/* 菜 单 盒子 * / 
.myMenu { list— style: none; display: block; 
position: relative; top: 6px; left: 5px; width:160px;} 

li{ margin: 5px 0 00;} 

/* 设 置 菜单 项 样式 */ 

.myMenu li a { — webkit - transition: 0. 3s ease - out; color: black; display: block; background: 
lightgreen; padding: 7px 15px 7px 10px; width: 120px; font - size: 14px; — webkit — 
border - top - right - radius: 10px; - webkit - box— shadow: 2px 2px 4px #888; - webkit 
一 border — bottom— right ~ radius: 10px;text ~ decoration: none; } 

/* 设 置 鼠 标 指针 悬浮 状态 样式 * / 

.myMenu 1i a:hover { background ~ color: pink;padding: 7px 15px 7px 30px; } 

</style></head> 
<body><ul class = "myMenu"> 
<1i><a href ="javascript:void(0)"> 密 区 根 大 学 </a></1i> 
<1i><a href ="javascript:void(0)"> 约 翰 霍 普 金 斯 大 学 </a></1i> 
<1i><a href = "javascript:void(0)"> 宾 夕 法 尼 亚 大 学 </a></1i> 
<1i><a href = "javascript:void(0)"> 斯 坦 福 大 学 </a></1i> 
<1i><a href ="javascript:void(0)"> 普 林 斯 顿 大 学 </a></1i> 
<1i><a href = "javascript:void(0)"> 圣 安德鲁 斯 大 学 </a></1i> 
<1i><a href ="javascript:void(0)"> 加 州 理工 学 院 </a></1i></ul ></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,padding: 7px 15px 7px 30px 表示 鼠 
标 指针 悬浮 于 某 个 菜单 项 时 ,该 菜单 项 的 上 内 边 距 是 7px、 右 内 边 距 是 15px、 下 内 边 距 是 7px、 左 内 边 
距 是 30px。 在 CSS3 中 ,padding 属性 用 于 在 一 个 声明 中 设置 所 有 内 边 距 属 性 。 下 面 是 其 他 3 种 内 边 
距 的 表示 形式 ,padding:10px 5px 15px 表示 上 内 边 距 是 10px、 右 内 边 距 和 左 内 边 距 是 5px、 下 内 边 距 
是 15px; padding:10px 5px 表示 上 内 边 距 和 下 内 边 距 是 10px、 右 内 边 距 和 左 内 边 距 是 5px; padding: 
10px 表示 上 ,下 , 左 , 右 4 个 内 边 距 都 是 10px。-webkit-transition: 0. 3s ease-out 表示 在 300 毫秒 内 
以 ease-out 方式 执行 改变 菜单 项 左 内 边 距 的 动作 。 

此 实例 的 源 文件 名 是 myHtmlB305. html。 





270 ”使 用 transition 属性 模拟 用 鼠标 操控 旋转 木马 


中 根据 变动 的 参数 设置 rotateY() 和 translateZ() 等 方法 ,从 而 模拟 
当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 将 以 动画 的 形式 展 





此 实例 主要 在 transition 属 忆 
使 用 鼠标 操控 木马 进行 旋转 的 效果 
开 3 幅 图 像 ,如 果 按 住 鼠 标 左 键 从 右 向 左 移动 , 则 3 幅 图 像 将 沿 着 椭圆 形 的 轨迹 以 顺 时 针 方向 旋转 ， 
如 图 270-1 所 示 ; 如 果 按 住 鼠 标 左 键 从 左 向 右 移动 , 则 3 幅 图 像 将 沿 着 椭圆 形 的 轨迹 以 逆 时 针 方 向 旋 





转 。 有 关 此 实例 的 主要 代码 如 下 
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图 270-1 


<!doctype html >< html >< head > < meta charset = "UTF ~ 8"> 
< script type = "text/javascript"> 
window. onload = function() { 
var myBox = document. getElementById( 'myBox' ); 
var N= 3; 
for (var i=0; i<N; i++) { 
var myDiv = document. createElement( 'div' ); 
myDiv. style. backgroundImage = 'url(img/B322'+ (i+1) +'.jpg)'; 
myBox. appendChild( myDiv); 
myDiv. innerHTML = '< span > </span >"'; 
myDiv. children[ 0]. style. backgroundImage = "url(img/B322'+ (i+1)+'.jpg)'; 
(function(myDiv, i) {// 实 现 开始 时 的 3 幅 图 像 展开 动画 
setTimeout( function() { 
myDiv. style. transition='1s all ease'; 
myDiv. style. transform ='rotateY('+ 360/N* i+'deg) translateZz(280px)'; 
}, 200¥# (N— i)); 
}) (myDiv, i); 
} 


Var y= 0; 


A 
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myBox. children[ 0].addEventListener( 'transitionend', function() { 
change( y); 
}, false); 
var iSpeedY = 0; var lastY= 0;var timer = null; 
document. onmousedown = function(ev) {// 记 录 鼠 标 指针 位 置 决定 旋转 方向 
clearInterval (timer); 
for (var i=0; i<myBox.children. length; i++) { 
myBox. children[ i]. style. transition = 'none'; 
} 
var disX= ev. clientX— y; 
document. onmousemove = function(ev) { 
Y= ev.clientX - disX; change( y/10); 
iSpeedY=Y- lastY; lastY= y; 
}; 


document. onmouseup = function() { 





document. onmousemove = null; 
document. onmouseup = null; 
timer = setInterval(function() { 
iSpeedY * =0.95; y+= iSpeedY; change(y/10); 
}, 30); }; 
return false; 
}; 
function change(y) {// 平 移 和 旋转 图 像 
for (var i=0; i<myBox.children. length; i++) { 
myBox. children[ i]. style. transform= 
+rotateY('+ (360/N* i+y) +'deg) translateZ(280px)'; 
var s= Math.abs((360/Nx i+y) % 360); 
s>180 && (s= 360— s); 
var scale= (180 — s)/180 * 0.8+0.2; 
myBox. children[ i]. style. opacity= scale; } } }; 
</script > 
< style type= "text/css"> 
x { margin: 0; padding: 0; list- style: none; } 
body { background: #000; } 
#myBox { width: 200px; height: 200px; position: absolute; margin - left: ~ 65px; 
top: 80px; left: 50% ;background: transparent; 
transform: rotateY(0deg) rotateX( - 10deg); transform - style: preserve— 3d; } 
#myBox div { position: absolute;left: 0; top: 0;width: 100% ; height: 100%; 
box - shadow: 0 0 5px 2px #FFF; border - radius: 5px; } 
/* 产 生 倒影 效果 */ 
#myBox div span { position: absolute;left: 0; top: 0; width: 100% ; height: 100%; 
transform: translateY(10px) scale(1, -1);transform- origin: center bottom; 
一 webkit - mask: - webkit- linear ~- gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1)); 
‘opacity: 0.4; } 
</style></head> 
<body>< div id = "myBox"></div></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,rotateX(angle) 表 示 沿 着 X 轴 按 照 指 
定 的 角度 进行 3D 旋转 ; rotateY(angle) 表 示 沿 着 立轴 按照 指定 的 角度 进行 3D 旋转 ; translateZ(z) 表 
示 根 据 参 数值 进行 Z 轴 3D 转换 ; transform-style: preserve-3d 规定 在 3D 空间 中 子 元 素 将 保留 其 3D 
位 置 ; myDiv. style. transition 一 '1s all ease' 表 示 在 1 秒 内 以 ease 方式 根据 变动 的 参数 执行 rotateX()、 
rotateY() translateZ() 等 动作 。 

此 实例 的 源 文件 名 是 myHtmlB322. html。 
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此 实例 主要 在 过 渡 动 画 transition 中 调用 rotateY() 、scale( ) 等 方法 ,从 而 实现 在 Metro 风格 的 布 


局 中 以 动态 效果 显示 和 关闭 模块 对 应 的 窗口 。 当 在 Google Chrome 浏览 器 中 显示 该 
风格 的 模块 布局 如 图 271-1 所 示 , 使 用 鼠标 单 击 任 一 模块 ,例如 
出 “电子 邮件 ”对 应 的 窗口 ,如 图 271-2 所 示 ; 单 击 该 窗口 右上 角 的 关闭 按钮 , 则 将 关闭 
应 的 窗口 ,返回 到 Metro 风格 的 主 界面 ,如 图 271-1 所 示 。 使 用 鼠标 单 击 其 他 模块 将 
能 。 有 关 此 实例 的 主要 代码 如 下 。 
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个 人 设置 


图 271-1 
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图 271-2 


<!doctype html ><html >< head ><meta charset = "UTF — 8"> 
<script src= "js/jquery -3.1.1.min. js"></script >< script type = "text/javascript"> 


页 面 时 , Metro 


电子 邮件 ”, 则 将 以 旋转 放大 的 方式 滑 


“电子 邮件 ”对 
实现 类 似 的 功 
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$ (document) .ready(function() { 
var myBox =$ ('. myBox'); 
$ ('. myMetro 1i'). each(function() { 
var myColor = $ (this) .css('backgroundColor'); 
var myContent =$ (this). html(); 
$ (this).click(function() {// 响 应 单 击 打 开 模 块 
myBox. css( 'backgroundColor', myColor); 
myBox. addClass( 'open' ) ; 
myBox. find( 'p'). html (myContent); 
1D); 
$ ('.close').click(function() {// 响 应 单 击 关 闭 模块 
myBox. removeClass( 'open' ); 
myBox. css( 'backgroundColor', 'transparent'); 
D721);}); 
</script > 
<style type= "text/css"> 
body { background: #363B48; } 
ul, ul li{ list— style: none; } 
.myMetro { width: 630px; margin - top: 50px; } 
/* 设 置 模块 的 基本 样式 * / 
.myMetro 1i { cursor: default; position: relative; text— align: center; 
margin: 0 10px 10px 0; width: 150px; height: 150px; 
Color: #FFFFFF; float: left; cursor: pointer; } 
/* 设 置 模块 中 的 文本 样式 */ 
.myMetro 1i span { color: rgba(255, 255, 255, 0.8); font - size: 30px; 
line— height: 150px; text ~ align: center;} 
/* 设 置 第 1 个 模块 样式 * / 
.myMetro 1i:first - child { background: #00B6DE; } 


/* 设 置 第 2 个 模块 样式 * / 

.myMetro li:nth- child(2) { background: #56DEA7; width: 310px; } 
/* 设 置 第 3 个 模块 样式 */ 

.myMetro li:nth- child(3) { background: #FF7659; margin: 0; } 
/* 设 置 第 4 个 模块 样式 */ 

.myMetro li:nth— child(4) { background: #F8CD36; } 

/* 设 置 第 5 个 模块 样式 */ 

.myMetro li:nth— child(5) { background: #F26175; } 

/* 设 置 第 6 个 模块 样式 */ 

.myMetro li:nth— child(6) { background: #5CA7DF; } 

/* 设 置 第 7 个 模块 样式 */ 

.myMetro li:last — child { background: #9E7AC2; margin: 0; } 
/* 弹 出 窗口 的 基本 设置 * / 


.myBox { display: table; top: 0; visibility: hidden; top: 0; left: 0; 
z— index: —1; transform: rotateY(180deg) scale(0.1); position: absolute; 
width: 100% ; height: 100% ;opacity: 0; transition: ls all; } 
/* 弹 出 窗口 中 的 文本 设置 * / 
.myBox p {display: table- cell; vertical -align: middle; 
font - size: 64px; color: 井 FFFFFF;text- align: center; margin: 0; 
opacity: 0; transition: 0.2s; transition- delay: 0.2s; } 
/* 弹 出 窗口 的 关闭 按钮 设置 * / 
.myBox .close { display: block; cursor: pointer; position: absolute; 
border: 3px solid rgba(255, 255, 255, 1); border - radius: 50 %; 
top: SOpx; right: 50px; width: 50px; height: 50px;transform: rotate(45deg); 
transition: 0.2s; transition - delay: 0.2s; opacity: 0; } 


贺 | 
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/x* 绘 制 弹出 窗口 的 关闭 按钮 的 左 斜 线 */ 
.myBox .close: :before { content: ""; display: block; position: absolute; 
background - color: rgba(255, 255, 255, 1); 
width: 80 %; height: 6% ;left: 10% ; top: 47% ; } 
/* 绘 制 弹出 窗口 的 关闭 按钮 的 右 斜 线 * / 
.myBox .close: :after { content: ""; display: block; position: absolute; 
background - color: rgba(255, 255, 255, 1); 
width: 6% ; height: 80% ; left: 47% ; top: 10%; } 
/* 显示 模块 的 弹出 窗口 */ 
.myBox. open { left: 0; top: 0; visibility: visible; opacity: 1;z — index: 999; 
transform: rotateY(0deg) scale(1); width: 100 % ; height: 100%; } 
. myBox. open .close, .myBox.open p { opacity: 1; } 
</style></head> 
<body><ul class = "myMetro"> 
<1i>< span > 游戏 专区 </span ></1i><1i>< span> 个 人 设置 </span></1i> 
<1i>< span > 电子 邮件 </span ></1i><1i>< span> 消 息 提醒 </span></1i> 
<1i>< span > 音乐 专区 </span></1i><1i><span> 个 人 收藏 </span ></1i> 
<1i><span> 个 人 照片 </span></1i></ul> 
<div class = "myBox">< span class = "close"></span><p></p></div></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,rotateY(180deg) 表 示 沿 着 Y 轴 旋 转 
180"; scale(0. 1) 表 示 按 照 0. 1 比例 缩放 窗口 ; transition: 1s all 表示 在 1 秒 完成 动画 转换 ,即将 
transform: rotateY(180deg) scale(0. 1) 过 渡 到 transform: rotateY(0deg) scale(1)。 

此 实例 的 源 文件 名 是 myHtmlB334. html。 


272 ”使 用 transition 属性 实现 菜单 栏 的 折 秋 和 展开 


此 实例 主要 在 transition 属性 中 改变 菜单 栏 的 宽度 等 属性 值 ,从 而 实现 菜单 栏 的 折 共 和 展开 。 当 
在 Google Chrome 浏览 器 中 显示 该 页 面 时 , 单 击 展开 按钮 "十 ”, 如 图 272-1 所 示 , 则 将 展开 菜单 栏 的 
所 有 菜单 项 ,如 图 272-2 所 示 ; 单 击 菜单 栏 左 端 的 关闭 按钮 “Xx”, 如 图 272-2 所 示 , 则 将 折 全 菜单 栏 的 
所 有 菜单 项 ,如 图 272-1 所 示 。 有 关 此 案例 的 主要 代码 如 下 。 
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图 272-2 


从 HTML5+CSS3 炫 酷 应 用 实例 集锦 





<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
< script src= "js/jquery - 3.1.1.min. js"></script>< script type = "text/javascript"> 
$ (function() { 
$ (". myButton"). click( function() { 
$ (this). toggleClass("active"); 
$ (". myMenus"). toggleClass( "open"); 
D2}); 
</script> 
<style type= "text/css"> 
body { background - color: #F2F3F4; } 
/* 设 置 按钮 菜单 盒子 的 基本 样式 * / 
#myBox { text — align: center;font ~ family: 'Consolas'; 
margin: 50px auto; width: 100%; 
max — width: 670px; min— width: 550px;} 
/* 设 置 按钮 的 基本 样式 * / 
.myButton { width: 70px; height: 70px; border — radius: 50%; 
text - align: center; background— color: #3ABO9E; 
Color: #3FFFFFF; font— size: 3.5em; position: relative; 
left: 50% ; margin— left: — 35px; z — index: 1; } 
.myButton, .myMenus { transition: all 1s cubic ~ bezier(0.87, —0.41, 0.19, 1.44);} 
/* 设 置 展 开 按 钮 */ 
.myButton:after { content: "+";} 
/* 设 置 关闭 按钮 */ 
.myButton. active { transform: rotate(45deg); left: 60px; } 
/* 设 置 菜单 栏 * / 
.myMenus {width: 0 % ; overflow: hidden;height: 36px; list- style: none; 
padding: 16px 10px 10px 50px; background - color: cyan; 
box - shadow: 1px lpx 1px 1px #DCDCDC; margin: -68px 0 0 45% ; border— radius: 2em; } 
/* 显示 菜单 栏 * / 
. myMenus. open { width: 95% ; margin: — 68px 0 0 5% ;overflow: hidden; } 
/* 隐藏 菜单 项 * / 
.myMenus 1i { display: none; } 
/* 显示 菜单 项 * / 
.myMenus. open 1i { width: 120px; font - size: 24px;display: inline ~ block; } 
</style></head> 
<body><div id = "myBox"><div class = "myButton"></div> 
<ul class = "myMenus"><1i><i> Investors </i>|</li><1i><i>Residents </i>|</1i> 
<1i><i>Visitors </i>|</li><1i><i>Government </i></1i></ul></div> 
</body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , $ (this). toggleClass ("active") 中 
的 toggleClass() 方 法 用 于 在 菜单 栏 的 关闭 按钮 和 打开 按钮 之 间 进 行 切换 。toggleClass( ) 方 法 是 
jQuery 的 一 个 方法 , 它 用 于 对 设置 或 移 除 被 选 元 素 的 一 个 或 多 个 类 进行 切换 ,该 方法 检查 每 个 元 素 中 
指定 的 类 ,如 果 不 存在 则 添加 类 ,如 果 已 设置 则 删除 ,这 就 是 所 谓 的 切换 效果 。transition: all 1s 
cubic-bezier(0. 87,， 一 0. 41, 0. 19，1. 44) 表 示 在 1 秒 内 以 cubic-bezier(0. 87, 一 0. 41, 0.19, 1.44) 方 
式 执行 改变 菜单 栏 宽度 等 属性 值 的 所 有 动作 。 

此 实例 的 源 文件 名 是 myHtmlB338. html。 
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273 ”使 用 transition 属性 模仿 光 柱 划 过 夜空 的 效果 


此 实例 主要 通过 在 transition 中 改变 渐变 图 形 ( 光 柱 ) 的 位 置 模仿 光 柱 划 过 夜空 的 效果 。 当 在 
Google Chrome 浏览 器 中 显示 该 页 面 时 ,如 果 鼠 标 指针 悬浮 在 图 像 上 , 则 渐变 图 形 ( 光 柱 ) 将 从 左上 角 
划 向 右 下 角 ,直到 消失 ,如 图 273-1 所 示 ; 如 果 鼠 标 指针 离开 图 像 , 则 渐变 图 形 ( 光 柱 ) 将 从 右 下 角 划 向 
左上 角 , 直 到 消失 。 有 关 此 实例 的 主要 代码 如 下 。 
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<!doctype html ><html >< head > <meta charset = "UTF — 8"> 
<style type= "text/css"> 
/* 设 置 背景 包含 渐变 图 形 ( 光 柱 ) 和 图 像 的 div 块 的 基本 样式 */ 
.myAurora { width: 400px; height: 250px;border — radius: 10px; 
background: — webkit - linear - gradient( - 30deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 
255, 0) 230px, rgba(255, 255, 255, 0.45) 260px, rgba(255, 255, 255, 0.1) 270px, rgba(255, 
255, 255, 0) 300px, rgba(255, 255, 255, 0) 310px) no - repeat, url (img/B353. jpg) no — 
repeat; background— size: 100% 100% ;transition:2s background— position ease- in- out; 
background — position: -300px 0,0 0; } 
/* 当 鼠标 指针 悬浮 时 改变 渐变 疼 形 的 位 置 * / 
.myAurora: hover { background - position:300px 0,0 0; } 
</style></head> 
<body>< div align = "center" > 
<div class= "myAurora " align= "center"></div></div></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,-webkit-linear-gradient (一 30deg， 


rgba(255, 255, 255, 0) 0, rgba(255, 255 












5, 0.45) 260px, rgba 

5, 0.1) 270px，rgba(255 5. 0) 300px, rgba(255, 25 ，0) 310px) 用 于 
创建 一 个 倾斜 30 的 线性 渐变 图 形 ( 光 柱 ),0. 45 是 透明 度 值 (范围 为 0 一 1， 如 果 和 希 柱 强 , 此 值 可 以 
大 一 些 ,反之 则 小 一 点 ), 一 30deg 表示 渐变 图 形 的 渐变 方向 ,如 果 将 此 值 设 置 为 即 


background: -webkit-linear gradient( 30deg. rgba(255, 











, 255, 0) 0, rgba(255, 2 





230px, rgba(255, 255, 255, 0. 45) 260px, rgba(255, 255, 255, 0.1) 270px, rgba(255, 255, 255, 
0) 300px, rgba(255, ，255, 0) 310px) no-repeat,url(img/B353. jpg) no-repeat, 则 当 和 鼠标 指针 县 
浮 在 图 像 上 时 渐变 图 形 ( 光 柱 ) 将 从 左下 角 划 向 右上 角 , 直到 消失 ; 当 和 鼠标 指针 离开 图 像 时 渐变 图 形 
( 光 柱 ) 将 从 右上 角 划 向 左下 角 , 直 到 消失 。background-position: 一 300px 0,0 0 用 于 设置 渐变 图 形 和 
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图 像 的 位 置 ,逗号 之 前 的 坐标 用 于 设置 渐变 图 形 ( 光 柱 ) 的 位 置 ,逗号 之 后 的 坐标 用 于 设置 图 像 的 位 
置 。transition:2s background-position ease-in-out 表示 在 两 秒 内 以 ease-in-out 方式 完成 background- 
position :一 300px 0,0 0 到 background-position: 300px 0.0 0 的 改变 。 

此 实例 的 源 文件 名 是 myHtmlB353. html。 


274 ”使 用 transition 属性 和 逐 字 旋 转 切 换文 本 的 状态 


此 实例 主要 在 transition 中 执行 改变 字符 角度 和 颜色 的 动作 ,从 而 实现 在 旋转 的 过 程 中 逐 字 将 绿 
色 的 文字 变 成 红色 的 文字 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,“CSS3 炫 酷 实例 集锦 ”字符 
串 将 以 绿色 显示 ,如 果 鼠 标 指针 悬浮 在 该 字符 串 上 , 则 将 从 左 向 右 把 每 个 字符 旋转 360 ,并 将 其 颜色 
改变 为 红色 ,如 图 274-1 所 示 ; 当 鼠 标 指针 离开 该 字符 串 时 执行 相反 的 动作 。 有 关 此 实例 的 主要 代码 
如 下 。 
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图 274-1 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<script src= "js/jquery -3.1.1.min. js"></script >< script type = "text/javascript"> 

$ (function( ){ 

var myTitle= $ ("a"). text(),myChar = ""; 

// 获 取 每 个 字符 (10 为 字符 串 的 字符 个 数 ) 

for(var i= 0;i<10;i++){ myChar += "< span>" +myTitle.substr(i,1)+"</span>"; } 

$ ("a"). html (myChar); 

for(var i=1;i<=$(".myRotate span"). length;i++){ 
// 设 置 每 个 字符 需要 等 待 的 时 间 (注意 与 -webkit - transition: 1s 适 配 ) 
$ (".myRotate span:nth— child("+ i+")").css(" — webkit— transition— delay", ((i—1)*0.2)+"s"); 
} 1); 
</script > 
<style type = "text/css"> 

/x* 设置 字符 串 的 基本 样式 */ 

.myRotate{ margin - top:50px;outline: none; position: relative; font - weight: bold; display: inline— 
block; text - decoration: none; text ~ transform: uppercase; font - size: 48px; text — shadow: 2px 2px 10px 
black;} 

/* 设置 字符 的 基本 样式 */ 

.myRotate span{ display: inline - block; position: relative; 

— webkit — transform:rotateY(0deg); — webkit — transition: 1s; color: darkgreen;} 
/* 设 置 鼠标 指针 悬浮 在 字符 串 上 时 字符 的 基本 样式 * / 
.myRotate: hover span { color: red; -~ webkit ~ transform:rotateY(360deg); } 
</style></head> 
<body>< div align = "center"><a class = "myRotate” href = " 井 "> CSS3 炫 酷 实 例 集 锦 </a></div></body> 
</html > 
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上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,-webkit-transform: rotateY 
(360deg) 用 于 将 每 个 字符 旋转 360"; -webkit-transition: 1s 表示 在 1 秒 内 完成 改变 字符 颜色 和 旋转 
的 动作 ; $ (". myRotate span: nth-child(" 十 i 十 ")"). css("-webkit- transition-delay", ((i-1) * 0. 2) 十 











"s") 中 的 transition-delay 属性 用 
此 实例 的 源 文件 名 是 myHtmlB354. html。 
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于 规定 在 过 渡 动 画 开始 之 前 需要 等 待 的 时 间 , 以 秒 或 毫秒 计 。 


使 用 transition 属性 放大 显示 当前 菜单 项 


此 实例 主要 在 transition 中 执行 scaleX() 和 scaleY() 方 法 的 放大 动作 ,从 而 实现 在 鼠标 指针 悬浮 
时 以 动画 的 效果 放大 当前 菜单 项 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,如 果 鼠 标 指针 悬浮 
在 第 二 个 菜单 项 上 , 则 放大 效果 如 图 275-1 所 示 ; 如 果 鼠 标 指针 悬浮 在 其 他 菜单 项 上 ,也 将 实现 类 似 


的 功能 。 有 关 此 实例 的 主要 代码 如 下 。 
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畅销 图 书 排行 榜 


静心 阅读 
HTML5+CSS3 从 入门 到 精通 
HTML5 与 C 战 指南 

深入 浅 出 HTML5 编 程 


HTML5 移 动 Web 开 发 指南 


从 零 开 始 学 HTML5+CSS3 





<!doctype html >< html >< head > <meta charset = "UTF - 8"> 
< style type= "text/css"> 

::before, * : :after { box - sizing: border ~ box; } 
x {margin: 0;padding: 0;} 

0l,0l li{list— style: none;} 


/* 设 置 盒子 的 基本 样式 * / 


类 类 





如 





.myMenu { margin:10px auto; width: 385px; height: 308px;border - radius: 10px; 
background: - webkit - linear - gradient(top, #3A404D， #181C26); 


box — shadow: 0 7px 30px rgba(62, 9, 11, 0.3); } 
/* 设 置 标题 的 基本 样式 * / 


.myMenu hl { font - size: 20px; color: yellow; padding: 12px 13px 18px; } 


myMenu ol { /* 设置 计数 器 值 ,默认 为 0* / 
counter — reset: myMenu; } 
/* 设 置 每 行 的 基本 样式 * / 
. myMenu ol 1i { position: relative; z- index: 1; font- size: 14px; 
/x 自 增 计数 */ 


counter - increment: myMenu; padding: 18px 10px 18px 50px; } 
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/* 设 置 序号 的 基本 样式 * / 
.myMenu ol 1i::before { content: counter(myMenu); position: absolute; 
z- index: 2; top: 15px; left: 15px;width: 20px; height: 20px;line— height: 20px; 
color: #C24448; background: #FFF; border - radius: 20px;text - align: center; } 
/* 设 置 书 名 的 基本 样式 , mark 是 HTML5 的 固有 标签 * / 
. myMenu ol 1i mark { position: absolute; z — index: 2; width: 320px; height: 48px; 
top: 0; left: 0; margin: 0; padding: 18px 10px 18px 50px; 
/* 注意 此 处 不 能 设置 背景 颜色 * / 
background: none; color: #FFF; overflow: hidden; 
text - overflow:ellipsis; white— space:nowrap; } 
/* 设 置 单价 的 基本 样式 , small 是 HTML5 的 周 有 标 签 * / 
. myMenu ol li small { position: relative; color: #FFF; 
z- index: 2; display: block; text — align: right; } 
/* 设 置 鼠标 指针 悬浮 前 每 行 的 基本 样式 * / 
.myMenu ol li::after {content: ''; position: absolute; top: 0;left: 0; 
width: 100% ;height: 100% ;box— shadow: 0 3px 0 rgba(0, 0, 0, 0.08); 
— webkit ~ transition:all 0.3s ease— in— out; } 
/* 设 置 鼠标 指针 悬浮 前 第 1 行 的 背景 颜色 */ 
.myMenu ol li:nth- child(1), .myMenu ol li:nth— child(1)::afterf 
background: 井 FR6855; } 
/* 设 置 鼠标 指针 悬浮 前 第 2 行 的 背景 颜色 * / 
.myMenu ol li:nth- child(2), .myMenu ol li:nth— child(2)::after { 
background: 井 E0574F; } 
/* 设 置 鼠标 指针 悬浮 前 第 3 行 的 背景 颜色 * / 
.myMenu ol li:nth- child(3), .myMenu ol li:nth— child(3)::afterf 
background: #D7514D; } 
/* 设 置 鼠标 指针 悬浮 前 第 4 行 的 背景 颜色 * / 
.myMenu ol li:nth— child(4), .myMenu ol li:nth— child(4)::after{ 
background: #CD4B4B; } 
/* 设 置 鼠标 指针 悬浮 前 第 5 行 的 背景 颜色 * / 
.myMenu ol li:nth— child(5), .myMenu ol li:nth— child(5)::after{ 
background: 井 C24448; border - radius: 0 0 10px 10px; } 
/* 设 置 当前 行 位 于 最 顶层 * / 
.myMenu ol 1i:hover { z — index: 2; overflow: visible; } 
/* 设 置 鼠标 指针 悬浮 每 行 后 的 样式 x / 
.myMenu ol li:hover: :after { background - color :green; border - radius: 5px; 
— webkit ~ transform: scaleX(1.06) scaleY(1.03);} 
</style></head> 
<body>< div class = "myMenu" align = "center"> 
<hl > 静心 阅读 5 月 份 畅 销 图 书 排行 榜 </hl > 
<ol><1i><mark> HIML5 + CSS3 从 入 门 到 精通 </mark>< small >¥ 47.50 </small ></1i> 
<1i><mark> HTML5 与 CSS3 实战 指南 </mark>< small > ¥ 35.55 </small></1i> 
<1i><mark> 深 入 浅 出 HTML5 编程 </mark >< small >¥ 82.80 </small></1i> 
<1i><mark> HTML5 移动 Web 开发 指南 </mark>< small>¥ 50.20</small ></li> 
<1i><mark> 从 零 开 始 学 HTML5 + CSS3 </mark >< small > ¥ 58.30 </small></1i> </ol ></div></body> 
</html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,scaleX(1. 06) 表 示 在 X 轴 方 向 将 元 
素 ( 菜 单项 盒子 ) 放 大 1. 06 倍 ; scaleY(1. 03) 表 示 在 Y 轴 方 向 将 元 素 (菜单 项 盒子 ) 放 大 1. 03 倍 ; - 
webkit-transition: all 0. 3s ease-in-out 表示 在 300 毫秒 内 以 ease-in-out 模式 完成 改变 菜单 项 大 小 、 颜 
色 及 其 他 属性 的 动作 。 

此 实例 的 源 文件 名 是 myHtmlB355. html。 
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276 ”使 用 transition 属性 显示 或 隐藏 侧 边栏 菜单 项 


此 实例 主要 在 transition 中 执行 scale() 方 法 的 放大 动作 ,从 而 实现 隐藏 或 显示 侧 边栏 菜单 项 的 
效果 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,如 果 使 用 鼠标 单 击 右上 角 的 菜单 按钮 , 则 将 从 右 
上 和 角 滑 出 侧 边栏 菜单 ,如 图 276-1 所 示 ; 如 果 使 用 鼠标 单 击 侧 边栏 右上 角 的 关闭 按钮 ,如 图 276-1 所 
示 , 则 侧 边栏 将 收缩 成 菜单 按钮 。 有 关 此 实例 的 主要 代码 如 下 。 
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<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<script src= "js/jquery -3.1.1.min.js"></script >< script type= "text/javascript"> 
$ (function() { 
$('. myMenu' ).click( function() { /x* 响应 鼠标 单 击 小 圆 形 菜单 按钮 x / 
$ ('.myMenu'). toggleClass( 'myMenu_ clicked' ); 
$ ('.myLinel'). toggleClass( 'myLinel clicked'); 
$ ('.myLine2'). toggleClass( 'myLine2_ clicked'); 
$ ('.myLine3').toggleClass( 'myLine3 clicked'); 
$('.myMenu list').toggleClass( 'myMenu list clicked’); 
1);}) 
</script > 
<style type= "text/css"> 
body { background - color: lightseagreen; } 
/* 设 置 盒子 的 基本 样式 * / 
.myBox { background - color: transparent; position: fixed; 
width: 200px; height: 100% ; top: Opx; right: Opx; 
/* 小 圆 形 盒子 放大 后 自动 裁剪 超出 部 分 */ 
overflow: hidden ! important; z— index: 5; } 
/* 设 置 小 圆 形 盒子 的 基本 样式 * / 
.myMenu { float: right; margin: 15px 15px 0 0; height: 49px; width: 49px; 
border — radius: 50% ; background— color: blue; border: none; cursor: pointer; 
/* 隐藏 时 的 过 渡 动 画 * / 
transition: all 0.5s ease— out; } 
/* 单 击 小 圆 形 盒子 显示 侧 边栏 * / 
.myMenu_clicked { transform: scale(200); 
/* 显示 时 的 过 渡 动 画 * / 
transition: all 0. 35s ease - in; cursor: default; } 


/* 绘 制 第 1 条 横 线 * / 
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.myLinel{ background: 井 FFF; height: 2px; width: 15px; position: absolute; 
right: 33px; top: 33px; transition: all 0.3s; } 
/* 绘 制 第 2 条 横 线 * / 
.myLine2 {background: #FFF; height: 2px; width: 15px; 
position: absolute; opacity: 1; right: 33px; top: 38px; 
transition: opacity 0.5s; } 
/* 绘 制 第 3 条 横 线 * / 
.myLine3 {background: #FFF; height: 2px; width: 15px; 
position: absolute; right: 33px; top: 43px;} 
/* 单 击 之 后 第 1 条 横 线 旋转 45 交叉 */ 
.mybinel_clicked { animation: closetop 1s forwards alternate; cursor: pointer; } 
/* 单 击 之 后 隐藏 第 2 条 横 线 * / 
.myDine2_clicked { opacity: 0; cursor: pointer; transition: opacity 0.5s; } 
/* 单 击 之 后 第 3 条 横 线 旋转 45 交叉 * / 
.mYLine3_clicked { animation: closebottom 1s forwards alternate; 
cursor: pointer; } 
/* 第 1 条 横 线 旋转 45 的 关键 帧 * / 
@keyframes closetop {0#% { transform: translateY(5px) rotate(0deg); } 
25% { transform: translateY(5px) rotate(0deg); } 
75% { transform: translateY(5px) rotate( - 45deg); } 
100% {transform: translateY(5px) rotate( - 45deg); } } 
/* 第 3 条 横 线 旋转 45 的 关键 帧 * / 
@keyframes closebottom { 0% { transform: translateY(0px) rotate(0deg); } 
25% { transform: translateY( - 5px) rotate(0deg); } 
75% { transform: translateY( - 5px) rotate(45deg); } 
100% { transform: translateY( ~ 5px) rotate(45deg); } } 
/* 设 置 侧 边 栏 菜单 项 盒子 的 基本 样式 * / 
.myMenu_list { visibility: hidden; position: absolute; right: 50px; top: 40px; 
opacity: 0; transition: all 0.3s; } 
/* 在 鼠标 单 击 之 后 显示 侧 边栏 菜单 项 盒子 */ 
.myMenu_list clicked { visibility: visible; opacity: 1; 
transition: all 0.4s; transition — delay: 0.37s; } 


/x* 取消 列表 的 默认 样式 * / 
.myMenu list ul { list- style- type: none; } 
/x* 设 置 侧 边栏 菜单 项 的 基本 样式 * / 


.myMenu_ list ul lia { float: right; color: white; text - decoration: none; 
background - color: transparent; margin - top: llpx; } 
/* 设 置 鼠标 指针 悬浮 时 侧 边栏 菜单 项 的 文本 颜色 * / 
.myMenu_list ul li a:hover {color: green;} 
</style></head> 
<body>< div class = "myBox"><div id= "myMenu" class = "myMenu"></div> 
<span class = "myLinel"></span>< span class = "myLine2"></span> 
< span class= "myLine3"></span><div class = "myMenu list"> 
<ul><1i><ahref="#"> HTML5 专区 </a></1li><1i><a href ="#"> jQuery 专区 </a></1i> 
<1i><ahref =" 井 "> CSS3 专区 </a></1i><1i><a href="#"> BootStrap 专区 </a></1i> 
<1i><ahref =" 井 "> AngularJS 专区 </a></1i></ul ></div></div></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , $ ('. myMenu ' ). toggleClass 
('myMenu_clicked') 中 的 toggleClass() 方 法 是 jQuery 库 的 方法 ,用 于 对 设置 或 移 除 被 选 元 素 ( 菜 单 
按钮 ) 的 一 个 或 多 个 类 进行 切换 ,该 方法 检查 每 个 元 素 中 指定 的 类 ,如果 不 存在 则 添加 类 ,如 果 已 设置 
则 删除 ,这 就 是 所 谓 的 切换 效果 ; transform:scale(200) 表 示 将 圆 形 的 菜单 按钮 放大 200 倍 , 这 远 远 超 
出 了 屏幕 的 显示 范围 ,但 经 过 盒子 的 裁剪 之 后 ,这 个 圆 形 的 菜单 按钮 就 变 成 了 矩形 的 侧 边栏 ,3 条 横 线 
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也 变 成 了 关闭 按钮 ; transition: all 0. 35s ease-in 表示 在 350 毫秒 内 以 ease-in 模式 完成 侧 边 栏 的 
显示 。 
此 实例 的 源 文件 名 是 myHtmlB367. html。 


277 使 用 transition 属性 凸 出 显示 选项 卡 的 当前 标签 


此 实例 主要 在 transition 中 改变 选项 卡 标签 的 top 等 属性 ,从 而 实现 在 切换 选项 卡 标 签 时 凸 出 显 
示 当 前 鼠标 选中 的 标签 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,如 果 使 用 鼠标 单 击 * 乐 山大 
佛 ” 标 签 , 则 该 标签 将 从 所 有 等 高 的 标签 中 逐渐 向 上 凸 出 ; 如 果 使 用 鼠标 单 击 * 中 央 公 园 ” 标 签 , 则 该 标 
签 将 从 所 有 等 高 的 标签 中 逐渐 向 上 凸 出 ,其 他 标签 则 恢复 为 初始 状态 ,如 图 277-1 所 示 ; 使 用 鼠标 单 
击 “ 山 城 夜景 "标签 将 实现 类 似 的 功能 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 277-1 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<style type= "text/css"> 
body { background:black; 
font ~ family: microsoft yahei, Arial, Helvetica, sans— serif; } 
.myTabs { width: 450px; float: none; list - style: none; 
position: relative; text - align: left; } 

.myTabs li { float: left; display: block;} 

/* 隐藏 单 选 按钮 */ 

.myTabs input[type= "radio"] { position: absolute; top: — 9999px; left: - 9999px;} 

/* 设 置 选项 卡 标签 块 的 样式 */ 

.myTabs label { display: block; padding: 14px 21px; border - radius: 2px 2px 0 0; 
font - size: 20px; font - weight: normal; background: #6A9E52;cursor: pointer; 
position: relative; top: 10px; - webkit - transition: all 0.2s ease— in— out; 
border - top - left - radius: 5px; border - top - right - radius: 5px; 
border ~ right: solid lpx black;} 

/* 设 置 鼠 标 指针 悬浮 于 标签 时 的 样式 */ 

.myTabs label :hover { background: #508438; } 
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/=* 设 置 选项 卡 内 容 块 的 样式 * / 
.myTabs .myTab— content { z— index: 2; opacity: 0; overflow: hidden; width: 100%; 
font - size: 17px;line— height: 25px; padding: 25px; position: absolute; 
top: 53px; left: 0; background: #376B1F; border - radius: 10px;} 
/* 设 置 选中 标签 的 样式 */ 
.myTabs [id^ = "myTab" ] :checked + label {top: 0; padding - top: 17px; 
background: #376B1F; } 
/* 在 选中 标签 时 显示 内 容 * / 
.myTabs [id^ = "myTab"] :checked ~ [id^ = "myTab - content"] { opacity: 1; } 
/* 设 置 图 像 的 基本 样式 * / 
img {float: left; border- radius: 10px; padding: 5px; 
width: 210px; height: 135px;box— shadow: 2px 2px 10px black; 
margin - right: 12px; margin— top:17px; margin - bottom: 5px; margin— left:2px; } 
</style></head> 
<body >< div class = "content"><ul class = "myTabs"> 
<1i>< input type = "radio" name = "myTabs" id = "myTabl" checked/> 
< label for = "myTabl"> 乐 山大 佛 </label > 
<div id= "myTab— content1" class = "myTab - content"> 
< img src= "img/B118. jpg" style = "float:left;"><p> 乐 山大 佛 ,地 处 四 川 省 乐山 市 ,岷江 、 青 衣 江 和 大 渡河 
三 江 汇流 处 ,是 世界 上 最 大 的 石刻 大 佛 。 乐 山大 佛 头 与 山 齐 , 足 踏 大 江 , 双手 抚 膝 , 大 佛 体态 匀称 , 神 势 肃 穆 , 依 
山 雍 成 , 临 江 危 坐 。 大 佛 通 高 71 米 , 头 高 14.7 米 , 头 宽 10 米 ,发 器 1051 个 , 耳 长 6.7 米 , 鼻 和 由 长 5.6 米 , 嘴 巴 
和 了 眼 长 3.3 米 , 颈 高 3 米 , 肩 宽 24 米 ,手指 长 8. 3 米 ,从 膝盖 到 脚背 28 米 , 脚背 宽 9 米 , 脚面 可 围 坐 百人 以 上 。 
</p></div></1i> 
<1i>< input type= "radio" name = "myTabs" id= "myTab2"/> 
< label for = "myTab2"> 中 央 公园 </label > 
<div id= "myTab - content2" class = "myTab— content"> 
< img src = "img/B179A. jpg” style= "float:left;"> <p> 重 庆 中 央 公园 是 西南 地 区 最 大 的 开放 式 城市 中 心 
公园 , 西 距 在 建 的 悦 来 重庆 国际 会 展 城 3 公里 , 东 距 江北 国际 机 场 5 公里 。 它 是 一 个 依托 重庆 山水 风貌 特色 , 融 
会 中 西 文化 的 现代 城市 公园 ,将 成 为 重庆 新 地 标 。 开 园 后 ,将 与 年 底 投 用 的 国际 会 展 城 一 起 ,成 为 两 江 新 区 重大 
城市 功能 板块 。 这 是 国际 中 心 区 率先 启动 的 双核 ,这 里 也 将 成 为 重庆 新 中 心 最 大 的 休闲 去 处 , 重庆 的 标志 性 公 
园 。</p></div></1i> 
<1i>< input type= "radio”name= "myTabs" id= "myTab3"/> 
< label for = "myTab3"> 山 城 夜景 </label > 
<div id= "myTab - content3" class = "myTab— content"> 
< img src = "img/B179B. jpg”style= "float :left;"><p> 山 城 夜景 即 重庆 夜景 。 初 夜 山城 ,以 繁华 区 灯饰 群 
为 中 心 ,干道 和 桥梁 华灯 为 纽带 ,万 家 民居 灯火 为 背景 , 层 见 全 出 ,构成 一 片 高 下 井然 .错落 有 致 .远近 互 衬 的 灯 
的 海洋 。 更 兼 两 江波 澄 银 树 , 浪 卷 金 花 , 满 天 繁 星 似 人 间 灯 火 , 遍 地 华灯 若 天 河 群星 ,上 下 浑然 一 体 ,五 彩 交 相 辉 
映 , 如 梦 如 幻 ,如 诗 如 歌 , 堪 足 氛 人 耳目 ,动人 心 诈 。 不 览 夜 景 ,未 到 重庆 。</p></div></1i></ul></div> 
</body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,. myTabs [id “二 "myTab"j]: 
checked 中 的 “[id^ 一 "myTab"]? 是 一 个 属性 选择 器 ,原型 是 Lattribute ^ 一 value], 表 示 选 择 器 匹配 属 
性 值 以 指定 值 (例如 myTab) 开 头 的 每 个 元 素 ; -webkit-transition: all 0. 2s ease-in-out 表示 在 200 上 毫 
秒 内 以 ease-in-out 模式 完成 凸 出 显示 当前 标签 的 动作 。 

此 实例 的 源 文件 名 是 myHtmlB374. html。 


278 ”使 用 关键 帧 动画 定制 移动 和 旋转 的 图 像 


此 实例 主要 通过 使 用 关键 帧 动画 定制 移动 和 旋转 的 图 像 。 当 在 Google Chrome 浏览 器 中 显示 该 
页 面 时 ,摄像 机 图 像 初始 位 于 左上 和 角 , 当 鼠 标 指针 悬浮 在 摄像 机 图 像 上 时 , 则 摄像 机 图 像 执行 旋转 和 
移动 的 动作 ,如 图 278-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 278-1 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<style type= "text/css"> 
div {background — image: url("img/a050A. jpg");width: 400px; height: 250px;} 
img { position: absolute; top: 10px;left: 20px;} 
@keyframes myImage { 0% {top: 10px;left: 20px;transform: rotate(Odeg);} 
40% {top: 50px; left: 90px; transform: rotate(130deg); } 
70% {top: 90px; left: 220px;transform: rotate(220deg); } 
100% {top: 120px;left: 260px;transform: rotate(360deg);} } 
div :hover img {animation - name:myImage; animation— duration: 5s; 
animation - timing - function: linear;} 
</style></head> 
<body >< div>< img src = "img/B067A. png"/></div></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,animation-timing-function 用 于 设置 
动画 的 执行 过 程 中 的 速度 变化 模式 为 linear. animation-name 用 于 设置 动画 名 称 为 mylmage， 
animation-duration 用 于 设置 动画 的 持续 时 间 为 5 秒 。@keyframes 用 于 定义 关键 帧 集合 中 的 每 个 关 
键 帧 上 的 状态 。 除 了 animation-timing-function animation-name、animation-duration 几 个 常用 属性 
以 外 ,关键 帧 动画 还 可 以 使 用 下 列 属性 。 

(1) animation-delay: 用 于 指定 延迟 多 少 秒 或 多 少 毫秒 后 开始 执行 动画 。 

(2) animation-iteration-count: 用 于 指定 动画 的 执行 次 数 . 可 指定 为 infinite( 无 限 次 ) 。 

(3) animation-direction: 用 于 指定 动画 的 执行 方向 ,可 指定 的 属性 值 有 normal( 动 画 执行 完毕 后 
返回 初始 状态 ) ,alternate (交替 更 改动 画 的 执行 方向 )、reverse( 反 方向 执行 动画 )、alternate-reverse 
(从 反方 向 开始 交替 更 改动 画 的 执行 方向 ) 。 

此 实例 的 源 文件 名 是 myHtmlB067. html。 


279 ”使 用 关键 帧 动画 实现 闪烁 的 阴影 光 轿 


此 实例 主要 在 关键 帧 动画 的 animation 属性 中 设置 infinite( 无 限 次 ) 属 性 值 ,从 而 实现 在 元 素 的 
外 围 创建 不 断 闪烁 的 阴影 光圈 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,黄色 太阳 的 周围 有 个 
不 断 变换 的 红色 阴影 在 不 停 闪烁 ,如 图 279-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 279-1 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<style type= "text/css"> 
div { width: 200px; height: 200px; margin:100px; 
border — radius: 100px; box— shadow: 0 0 10px rgba(204, 102, 0, 0.8); 
background: yellow; 
animation: myFlash 1.5s ease infinite;} 
@keyframes myFlash { 0% { box- shadow: 0 0 50px rgba(255,0,0, 0.1);} 
50% { box— shadow: 0 0 100px rgba(255,0,0, 0.3);} 
100% {box— shadow: 0 0 150px rgba(255,0,0,0.8); } } 
</style></head> 
<body><div></div> 
</body ></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,@keyframes myFlash 用 于 设置 动画 
所 需要 的 myFlash 关键 帧 集合 中 的 多 个 关键 帧 ; animation: myFlash 1. 5s ease infinite 表示 采用 ease 
模式 在 1.5 秒 内 执行 完成 关键 帧 动画 集合 myFlash 中 的 所 有 关键 帧 .并且 永 不 停止 (infinite)。 
animation 属性 是 一 个 简写 属性 ,用 于 设置 6 个 动画 属性 , 即 animation-name、 animation-duration、 
animation-timing-function .animation-delay .animation-iteration-count animation-direction, 该 属性 的 
语法 格式 如 下 。 

animation: name duration timing - function delay iteration - count direction 


animation 属性 值 的 说 明 如 表 279-1 所 示 。 
表 279-1 animation 属性 值 及 说 明 

















属 性 值 描 述 
animation-name 规定 需要 绑 定 到 选择 器 的 keyframe 名 称 
animation-duration 规定 完成 动画 所 花费 的 时 间 ,以 秒 或 毫秒 计 
animation-timing-function 规定 动画 的 速度 曲线 
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续 表 
属 性 值 描 述 
animation-delay 规定 动画 开始 之 前 的 延迟 ,以 秒 或 毫秒 计 
animation-iteration-count 规定 动画 应 该 播放 的 次 数 
animation-direction 规定 是 否 应 该 轮流 反 向 播放 动画 





animation-timing-function 使 用 名 为 三 次 贝 塞 尔 (Cubic Bezier) 函数 的 数学 函数 来 生成 速度 曲线 ， 
用 户 可 以 在 该 函数 中 使 用 自己 的 值 ,也 可 以 使 用 预定 义 值 ,例如 linear( 动 画 从 头 到 尾 的 速度 是 相同 
的 ) ease( 上 默认 值 ,动画 以 低速 开始 ,然后 加 快 ,在 结束 前 变 慢 )、ease-in( 动 画 以 低速 开始 )、ease-out( 动 
画 以 低速 结束 ) 、ease-in-out( 动 画 以 低速 开始 和 结束 )。cubic-bezier(n, n,n,n) 表 示 存 cubic-bezier 函 
数 中 使 用 自 定义 值 ,可 以 是 从 0 到 1 的 数值 。 

animation-iteration-count 属性 定义 动画 的 播放 次 数 , 该 属性 值 可 以 是 具体 的 数字 ,也 可 以 使 用 
infinite 规定 动画 无 限 次 播放 。 

animation-direction 属性 定义 是 否 应 该 轮流 反 向 播放 动画 。 如 果 该 属性 值 是 alternate, 则 动画 会 
在 奇数 次 (1、3、5 等 ) 正 常 播放 ,而 在 偶数 次 (2、4、6 等 ) 反 向 播放 。 如 果 该 属性 值 是 normal, 即 默认 值 ， 
动画 正常 播放 。 

此 实例 的 源 文 件 名 是 myHtmlB068. html。 


280 ”使 用 关键 帧 动画 实现 以 淡 入 效果 显示 图 像 


此 实例 主要 通过 关键 帧 动画 控制 元 素 (img) 的 不 透明 度 (opacity) 来 实现 以 淡 入 效果 显示 图 像 。 
当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 .图 像 将 在 5 秒 内 以 由 浅 入 深 的 淡 入 效果 显示 出 来 ,如 
图 280-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 280-1 


<!doctype html >< html >< head ><meta charset = "UTF - 8"> 
< style type= "text/css"> 
@keyframes fadeIn { 0% { /x* 0.0 (完全 透明 ) * / opacity: 0; } 
100% {/* 1.0 (完全 不 透明 ) * / opacity: 1;} } 
ing {animation— name: fadeIn; animation - duration: 5s; border - radius: 15px; 
animation — timing ~ function: linear; animation— iteration 一 count: 1; } 
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</style></head> 
<body >< img src= "img/B069. jpg"/></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,opacity: 0 表示 完全 透明 ,看 不 见 图 
像 ; opacity: 1 表示 完全 不 透明 , 即 完 全 显示 图 像 。 当 加 载 网 页 时 ,浏览 器 将 根据 设置 的 关键 帧 动画 
属性 (animation-timing-function: linear 表示 以 均匀 速度 改变 不 透明 度 ,animation-iteration-count: 1 
表示 此 动画 仅 执 行 一 次 ,animation-duration: 5s 表示 在 5 秒 内 完成 动画 ) 以 由 浅 入 深 的 淡 入 效果 显示 
图 像 。 

此 实例 的 源 文件 名 是 myHtmlB069. html。 


281 使 用 关键 帧 动画 实现 以 卷 宿 效果 显示 图 像 


此 实例 主要 通过 关键 帧 动画 控制 元 素 (img) 的 顶端 坐标 top, 从 而 实现 以 卷 帘 效 果 显 示 图 像 。 当 
在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,图 像 将 在 5 秒 内 以 从 上 向 下 的 卷 帘 效 果 显 示 出 来 ,如 
图 281-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 281-1 


<!doctype html ><html >< head >< meta charset = "UTF ~ 8"> 
< style type = "text/css"> 
@keyframes slideDown{ 0% { top: -350px; } 100% { top: Opx;} } 
img {animation - name: slideDown;animation - duration: 5s; 
animation— timing ~ function: linear; animation— iteration— count: 1; 
border - radius: 15px;width:300px;height:350px; position: absolute;} 
</style></head> 
<body>< div>< img src = "img/B070. jpg"/></div></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,top: 一 350px 表示 图 像 在 浏览 器 之 
外 (因为 图 像 的 高 度 是 350px) ,因此 用 户 看 不 见 图 像 ; top: 0px 表示 图 像 在 浏览 器 的 顶端 , 即 完全 显 
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示 图 像 。 当 加 载 网 页 时 ,浏览 器 将 根据 设置 的 关键 帧 动画 属性 (animation-timing-function: linear 表 
示 以 匀速 改变 top 值 ,animation-iteration-count: 1 表示 此 动画 仅 执 行 一 次 ,animation-duration: 5s 表 
示 在 5 秒 内 完成 动画 ) 来 实现 以 从 上 向 下 的 卷 帘 效 果 显 示 图 像 。 

此 实例 的 源 文件 名 是 myHtmlB070. html。 


282 ”使 用 关键 帧 动画 实现 从 左 向 右 滑 人 图 像 


此 实例 主要 通过 关键 帧 动画 控制 元 素 (img) 的 左 端 坐标 left, 从 而 实现 以 从 左 到 右 的 抽 屠 效果 滑 
人 图 像 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 , 单 击 " 从 左 向 右 滑 人 人 图像” 按钮 , 则 将 在 5 秒 内 
以 从 左 向 右 的 抽 慑 效果 滑 和 图像 ,如 图 282-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 282-1 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<script src= "js/jquery — 3.1.1.min.js"></script >< script language = "javascript"> 
$ (document). ready(function() { 
$ ("myBtnIn").click(function() { // 从 左 向 右 滑 人 图 像 
$ ("img").css("display", "block"); 
$ ("img").css("animation— name", "slideIn"); 
D2;}); 
</script > <style type = "text/css"> 
@keyframes slideIn { 0% {left: — 390px;} 100% {left: Opx; } } 
img {animation— duration: 5s; animation— timing - function: linear; 
animation - iteration— count: 1; width: 390px; height: 250px; 
position: absolute; display: none;} 
</style></head> 
<body><p>< input type = "button" value = "从 左 向 右 滑 人 图像 " id= "myBtnIn" style = "width:390px"></p> 
<div>< img src = "img/B071. jpg" 人 /></div></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,left: 一 390px 表示 图 像 在 浏览 器 左 
端 之 外 (因为 图 像 的 宽度 是 390px) ,因此 用 户 看 不 见 图 像 ; left: 0px 表示 图 像 在 浏览 器 的 左 端 , 即 完 
全 显示 图 像 。 每 个 关键 帧 动画 必须 设置 动画 名 称 animation-name, 否则 动画 不 被 执行 。 此 实例 通过 
jQuery 代码 “ $("img"). css("animation-name"，"slideljn")” 设 置 动 画 名 称 , 因 此 在 单 击 按钮 后 浏览 
器 将 根据 关键 帧 动画 属性 (animation- timing-function: linear 表示 匀速 改变 left 值 , animation- 
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iteration-count: 1 表示 此 动画 仅 执行 一 次 .animation-duration: 5s 表示 在 5 秒 内 完成 动画 ) 来 实现 以 
从 左 向 右 的 滑 和 人 效果 显示 图 像 。 
此 实例 的 源 文件 名 是 myHtmlB071. html。 


283 ”使 用 关键 帧 动画 高 仿 抽奖 转盘 的 转动 特效 


此 实例 主要 通过 关键 帧 动画 控制 元 素 (img) 的 transform 属性 指定 的 rotate() 方 法 ,从 而 实现 高 
仿 抽奖 转盘 的 转动 特效 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,开始 抽奖 ?指针 将 围绕 中 心 
变速 旋转 ,如 图 283-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 283-1 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
< style type = "text/css"> 
@keyframes myPendulum { 0% { transform: rotate(0deg); } 
100% {transform: rotate(360deg); } } 
img { animation - name: myPendulum; animation - duration: 2s; 
animation— timing ~ function: ease; animation - iteration - count: infinite; 
width: 200px; height: 200px; top: 110px; left: 110px; position: absolute; } 
div { width: 400px;height: 400px; background - image: url("img/B072A. png" ) 
background - size: 100% 100%;} 
</style></head> 
<body>< div>< img src= "img/B072B.png"/></div></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 .0% { transform: rotate(0deg) 表 示 
最 初 不 执行 旋转 .100% {transform: rotate(360deg) 表 示 旋 转 360"; animation-duration: 2s 表示 此 动 
夯 旋 转 一 次 的 时 间 是 两 秒 . animation-timing- function: ease 表示 在 两 秒 内 此 动画 按照 ease( 动 画 以 
低速 开始 ,然后 加 快 , 在 结束 前 变 慢 ) 模 式 执行 旋转 .animation-iteration-count: infinite 表示 旋转 一 周 
后 重新 开始 ,并 且 永 不 结束 。 

此 实例 的 源 文件 名 是 myHtmlB072. html。 
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284 ”使 用 关键 帧 动画 高 仿 弹 得 的 拉 伸 、 压 缩 效 果 


此 实例 主要 通过 关键 帧 动画 控制 元 素 (img) 的 transform 属性 指定 的 scaleX() 方 法 ,从 而 实现 在 
X 轴 方向 上 拉 伸 和 压缩 弹簧 的 效果 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,弹簧 将 自动 在 X 
轴 方 向 上 拉 伸 和 压缩 ,如 图 284-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 284-1 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<style type= "text/css"> 
@Kkeyframes myScaleX { 0% { transform: scaleX(1.0);} 
100% { transform: scalex(0.7); } } 
img {animation— name: myScaleX; animation ~ duration: 2s; 
animation ~ timing ~ function: ease; animation - iteration ~ count: infinite; 
animation - direction:alternate;} 
div{ display: table- cell; vertical -align: middle; 
text - align: center; width:350px; height:100px; } 
</style></head> 
<body >< div>< img src = "img/B073. jpg"/></div> 
</body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,0% {transform: scaleX(1,0);} 表 示 
开始 压缩 时 的 (弹簧 的 ) 原 始 长 度 ,100% (transform: scaleX(0.7);} 表 示 结 束 压缩 时 的 (弹簧 的 ) 长 
度 ; animation-duration: 2s 表示 此 动画 压缩 (或 拉 伸 ) 一 次 的 时 间 是 两 秒 ,animation-timing-function 
ease 表示 在 两 秒 内 此 动画 按照 ease( 动 画 以 低速 开始 ,然后 加 快 ,在 结束 前 变 慢 ) 模 式 执行 拉 伸 和 压 
缩 , animation-iteration-count: infinite 表示 拉 伸 和 压缩 的 动画 永 不 结束 , animation-direction， 
alternate 表示 拉 伸 和 压缩 动画 交替 进行 。 

此 实例 的 源 文件 名 是 myHtmlB073. html。 


285 ”使 用 关键 帧 动画 实现 多 个 图 像 自 动 轮 播 


此 实例 主要 通过 在 animation 属性 中 设置 关键 帧 动画 实现 多 个 图 像 的 自动 轮 播 。 当 在 Google 
Chrome 浏览 器 中 显示 该 页 面 时 将 自动 无 限 循环 地 轮 播 4 幅 图 像 , 当 显示 第 一 幅 图 像 时 ,图 像 与 右上 
角 的 索引 的 显示 效果 如 图 285-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 

<!doctype html >< html >< head ><meta charset = UTF -8> 


< style type = "text/css"> 
/* 设 置 轮 播 图 像 的 关键 帧 * / 
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@ - webkit — keyframes slide { from to { top: 0; } 
12.5% {top: 0; } 25% { top: -375px; } 
37.5% { top: —375px; } 50% { top: — 750px; } 
62.5% { top: -750px; } 75% { top: - 1125px;} 
87.5% { top: — 1125px;} } 
/=* 设 置 轮 播 索引 的 关键 帧 * / 
@ - webkit — keyframes index 1 { from, 25%, to { background- color: rgba(0, 0, 0, 0.5);} 
0% {background— color: rgba(255, 0, 0, 0.5); } } 
@ - webkit — keyframes index 2 {from, 50%, to { background— color: rgba(0, 0, 0, 0.5); } 
25% { background - color: rgba(255, 0, 0, 0.5); } } 
@ - webkit ~ keyframes index_ 3 { from, 75%, to { background- color: rgba(0, 0, 0, 0.5);} 
50% { background - color: rgba(255, 0, 0, 0.5); } } 
@ - webkit ~ keyframes index 4 {from, 100%, to { background— color: rgba(0, 0, 0, 0.5);} 
75% { background - color: rgba(255, 0, 0, 0.5); } } 
/* 设 置 图 像框 的 基本 样式 * / 
.box { width: 500px; height: 375px; margin: lem auto; 
position: relative; overflow: hidden; border - radius: 10px; 
box - shadow: 5px 5px 5px lpx #999,0 0 40px rgba(0, 0, 0, 0.06) inset; } 

/* 设 置 图 像 的 样式 */ 

img { vertical - align: top; height: 375px; width: 500px; } 

/* 设 置 无 序列 表 的 样式 * / 

.list { margin: 0; padding: 0; position: absolute; 

— webkit ~ animation: slide 20s infinite; } 

/* 设 置 索引 栏 位 于 右上 角 位 置 * / 

. index { position: absolute; right: 10px; top: 10px; } 

/* 设 置 每 个 索引 框 的 基本 样式 * / 

.index a { display: inline- block; width: 30px; height: 30px; line— height: 30px; 
margin - left: .Sem; border - radius: 10px; background— color: rgba(0, 0, 0, 0.5); 
text - align: center; text ~ decoration: none ! important; 
color: yellow; font - size: 20px; font - weight: bold; } 

/* 设 置 4 个 索引 框 轮 播 动画 * / 

.index 1 { -webk 让 -animation: index 1 20s step- end infinite;} 

.index 2 { — webkit ~ animation: index 2 20s step— end infinite;} 

.index 3 { — webkit — animation: index 3 20s step— end infinite;} 

.index 4 { — webkit — animation: index 4 20s step— end infinite;} 

</style></head> 
<body>< div class = "box"> 
<ul class = "list"> 

<1i>< img src= "img/B180A. jpg"/></li><1i>< img src="img/B180B.jpg"/></1i> 

<1i>< img src= "img/B180C. jpg"/></1i><1li>< img src="img/B180D. jpg"/></li></ul> 

<div class="index"><a href = "javascript:" class= "index 1"> 1</a> 

<a href = "javascript:" class = "index 2">2 </a> 

<a href = "javascript:" class = "index 3">3 </a> 

<a href = "javascript:" class ="index 4">4</a></div> 

</div> 
</body></html> 





上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,@-webkit-keyframes slide 用 于 设置 
轮 播 图 像 的 多 个 关键 帧 的 纵向 位 置 , 在 轮 播 之 前 不 可 见 .但 已 经 用 负数 定位 ; -webkit-animation: slide 
20s infinite 表示 采用 infinite 模式 ,在 20 秒 内 执行 完成 所 有 关键 帧 。animation 属性 是 一 个 简写 属 


性 ,用 于 设置 6 个 动画 属性 , 即 animation-name、animation-duration、animation-timing-function 、 





animation-iteration-count ,animation-delay .animation-direction 。 
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此 实例 的 源 文件 名 是 myHtmlB181. html。 
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图 285-1 


286 ”使 用 关键 帧 动画 实现 圆 环 转圈 更 新 特效 


此 实例 主要 通过 关键 帧 动画 控制 元 素 的 transform 属性 指定 的 rotate() 方 法 ,从 而 实现 圆 环 的 转 
圈 更 新 特效 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,黄色 的 圆 环 将 按照 顺 时 针 方向 不 断 转 圈 ， 
如 图 286-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 286-1 


<!doctype html >< html >< head >< meta charset = "UTF — 8"> 
<style type= "text/css"> 
body { background — color: green; } 
.box { width: 200px; height: 200px; margin: 50px auto; 
position: relative; border: 0px solid #DDD; } 
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.left { left: 0; } 

.right { right: 0; } 

.area { width: 100px; height: 200px; position: absolute; 

top: 0; overflow: hidden; } 
.progress { width: 160px; height: 160px; border: 20px solid transparent; 
border - radius: 50% ; position: absolute; top: 0; } 
. leftcircle { border - bottom: 20px solid orange; border — left: 20px solid orange; 
left: 0; - webkit ~ animation: loading left 5s linear infinite; } 
@ - webkit — keyframes loading left { 0%, 50% { - webkit— transform: rotate( - 135deg);} 
100% { - webkit- transform: rotate(45deg);} } 
.rightcircle { border - top: 20px solid orange; border - right: 20px solid orange; 
right: 0; - webkit — animation: loading right 5s linear infinite; } 
@ - webkit ~ keyframes loading right { 0% { ~ webkit— transform: rotate( ~ 135deg); } 
50%, 100% { — webkit— transform: rotate(45deg); }} 
</style></head> 
<body>< div class = "box"> 

<div class= "area left"><div class = "progress leftcircle"></div></div> 
<div class= "area right">< div class= "progress rightcircle"></div></div></div> </body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,overflow: hidden 表示 在 内 容 超 出 范 
围 时 超出 部 分 是 不 可 见 的 ; -webkit-transform: rotate(45deg) 表示 旋转 45"; -webkitr animation 
loading_right 5s linear infinite 表示 在 5 秒 内 以 线性 方式 完成 关键 帧 动画 loading_right,infinite 表示 
完成 一 次 关键 帧 动画 loading_right 后 重新 开始 ,并 且 永 不 结束 。 在 此 实例 中 ,整个 动画 实际 上 是 由 
左 \ 布 两 部 分 拼接 而 成 的 ,并 通过 正 、 负 角度 来 控制 旋转 。 

此 实例 的 源 文件 名 是 myHtmlB195. html。 


287 ”使 用 关键 帧 动画 实现 淡 人 淡出 轮 播 特效 


此 实例 主要 通过 关键 帧 动画 控制 元 素 的 opacity 属性 实现 淡 入 、 淡 出 的 轮 播 特 效 。 当 在 Google 
Chrome 浏览 器 中 显示 该 页 面 时 , 轮 播 4 幅 图 像 的 部 分 效果 如 图 287-1 所 示 。 有 关 此 实例 的 主要 代码 
如 下 。 
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图 287-1 


<!doctype html ><html >< head >< meta charset = "UTF - 8"> 
<style type= "text/css"> 
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* { margin: 0; padding: 0; } 
.myBox { width: 300px; height: 200px; box— shadow: 1px 1px 10px # AAA; 


padding: 5px; margin: 20px auto; position: relative; } 


ul { width: 300px; height: 200px; position: relative;overflow: hidden;} 
li { list- style: none; position: absolute; top: Opx; left: 0; } 


ing { 
#fir: 


width: 300px; height: 200px; } 
st { - webkit- animation: myImgl 10s infinite; } 


#second { - webkit - animation: myImg2 10s infinite;} 
#third { - webkit — animation: myImg3 10s infinite; } 
#fourth { - webkit - animation: myImg4 10s infinite; } 


@-w 


@-w 


@-w 


@-w 


</style 


ebkit — keyframes myImgl { 0% { opacity: 1; } 15% { opacity: 1; } 

25% { opacity: 0; } 90% { opacity: 0; } 100% {opacity: 1; } } 
ebkit - keyframes myImg2 { 0% { opacity: 0; } 15% { opacity: 0;} 

25% {opacity: 1; } 40% { opacity: 1; } 

50% { opacity: 0; } 100% { opacity: 0; }} 
ebkit — keyframes myImg3 { 0% { opacity: 0; } 40% { opacity: 0; } 

S50% {opacity: 1; } 65% { opacity: 1; } 

75% { opacity: 0; } 100% { opacity: 0; } } 
ebkit - keyframes myImg4 { 0% { opacity: 0; } 65% { opacity: 0; } 

75% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; } } 
></head> 


<body> <div class = "myBox"><ul ><1i id= "first">< img src = "img/B151A. jpg"/></li> 
<1i id="second">< img src = "img/B151B. jpg" 人 ></1i> 
<1i id="third">< img src="img/B152A. jpg"/></1i> 
<1i id = "fourth">< img src = "img/B152B. jpg" 人 ></1i> </ul ></div ></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,opacity 属性 用 于 设置 元 素 的 不 透明 
级 别 , 即 从 0.0( 完 全 透明 ) 到 1.0( 完 全 不 透明 ); -webkit-animation: myImgl 10s infinite 表示 在 10 
秒 内 执行 myImg1 关键 帧 指定 的 动作 ,并 且 在 完成 动画 后 重新 开始 , 永 不 结束 。 此 实例 最 精华 的 思想 


是 在 10 秒 这 


个 时 间 轴 上 4 个 关键 帧 动画 的 每 个 百分点 均 保 证 不 冲突 ,例如 在 myImgl 关键 帧 中 ,在 


0%、15%、100% 这 几 个 点 位 上 显示 第 一 幅 图 像 (opacity: 1) 时 其 他 3 个 关键 帧 的 0%、15%、100% 这 
几 个 点 位 绝 不 允许 出 现 相 同 的 属性 值 , 即 opacity 属性 必须 为 0, 其 余 以 此 类 推 ,因此 如 果 要 显示 更 多 


的 图 像 , 只 需 


要 在 保证 不 冲突 的 前 提 下 依次 修改 各 个 关键 帧 的 点 位 (百分比 值 ) 的 opacity 属性 即 可 。 


此 实例 的 源 文件 名 是 myHtmlB201. html。 


288 


此 实例 3 
Chrome 浏览 


使 用 关键 帧 动画 实现 文字 水 平 深 动 显示 


要 通过 在 关键 帧 动画 中 控制 元 素 的 left 属性 实现 文字 的 水 平 深 动 显示 。 当 在 Google 
器 中 显示 该 页 面 时 ,“ 炫 酷 应 用 实例 集锦 ”的 水 平 滚动 显示 效果 如 图 288-1 所 示 。 有 关 此 





实例 的 主要 代码 如 下 。 
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图 288-1 





HTML5+CSS3 炫 酷 应 用 实例 集锦 


<!doctype html ><html >< head >< meta charset = "UTF - 8"> 
<style type= "text/css"> 
.myBox { width: 400px; position: absolute; overflow: hidden; color: black; 
/x* 创建 阴影 特效 文字 * / 
text — shadow: 0 0 5px #FF0000; font - size: 40px; 
font - weight: bold; font- family: 宋体 ; } 
. myMarquee { position: relative; - webkit- animation: marquee 10s linear infinite; } 
@— webkit ~ keyframes marquee { 0% { left: -100$%; } 100% { left: 100%;}} 
</style></head> 
<body>< div class = "myBox"><p class = "myMarquee"> 炫 酷 应 用 实例 集锦 </p></div> 
</body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,left 属性 规定 元 素 的 左边 缘 , 如 果 元 
素 的 position 属性 值 为 static, 那 么 设置 left 属性 不 会 产生 任何 效果 ; left 属性 可 以 用 % 设 置 以 包含 元 
素 的 百分比 计算 的 左边 位 置 ,可 使 用 负 值 ; 用 户 也 可 以 使 用 px、em 等 单位 设置 元 素 的 左边 位 置 ,可 使 
用 负 值 。 在 此 实例 的 关键 帧 中 , 当 left: 一 100% 时 演示 文字 是 不 可 见 的 。-webkit-animation; 
marquee 10s linear infinite 表示 在 10 秒 内 以 linear 模式 执行 marquee 关键 帧 指定 的 动作 ,并且 在 完 
成 动画 后 重新 开始 , 永 不 结束 。 

此 实例 的 源 文件 名 是 myHtmlB203. html。 


289 使 用 关键 帧 动画 高 仿 小 圆 点 的 加 载 状态 


此 实例 主要 通过 在 关键 帧 动画 中 旋转 或 隐藏 元 素 高 仿 Windows 10 操作 系统 启动 时 的 小 圆 点 加 
载 进 度 状态 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,小 圆 点 转圈 的 加 载 进 度 状态 显示 效果 如 
图 289-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 289-1 


<!doctype html >< html >< head>< meta charset = "UTF ~ 8"> 
< style type = "text/css"> 
.loading { margin: 50px 160px; } 
.loading . dot { position: absolute; opacity: 0; width: 40px; height: 40px; 
transform: rotate(225deg) ; animation — name: loading; 
animation — iteration— count: infinite;animation — duration: 5.28s; } 
. loading . dot:after { content: ""; position: absolute; background: green; 
width: 6px; height: 6px; border - radius: 50% ;} 

.loading .dot:nth- child(2) { animation- delay: 0.23s; } 

.loading . dot:nth- child(3) { animation— delay: 0.46s; } 

.loading .dot:nth— child(4) { animation— delay: 0.69s; } 


第 3 部 分 动画 








.loading . dot:nth- child(5) { animation— delay: 0.92s; } 
@keyframes loading { 0% {transform: rotate(225deg) ; opacity: 1; 
animation — timing ~ function: cubic - bezier(0, 0, 0.58, 1.0);} 
8% {transform: rotate(345deg); 
animation — timing ~ function: cubic - bezier(0.0, 0.0, 1.0, 1.0);} 
30% {transform: rotate(455deg); 
animation ~ timing ~ function: cubic - bezier(0.42, 0, 0.58, 1.0);} 
40% {transform: rotate(690deg); 
animation ~ timing ~ function: cubic - bezier(0.0, 0.0, 1.0, 1.0);} 
60% {transform: rotate(815deg); opacity: 1; 
animation — timing ~ function: cubic - bezier(0, 0, 0.58, 1.0);} 
75% {transform: rotate(965deg); 
animation ~ timing ~ function: cubic - bezier(0, 0, 0.58, 1.0);} 
76% {opacity: 0; } 
100% {opacity: 0; }} 
</style></head> 
<body>< div class = "loading"> 
<divclass= "dot"></div><div class = "dot"></div><div class= "dot"></div> 
<divclass="dot"></div>< div class = "dot"></div></div></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,transform: rotate(225deg) 表 示 将 小 
圆 点 (6,6) 所 在 的 小 圆圈 (40,40) 旋 转 225"; animation-duration: 5. 28s 定义 关键 帧 动画 完成 一 个 周 
期 所 需要 的 时 间 是 5. 28 秒 ; animation-iteration-count: infinite 规定 关键 帧 动画 应 该 无 限 次 播放 ; 
animation-name: loading 表示 将 要 执行 的 是 loading 关键 帧 动画 ; animation-delay: 0. 23s 定义 关键 
帧 动画 等 待 的 时 间 是 230 毫秒 ; opacity: 1 表示 显示 小 圆 点 ,opacity: 0 表示 隐藏 小 圆 点 ; animation- 
timing-function: cubic- bezier(0, 0, 0. 58， 1. 0) 规 定 动画 的 速度 变化 曲线 是 cubic-bezier(0，0， 
0.58, 1.0)。 

此 实例 的 源 文件 名 是 myHtmlB204. html。 


290 ”使 用 关键 帧 动画 实现 在 单行 中 轮 播 文本 


此 实例 主要 通过 关键 帧 动画 控制 元 素 的 opacity 属性 ,从 而 实现 在 单行 中 逐 行 轮 播 文本 。 当 在 
Google Chrome 浏览 器 中 显示 该 页 面 时 , 轮 播 4 行文 本 的 部 分 效果 如 图 290-1 所 示 。 有 关 此 实例 的 主 
要 代码 如 下 。 
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生花 渐 铁 迷信 眼 ， 小 草本 能 淡 马 中 。 





图 290-1 


<!doctype html ><html >< head ><meta charset = "UTF — 8"> 
<style type= "text/css"> 





HTML5+CSS3 炫 酷 应 用 实例 集锦 


li { list- style - type: none; position: absolute; 
/x* 创建 阴影 特效 文字 * / 
text - shadow: 5px 5px 5px gray; color: navy;font - size: 30px; 
font - weight: bold;font - family: 宋体 ;} 
.myBox { margin: 50px auto; } 
# first { - webkit - animation: p 1 10s infinite; } 
# second { - webkit- animation: p_2 10s infinite; } 
#third { - webkit - animation: p 3 10s infinite;} 
#fourth { - webkit- animation: p 4 10s infinite; } 
@— webkit -keyframes p 1 { 0% { opacity: 1; } 15% { opacity: 1;} 
25% {opacity: 0; } 90% { opacity: 0; } 100% {opacity: 1; } } 
@— webkit -keyframes p 2 { 0% { opacity: 0; } 15% { opacity: 0; } 
25% {opacity: 1; } 40% { opacity: 1; } 
50% { opacity: 0; } 100% { opacity: 0; }} 
@ - webkit -keyframes p 3 { 0% { opacity: 0; } 40% { opacity: 0; } 
50% { opacity: 1; } 65% { opacity: 1; } 
75% {opacity: 0; } 100% { opacity: 0; } } 
@ - webkit -keyframes p 4 { 0% { opacity: 0; } 65% { opacity: 0; } 
75% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0;} } 
</style></head> 
<body> <div class = "myBox"> 
<ul><li id= "first"> 孤 山寺 北 贾 亭 西 ,水 面 初 平 云 脚 低 。</1i> 
<1i id= "second"> 几 处 早 萤 争 暖 树 , 谁 家 新 燕 吸 春 泥 。</1i > 
<1i id= "third"> 乱 花 渐 欲 迷人 眼 , 浅草 才能 没 马蹄 。</1i> 
<1i id= "fourth"> 最 爱 湖 东 行 不 足 , 绿 杨 阴 里 白沙 堤 。</1i></ul ></div> </body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,opacity 属性 用 于 设置 元 素 的 不 透明 
级 别 , 即 从 0. 0( 完 全 透明 ) 到 1.0( 完 全 不 透明 ) ,opacity: 1 表示 显示 文本 ,opacity: 0 表示 隐藏 文本 ; 
-webkit-animation: p_1 10s infinite 表示 在 10 秒 内 执行 p_1 关键 帧 指定 的 动作 ,并 且 在 完成 动画 后 
重新 开始 , 永 不 结束 。 此 实例 最 精华 的 思想 是 在 10 秒 这 个 时 间 轴 上 4 个 关键 帧 动画 的 每 个 百分点 均 
保证 不 冲突 ,例如 在 @-webkit- keyframes p_1 关键 帧 中 ,在 0 中 、15%、100% 这 几 个 点 位 上 显示 第 一 
行文 本 (opacity: 1) 时 其 他 3 个 关键 帧 的 0%、15% 、100% 这 几 个 点 位 绝 不 允许 出 现 相同 的 属性 值 , 即 
opacity 属性 必须 为 0, 其 余 以 此 类 推 ,因此 如 果 要 显示 更 多 行 的 文本 ,只 需要 在 保证 不 冲突 的 前 提 下 
依次 修改 各 个 关键 帧 的 点 位 (百分比 值 ) 的 opacity 属性 即 可 。 

此 实例 的 源 文 件 名 是 myHtmlB205. html。 


291 使 用 关键 帧 动画 高 仿 白 云 在 天 空中 游 走 


此 实例 主要 通过 关键 帧 动画 控制 img 元 素 的 top \left 属性 ,从 而 高 仿 白 云 在 天 空中 游 走 的 动画 
效果 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,在 图 291-1 的 红色 圆圈 中 的 白云 ( 它 实际 上 是 一 
幅 png 图 像 ) 将 根据 关键 帧 指定 的 位 置 从 左 向 右 游 走 . 并 且 周 而 复 始 , 永 不 停歇 。 有 关 此 实例 的 主要 
代码 如 下 。 





<!doctype html >< html >< head ><meta charset = "UTF - 8"> 
< style type = "text/css"> 
html { background— image: url(img/B214B. jpg) ;background - size: 100% auto; } 
img { width:90px; height:60px; position: absolute; 
animation: myTrack 20s ease — in— out infinite; } 





第 3 部 分 > 


@ - webkit ~ keyframes myTrack { 0% { left: -10%; top:0px; } 
10%{ left:10%; top:70px;} 20% { top:10px;} 50% { top:65px;} 
70% { top:24px;} 80% { top:70px;} 100% {left: 99%;}} 
</style></head> 
<body >< img src= "img/B214. png"/></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,animation: myTrack 20s ease-in-out 
infinite 表示 在 20 秒 内 以 ease-in-out 模式 执行 myTrack 定义 的 关键 帧 动画 ,并 且 周而复始 , 永 不 停 
歇 。myTrack 的 100% 是 相对 于 时 间 轴 而 言 的 ,比如 在 此 实例 中 ,20% 是 指 在 20X20% 二 4 秒 时 游 走 
的 白云 应 该 定位 在 top 值 为 10px 的 位 置 。 

此 实例 的 源 文件 名 是 myHtmlB214. html。 
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图 291-1 


292 ”使 用 关键 帧 动画 实现 在 按钮 上 扩散 波纹 


此 实例 主要 通过 在 关键 帧 动画 中 设置 transform 属性 值 为 scale(2) 将 元 素 放 大 两 倍 , 从 而 实现 在 
单 击 按钮 时 显示 扩散 的 波纹 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,如 果 使 用 鼠标 单 击 按钮 ， 
则 将 以 鼠标 单 击 点 为 中 心 显 示 扩 散 的 浅 灰 色 波 纹 ,如 图 292-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
百 bo 口 X 
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图 292-1 


<!doctype html ><html >< head>< meta charset = UTF -8> 
< script src= "js/jquery -3.1.1.min. js"></script>< script > 
$ (function() { 
$ ("button").on('click', function(e) { 
var target = e€. target; 
var rect = target. getBoundingClientRect(); 
var ripple = target. querySelector( '. ripple’); 





HTML5+CSS3 炫 酷 应 用 实例 集锦 





if (!ripple) {// 创 建 ripple 
ripple = document. createElement('span' ); 
ripple. className = 'ripple'; 
ripple. style. height = ripple. style. width = Math. max(rect. width, rect. height) +'px'; 
target. appendChild( ripple); 
} 
// 显 示 ripple 扩散 特效 
ripple. classList. remove( 'show'); 
var top = e. pageY - rect. top - ripple. offsetHeight/2 - document. body. scrollTop; 
var left = e. pageX -- rect. left - ripple. offsetWidth/2 - document. body. scrollLeft; 
ripple. style. top= top + 'px'; 
ripple. style. left = left + 'px'; 
ripple. classList.add( 'show'); 
D2}); 
</script > 
< style type= "text/css"> 
/* 裁剪 按钮 之 外 的 扩散 圆 * / 
button { position: relative;width: 13em; height: 3em; overflow: hidden; } 
.ripple { position: absolute; background: lightgray; 
border — radius: 100% ; transform: scale(0); } 
.ripple. show { animation: myRipple 1s ease— out;} 
/* 将 扩散 圆 放 大 两 倍 * / 
@ - webkit - keyframes myRipple {100% { transform: scale(2); opacity: 0; } } 
</style></head> 
<body >< center >< button > 点 我 试 试看 </button></center ></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,animation: myRipple 1s ease-out 表 
示 在 1 秒 的 时 间 内 以 ease-out 模式 执行 myRipple 定义 的 关键 帧 动画 。myRipple 的 100% 是 相对 于 
时 间 轴 而 言 的 ,比如 在 此 实例 中 波纹 扩散 时 间 只 有 1 秒 。 由 于 波纹 特效 是 在 用 鼠标 单 击 按钮 时 使 用 
jQuery 代码 动态 添加 的 ,为 了 保证 多 次 单 击 均 有 效 ,必须 先 ripple. classList. remove('show') ,然后 再 
ripple. classList. add('show') 


此 实例 的 源 文 件 名 是 myHtmlB220. html 
293 ”使 用 关键 帧 动画 高 仿 因 信号 干扰 花屏 的 特效 


此 实例 主要 通过 在 关键 帧 动画 中 设置 clip 属性 裁剪 图 形 . 从 而 高 仿 因 信 号 干扰 花屏 的 特效 。 当 
在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,类 似 信 号 干扰 的 屏幕 文字 动画 如 图 293-1 所 示 。 有 关 此 
实例 的 主要 代码 如 下 
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<!doctype html ><html >< head >< meta charset = UIF -8> 
< style type= "text/css"> 
body { background: black;font ~ family: 'Varela'，sans - serif;} 
.glitch { color: white; font - size:50px; position: relative; 
width: 450px; margin: 0 auto; } 

@keyframes myNoise { 0% { clip: rect(22px, 9999px, 94px, 0); } 
5% { clip: rect(18px, 9999px, 97px, 0); }10% { clip: rect(57px, 9999px, 27px, 0); } 
15% { clip: rect(2px, 9999px, 74px, 0); }20% { clip: rect(26px, 9999px, 55px, 0); } 
25 % { clip: rect(22px, 9999px, 19px, 0);} 30% { clip: rect(86px, 9999px, 47px, 0); } 
35% { clip: rect(54px, 9999px, 45px, 0);}40% { clip: rect(63px, 9999px, 6lpx, 0); } 
45% { clip: rect(54px, 9999px, 19px, 0);}50% { clip: rect(10px, 9999px, 27px, 0); } 
55% { clip: rect(38px, 9999px, 48px, 0);} 60% { clip: rect(49px, 9999px, 50px, 0); } 
65% { clip: rect(84px, 9999px, 69px, 0);} 70% { clip: rect(66px, 9999px, 62px, 0); } 
75% {clip: rect(18px, 9999px, 45px, 0);}80% { clip: rect(65px, 9999px, 54px, 0); } 
85% { clip: rect(11px, 9999px, 16px, 0);} 90% { clip: rect(74px, 9999px, 33px, 0); } 
95% { clip: rect(88px, 9999px, 75px, 0);}100% {clip: rect(35px, 9999px, 28px, 0); } } 
.glitch:after { content: attr(data- text); position: absolute; left: 2px; 

top: 0; color: white; background: black; overflow: hidden; 

animation: myNoise 2s infinite linear alternate ~— reverse;} 
</style></head> 
<body><center><div class = "glitch" data - text = "测试 信号 干扰 花屏 效果 "> 测试 信号 干扰 花屏 效果 </div> 
/center ></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , animation: myNoise 2s infinite 
linear alternate-reverse 表示 在 两 秒 内 以 linear 模式 执行 myNoise 定义 的 关键 帧 动画 ,并 且 永 不 停歇 。 
alternate-reverse 表示 动画 在 奇数 次 (1、3、5…) 时 反 向 播放 ,在 偶数 次 (2、4、6…) 时 正 向 播放 。clip 属 
性 用 于 定义 一 个 剪裁 矩形 ,对 于 一 个 绝对 定位 元 素 ,在 这 个 矩形 内 的 内 容 才 可 见 ,超出 这 个 区 域 的 内 
容 会 根据 overflow 的 值 来 处 理 ,剪裁 区 域 可 能 比 元 素 的 内 容 区 大 ,也 可 能 比 内 容 区 小 。 

此 实例 的 源 文件 名 是 myHtmlB221. html。 


294 ”使 用 关键 帧 动画 模拟 理发 店 跑马 灯 特 效 


此 实例 主要 在 关键 帧 动画 中 不 断 改变 透明 背景 图 像 的 水 平 位 置 并 使 用 背景 图 像 填 充 文字 线条 ， 
从 而 使 文字 线条 出 现 理发 店 跑马 灯 的 滚动 变换 特效 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ， 
随 着 背景 图 像 水 平 位 置 的 改变 ,由 透明 和 不 透明 间隔 构成 的 背景 图 像 不 断交 错 填充 文字 线条 ,因此 文 
字 线 条 也 交错 呈现 透明 和 不 透明 的 跑马 灯 的 滚动 变换 特效 ,如 图 294-1 所 示 。 有 关 此 实例 的 主要 代 
码 如 下 。 
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<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<style> 
p { display: inline— block;width:40em; } 
p span { font: 700 4em/1 "Oswald", sans— serif; background: url(img/B225. png); 
— webkit - background — clip: text; - webkit — text- fill - color: transparent; 
— webkit — animation: myPos 80s linear infinite; } 
@ — webkit — keyframes myPos { 0% { background— position: 0% 50%;} 
100% { background— position: 100% 50%;}} 
</style></head> 
<body><p><span> 问 君 能 有 几 多 愁 </span ></p></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,-webkitranimation: myPos 80s linear 
infinite 表示 在 80 秒 内 以 linear 模式 执行 myPos 定义 的 关键 帧 动画 ( 即 从 头 到 尾 改变 背景 图 像 的 水 
平 位 置 ), 且 永 不 停 软 ; background-position: 0% 50% 用 于 设置 背景 图 像 的 起 始 位 置 ,0% 是 水 平 位 
置 .50% 是 垂直 位 置 ,左上 角 表 示 为 0% 0%、 右 下 角 表 示 为 100% 100% ,如 果 仅 规定 了 一 个 值 , 男 一 
个 值 将 是 50%; -webkit-background- clip:text 表示 背景 图 像 的 哪些 地 方 可 以 显示 ,如 果 同 时 设置 了 
-webkit-text-fill-color: transparent, 则 在 背景 图 像 中 与 文字 线条 对 应 的 部 分 可 以 显示 。 

此 实例 的 源 文 件 名 是 myHtmlB225. html。 


295 ”使 用 关键 帧 动画 高 仿 加 载 问 隔 转圈 特效 


此 实例 主要 在 关键 帧 动画 中 不 断 改变 圆 环 的 颜色 和 角度 ,从 而 实现 类 似 于 谷歌 浏览 器 加 载 网 页 
时 的 转圈 动画 特效 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,隔断 的 圆 环 将 沿 着 顺 时 针 方向 不 
断 转圈 ,如 图 295-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
本 一 口 x 
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图 295-1 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
< style> 
html, body { height: 100%; } 
/* 居中 设置 */ 
body {display: — webkit ~ box; display: — webkit ~ flex; - webkit- align— items: center; 
— webkit - box— pack: center; — webkit— justify— content: center;} 
/* 执行 SVG 关键 帧 动画 * / 
.spinner { — webkit- animation: rotator 1.4s linear infinite; } 
@— webkit— keyframes rotator { 0% { - webkit— transform: rotate(0deg); } 
100% { - webkit— transform: rotate(270deg); }} 
.path { stroke - dasharray: 187; stroke— dashoffset: 0; 
— webkit - transform- origin: center; transform- origin: center; 
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/* 执行 两 个 关键 帧 动画 * / 
— webkit ~ animation: dash 1.4s ease— in- out infinite, colors 5.6s ease- in- out infinite; } 
/* 颜 色 关键 帧 * / 
@ - webkit ~ keyframes colors { 0% { stroke: #4285F4; } 25% { stroke: #DE3E35; } 
50% { stroke: #F7C223; } 75% { stroke: #1B9A59; } 100% { stroke: #4285F4; } } 
/x* 圆 环 关键 帧 * / 
@— webkit - keyframes dash { 0% { stroke- dashoffset: 187; } 
S50% { stroke- dashoffset: 46.75; - webkit- transform: rotate(135deg); } 
100% { stroke- dashoffset: 187; — webkit — transform: rotate(450deg); } } 
</style></head> 
<body><center >< svg class = "spinner" width= "65px" height = "65px" viewBox= "0 0 66 66" >< circle class= 
"path" fill = "none" stroke - width= "6" stroke— linecap = "round" cx="33" cy= "33" r="30"></circle> 
</svg></center ></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,-webkit-animation: rotator 1. 4s 
linear infinite 用 于 改变 SVG 的 角度 ; -webkit-animation: dash 1. 4s ease-in-out infinite, colors 5. 6s 
ease-in-out infinite 包含 两 个 关键 帧 动画 ,第 一 个 关键 帧 动画 用 于 旋转 隔断 圆 环 stroke 的 角度 ,第 二 
个 关键 帧 动画 用 于 改变 隔断 圆 环 stroke 的 颜色 ; stroke-dasharray: 187 用 于 创建 虚线 ; stroke- 
dashoffset:187 指定 了 dash 到 路 径 开 始 的 距离 ; -webkit-transform: rotate(135deg) 表 示 顺 时 针 旋 
转 135"。 

此 实例 的 源 文 件 名 是 myHtmlB228. html。 


296 ”使 用 关键 帧 动画 同时 旋转 多 个 3D 汉字 


此 实例 主要 通过 在 关键 帧 动画 中 使 用 rotateY() 方 法 实现 同时 旋转 多 个 3D 汉字 。 当 在 Google 
Chrome 浏览 器 中 显示 该 页 面 时 ,“ 何 当 共 剪 西 窗 烛 ”中 的 每 个 字 即 围绕 自身 的 中 心 在 重 直 方向 (Y 轴 ) 
上 不 停 旋转 ,旋转 成 反面 的 3D 汉字 如 图 296-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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<!doctype html >< html >< head ><meta charset = "UTF - 8"> 
< script src= "js/jquery -3.1.1.min. js"></script>< script> 
// 为 单行 中 的 每 个 字 添加 < span > 标签 
$ (function() { 
word=$ ('p'). html(); 
word = word. split(''); 
var str=[]; var str_html =""; 
$ .each(word, function(i, item) { 
str[i] = "<span>" + item+ "</span>"; 
Ds; 
$ .each(str, function (i, item) { 
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Str_html += item; 
D; 
$ ('p').html(str_html); 
D); 
</script> 
<style> 
body {/ * 设置 灰色 背景 * / background color: gray; } 
/ * 为 < span> 标 签 中 的 内 容 添加 旋转 特效 * / 
p span { display: inline - block; color: black; letter — spacing: 10px; 
/* 创建 阴影 文字 */ 
text - shadow: — lpx — lpx 0 #FFF, lpx lpx 0 #333, 1px lpx 0 #444; 
font: bold 60px/100% "微软 雅 黑 "，"Lucida Grande"，"Lucida Sans", Helvetica, Arial, Sans; 
— webkit ~ animation: myRotate 3s ease- in- out infinite; } 
@ - webkit — keyframes myRotate { 0% { transform: rotateY(0deg); } 
75% { transform: rotateY(180deg); } 100% { transform: rotateY(360deg); } } 
</style></head> 
<body >< center ><p> 何 当 共 前 西 窗 烛 </p></center></body></htnml > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,-webkit-animation: myRotate 3s 
ease-in-out infinite 表示 在 3 秒 内 以 ease-in-out 模式 执行 myRotate 关键 帧 中 的 rotateY 旋转 动作 , 且 
永 不 停歇 ; rotateY(180deg) 表 示 元 素 ( 汉 字 ) 以 3D 方式 围绕 YY 轴 旋 转 180"; letter-spacing:10px 表示 
每 个 汉字 之 间 的 间隔 是 10px。 在 CSS 中 ,letter-spacing 属性 用 于 增加 或 减少 字符 间 的 空白 (字符 间 
距 ) ,该 属性 定义 了 在 文本 字符 框 之 间 插 入 多 少 空 间 。 由 于 字符 字形 通常 比 其 字符 框 要 窄 ,在 指定 长 
度 值 时 会 调整 字母 之 间 通 常 的 间隔 ,因此 其 属性 值 为 normal 就 相当 于 值 为 0。 

此 实例 的 源 文件 名 是 myHtmlB232. html。 


297 ”使 用 关键 帧 动画 实现 表格 隔行 闪烁 显示 


此 实例 主要 通过 使 用 table tr:nth-child(2n 十 1) 和 table tr:nth-child(2n) 选 择 器 筛选 表格 的 所 有 
奇数 行 和 偶数 行 , 并 在 关键 帧 动画 中 设置 background-color 属性 ,从 而 实现 表格 错 行 闪烁 的 特效 。 当 
在 Google Chrome 浏览 器 中 显示 该 页 面 时 , 浅 绿色 的 背景 将 交 蔡 在 表格 的 奇数 行 和 偶数 行内 烁 ,如 
图 297-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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<!doctype html ><html ><head ><meta charset = "UTF - 8"> 
< style type = "text/css"> 
table, tr, td { border: 1px solid gray; text — align: center; } 
/* 奇 数 行动 画 */ 
table tr:nth— child(2n +1) { ~ webkit ~ animation: myOdd 1. 2s ease infinite; } 
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/* 偶数 行动 画 * / 
table tr:nth- child(2n) { - webkit- animation: myEven 1.2s ease infinite;} 
/* 奇 数 行 关 键 帧 */ 
@ - webkit - keyframes my0dd { 0% { background- color: initial; } 
50% { background- color: lightgreen; } 100% { background— color: initial; } } 
/* 偶数 行 关键 帧 * / 
@ - webkit- keyframes myEven { 0% { background - color: lightgreen; } 
50% { background— color: initial; } 100% { background- color: lightgreen; } } 
table { margin: 0 auto; width: 400px; border - collapse: collapse; 
text - align: center; font - size: small; border: 1px; } 
</style></head> 
<body>< center ><div style = "width:400px">< table id= "mytable"> 
<tr><td> 罗 博克 葡萄 酒 </td><td> 西 班 牙 </td><td> 歌 海 娜 </td></tr> 
<tr><td> 科 洛 文 红 葡 萄 酒 </td><td> 法 国 </td><td> 丹 魄 </td></tr> 
<tr>< td> 马 蒂 尔 伯 档 葡萄 酒 </td>< td> 意 大 利 </td>< td> 朗 布 罗斯 科 </td></tr> 
<tr><td> 帝 富 干 红 葡 萄 酒 </td><td> 西 班 牙 </td><td> 胡 米 亚 </td></tr> 
<tr><td> 智 象 美 露 干 红 葡 葡 酒 </td><td> 智 利 </td><td> 中 央 山 谷 </td></tr> 
<tr><td> 卡 梅 罗 西 干 红 葡萄 酒 </td><td> 法 国 </td><td> 赤 霞 珠 </td></tr> </table></div></center > 
</body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,table tr:nth-child(2n 十 1) { -webkit- 
animation: myOdd 1. 2s ease infinite; } 表 示 表 格 中 的 所 有 奇数 行 在 1. 2 秒 内 以 ease 模式 执行 
myOdd 关键 帆 中 的 改变 背景 动作 , 旦 永 不 停 软 ; table tr:nth-child(2n) {-webkit-animation: myEven 
1.2s ease infinite; } 表 示 表 格 中 的 所 有 偶数 行 在 1. 2 秒 内 以 ease 模式 执行 myEven 关键 帧 中 的 改变 
背景 动作 , 上 且 永 不 停 软 ， background-color: initial 表示 以 默认 值 设置 背景 色 ; background-color: 
lightgreen 表示 以 浅 绿色 设置 背景 色 。 需 要 注意 的 是 .@-webkitrkeyframes myOdd { } 和 @-webkit- 
keyframes myEven { } 两 个 关键 帧 的 每 个 点 位 (百分比 ) 上 的 动作 总 是 不 同 ( 错 位 ), 因 此 在 运行 时 才 产 
生 那 种 交替 闪烁 的 效果 。 

此 实例 的 源 文件 名 是 myHtmlB237. html。 


298 ”使 用 关键 帧 动画 实现 文本 框 中 的 提示 的 闪烁 显示 


此 实例 主要 通过 使 用 关键 闪烁 显示 帧 动画 设置 文本 框 的 提示 文本 的 color 属性 ,从 而 实现 文本 框 
中 的 提示 内 容 的 闪烁 显示 特效 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 .如 果 “ 专 业 名 称 :" 文 本 
框 失去 焦点 ( 即 能 够 显示 提示 文本 ) , 则 该 文本 框 中 的 提示 文本 “教育 部 规范 的 专业 名 称 ” 将 以 蓝 、 红 、 
绿 交替 闪烁 ; 如 果 “ 毕 业 论 文 :" 文 本 框 失 去 焦点 ( 即 能 够 显示 提示 文本 ), 则 该 文本 框 中 的 提示 文本 “ 公 
开发 表 的 论文 标题 "将 以 红 、 黄 、 紫 交替 闪烁 ,如 图 298-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<script src= "js/jquery— 3.1.1.min. js"></script >< script type = "text/javascript"> 
$ (function() { 
$('#myMajor').val() == "教育 部 规范 的 专业 名 称 " ? $ (' myMajor'). toggleClass('majorBlink') : 0; 
//myMajor 获得 焦点 时 响应 , 即 移 除 提示 
$ ('#myMajor'). focus(function() { 
if( $ (this).val() == "教育 部 规范 的 专业 名 称 "){ 
$ (this). val("™"); 
// 如 果 动画 类 majorBlink 存在 , 则 移 除 之 
$ (this). hasClass( 'majorBlink') ? $ (this).removeClass('majorBlink') : 0; 
}1); 
//myMajor 失去 焦点 时 响应 , 即 添加 提示 
$ ('#myMajor').blur(function() { 
if ($ (this).val(). length==0) { 
$ (this).val(" 教 育 部 规范 的 专业 名 称 "); 
//toggleClass( ) 对 设置 或 移 除 被 选 元 素 的 一 个 或 多 个 类 进行 切换 ， 
// 即 添加 动画 类 majorBlink 
$ (this). toggleClass( 'majorBlink' ); 
} )) 
$(' 并 myPaper') .val()== "公开 发 表 的 论文 标题 ”? $ ('#myPaper').toggleClass('paperBlink') : 0; 
//myPaper 获得 焦点 时 响应 , 即 移 除 提示 
$ ('#myPaper').focus(function() { 
证 ($ (this).val() == "公开 发 表 的 论文 标题 "){ 
$ (this).val(""); 
// 如 果 动画 类 paperBlink 存在 , 则 移 除 之 
$ (this). hasClass( 'paperBlink') ? $ (this). removeClass( 'paperBlink') : 0; 
}1); 
//myPaper 失去 焦点 时 响应 , 即 添加 提示 
$ ('#myPaper').blur(function() { 
if ($ (this).val(). length==0) { 
$ (this).val(" 公 开发 表 的 论文 标题 "); 
// 添 加 动画 类 paperBlink 
$ (this). toggleClass( 'paperBl ink' ); 
} D2}); 
</script > 
<style type = "text/css"> 
. majorBlink{ - webkit - animation:majorBlink ease 1s infinite alternate; } 
@— webkit — keyframes majorBlink{ 0% {color:blue;} 50% {color:red;} 
100% {color:lightgreen;} } 
.paperBlink{ - webkit - animation:paperBlink ease 1s infinite alternate; } 
@ - webkit - keyframes paperBlink{ 0% {color:red;} 50% {color: yellow;} 
100% {color:purple;} } 
</style></head> 
<body><center ><br> 
< section > 专业 名 称 : < input value = "教育 部 规范 的 专业 名 称 " id= "myMajor"/></section><br> 
< section > 毕业 论文 : < input value = "公开 发 表 的 论文 标题 "” id= "myPaper"/></section><br></center> 
</body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,. majorBlink {-webkit- animation : 
majorBlink ease 1s infinite alternate; } 表示 在 majorBlink 文本 框 中 的 提示 文本 将 在 1 秒 内 以 ease 模 
式 执行 majorBlink 关键 帧 中 的 改变 文本 颜色 动作 ,每 次 执行 后 均 反 向 再 执行 (alternate), 且 永 不 停 
歇 ; 50% {color:red;} 表 示 在 0.5 秒 时 设置 提示 文本 的 颜色 为 红色 。 
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此 实例 的 源 文 件 名 是 myHtmlB238. html。 


299 ”使 用 关键 帧 动画 来 回 水 平 扫描 阴影 文本 


此 实例 主要 通过 使 用 关键 帧 动画 改变 背景 图 像 的 水 平 位 置 , 从 而 实现 来 回 水 平 扫描 阴影 文本 的 
特殊 效果 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,渐变 的 背景 将 从 左 向 右 再 从 右 向 左 来 回 滑 
动 , 从 而 使 文字 依次 呈现 半 隐 半 显 的 效果 ,如 图 299-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<style type= "text/css"> 
div { width: 400px; height:150px; line - height: 150px; font - weight: bold; 
font - size: 36px; text - shadow:2px 2px 6px #000000; 
/x* 创建 向 右 的 渐变 背景 * / 
background: - webkit - linear - gradient(right，black，white); 
/* 使 用 背景 色 设置 文本 颜色 * / 
— webkit - background- clip: text; - webkit ~ text - fill - color: transparent; 
— webkit — animation: myScan 5s ease infinite alternate; } 
@ - webkit - keyframes myScan { 0% { background - position— x: Opx; } 
100% { background - position— x: 400px; } } 
</style></head> 
<body >< center >< div > 隔 墙 花影 动 , 疑 是 玉 人 来 </div></center ></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,background-position-x: 400px 表示 
背景 图 像 的 水 平 位 置 在 400px; -webkit-animation: myScan 5s ease infinite alternate 表示 线性 渐变 背 
景 图 像 将 在 5 秒 内 以 ease 模式 执行 myScan 关键 帧 中 的 改变 水 平 位 置 动作 ,每 次 执行 后 均 反 向 再 执 
行 (alternate), 且 永 不 停 软 。 

此 实例 的 源 文 件 名 是 myHtmlB241. html。 


300 ”使 用 关键 帧 动画 动态 拉 伸 超 链接 下 画 线 


此 实例 主要 使 用 关键 帧 动画 改变 div 元 素 ( 即 超 链接 下 画 线 ) 的 宽度 ,从 而 实现 在 鼠标 指针 悬浮 于 
超 链接 时 动态 拉 伸 (扩展 ) 下 画 线 的 宽度 的 效果 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,如 果 
鼠标 指针 悬浮 在 中国 人民 大 学 ? 超 链接 上 ,. 则 红色 的 下 画 线 将 从 中 心 向 两 端 拉 伸 (扩展 ), 如 图 300-1 
所 示 。 当 然 , 如 果 鼠 标 指针 悬浮 在 “清华 大 学 ” 超 链接 上 ,也 将 实现 类 似 的 效果 。 有 关 此 实例 的 主要 代 
码 如 下 。 
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清华 大 学 
中 国人 民 大 学 





图 300-1 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<script src= "js/jquery -3.1.1.min. js"></script >< script type = "text/javascript"> 
$ (function() { 
$(' 提 myTHA'). mouseenter(function() {// 鼠 标 进入 时 响应 
// 先 显示 下 夯 线 ,再 扩展 宽度 
$ ('#myTH').addClass('hide') ? $ ('#myTH').removeClass('hide'). addClass('scale') : 
$ ('#myTH').addClass( 'scale'); 
D); 
$(' 提 myTHA').mouseleave(function() {// 鼠 标 指针 离开 时 响应 
// 先 停止 扩展 动作 ,再 隐藏 下 夯 线 
$ ('#myTH').hasClass('scale') ? $('#myTH'). removeClass('scale'). addClass('hide') : 
$ ('#myTH').addClass( 'hide'); 
DD); 
$(' 提 myPKA').mouseenter(function() {// 鼠 标 指针 进入 时 响应 
// 先 显示 下 夯 线 ,再 扩展 宽度 
$ ('#myPK').addClass('hide') ? $ ('#myPK'). removeClass('hide'). addClass('scale') : 
$ ('#myPK').addClass( 'scale' ); 
DD); 
$('#myBKR' ) .mouseleave(function() {// 鼠 标 指针 离开 时 响应 
// 先 停止 扩展 动作 , 再 隐藏 下 画 线 
$('#myPK').hasClass('scale') ? $ ('#myPK').removeClass('scale'). addClass('hide') : 
$ ('#myPK').addClass( 'hide'); 
D2}); 
</script> 
<style type= "text/css"> 
* { margin: Opx; padding: Opx;} 
.myTH { width: 70px; height: 2px; background — color: red;} 
.myPK { width: 95px; height: 2px; background - color: red;} 
.scale { /* 将 下 画 线 的 宽度 从 0px 扩 展 到 原始 宽度 */ 
— webkit ~ animation: myScale ls ease; } 
.hide { /x 隐藏 下 画 线 * / opacity: 0; } 
@— webkit - keyframes myScale { 0% { - webkit- transform: scaleX(0);} 
100% { - webkit- transform: scaleX(1); }} 
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a { /* 去 掉 超 链接 默认 的 下 画 线 * / text - decoration: none; } 
.myBox { padding - top: 20px; } 
.myDiv { width: 400px; height: 250px; border- radius: 5px; 
background — image: url(img/B247. jpg); margin - top: 5px; } 
</style></head> 
<body>< center >< div class = "myDiv"> 


<p class= "myBox"><a id= "myTHA" href = "http://www. tsinghua. edu. cn"> 清 华 大 学 </a> 
<div id= "myTH" class="hide myTH"></div></p> 


<p class = "myBox"><a id = "myPKA" href = "http://www. ruc.edu. cn"> 中 国人 民 大 学 </a> 
<div id= "myPK" class = "hide myPK"></div></p></div></center></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,-webkitrtransform: scaleX(0) 表 示 
将 下 面 线 的 宽度 缩减 到 无 ; -webkit-transform: scaleX(1) 表 示 将 下 夯 线 的 宽度 恢复 到 原始 宽度 ; 
-webkitranimation: myScale 1s ease 表示 在 1 秒 内 按照 ease 模式 执行 myScale 关键 帧 中 的 宽度 拉 伸 
动作 。 
此 实例 的 源 文件 名 是 myHtmlB247. html。 
301 使 用 关键 帧 动画 实现 打字 式 的 输入 效果 


此 实例 主要 使 用 关键 帧 动画 改变 字符 串 的 width 属性 ,并 在 animation 属性 中 使 用 steps, 从 而 实 
现 打字 式 的 输入 效果 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,“Bad news has wings" 将 从 左 到 


右 逐 个 字母 显示 出 来 ,然后 再 从 右 到 左 逐 个 字母 清除 掉 , 如 此 反复 循环 地 演示 打字 效果 ,如 图 301-1 所 
示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 301-1 


<! doctype html >< html >< head >< meta charset = "UTF - 8"> 
< style type = "text/css"> 
* { margin: 0; padding: 0; } 
/x 设置 背景 */ 


div { text 一 align: center; margin: 10px auto; width: 400px; height: 250px; 
border - radius: 10px; - webkit - box— shadow: 5px 5px 8px rgba(0, 0, 0, 0.3); 
position: relative; background - image: url( img/B250. jpg); 
background - size: 100% 100%;} 

/* 演 示 打字 效果 * / 
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hl { font: bold 200% Consolas, Monaco, monospace; border — right: 0.1em solid; 

/x* 字符 串 (Bad news has wings) 的 长 度 ,字母 和 空格 的 个 数 * / 
width: 19ch; margin: 2em lem; white - space: nowrap; overflow: hidden; 
/* steps(19) 一 定 要 等 于 字符 串 的 长 度 19* / 

animation: typing 10s steps(19) infinite alternate; 

color: aqua; position: absolute; top:30px; } 

@keyframes typing { from { width: Opx; } } 
</style></head> 
<body>< div>< hl > Bad news has wings </hl ></div></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,animation: typing 10s steps(19) 
infinite alternate 表示 在 10 秒 内 按照 steps(19) 跳 跃 模式 执行 typing 关键 帧 中 的 动作 ,然后 再 逆向 执 
行 , 永 不 停歇 。 在 CSS3 中 ,animation 默认 以 ease -方式 过 渡 , 它 会 在 每 个 关键 帧 之 间 插 入 补 间 动画 ， 
所 以 动画 效果 是 连贯 性 的 。 除 了 ease ,linear cubic-bezier 之 类 的 过 渡 函 数 都 会 为 其 插入 补 间 。 但 有 
些 效果 不 需要 补 间 ,只 需要 关键 帧 之 间 的 跳跃 ,这 时 应 该 使 用 steps 过 渡 方 式 。 在 此 实例 中 , steps 
(19) 表 示 让 整个 动画 在 19 个 关键 帧 之 间 切 换 ,. 因 为 "Bad news has wings” 包 含 了 19 帧 (字母 和 空 
格 ) ,所 以 这 里 设置 了 19 。 

此 实例 的 源 文件 名 是 myHtmlB250. html。 


302 ”使 用 关键 帧 动画 高 仿 足 球 深 动 效果 


此 实例 主要 通过 在 关键 帧 动画 中 同时 执行 旋转 和 平移 两 个 动作 高 仿 足球 滚动 的 动态 效果 。 当 在 
Google Chrome 浏览 器 中 显示 该 页 面 时 ,足球 将 从 草坪 的 左 端 滚动 到 右 端 ,然后 再 从 右 端 滚动 到 左 
端 ,如 此 循环 , 永 不 停 软 ,如 图 302-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 302-1 


<!doctype html >< html >< head >< meta charset = "UTF — 8"> 
<style type= "text/css"> 
/* 设 置 草坪 样式 */ 
.myBox { width: 400px; height: 250px; background - image: url("img/B255B. jpg"); 
background— size: 100% 100% ; border - radius: 5px;box— shadow: 2px 2px 5px gray; } 
/* 设 置 足球 滚动 x*/ 
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.myBall { position: absolute; left:15px; top:150px; 
width: 60px; height: 60px; background— size: 100% 100%; 
border — radius: 50% ; background - repeat: no — repeat; 
background — image:url( img/B255. png); 
— webkit — animation: myRoll 5s infinite alternate; } 
@ - webkit - keyframes myRoll { 
0% { -webkit— transform: translateX(0px) rotateZz(0deg); } 
100% { - webkit - transform: translateX(330px) rotateZz(360deg);} } 
</style></head> 
<body> <div class = "myBox"> <div class = "myBall"></div></div> 
</body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , translateX (0px) 和 translateX 
(330px) 表 示 足 球 (div) 将 从 0px 位 置 沿 着 X 轴 平 移 到 330px 位 置 ; rotateZ(0deg) 和 rotateZ(360deg) 
表示 足球 将 围绕 Z 轴 从 0" 旋 转 至 360°, 即 一 圈 ; -webkit-animation: myRoll 5s infinite alternate 表示 
在 5 秒 内 完成 关键 帧 动画 myRoll 中 的 旋转 和 平移 动作 ,然后 再 逆向 执行 , 永 不 停 软 。 

此 实例 的 源 文件 名 是 myHtmlB255. html。 


303 ”使 用 关键 帧 动画 实现 逐 帧 播放 特效 


此 实例 主要 通过 在 animation 属性 中 指定 steps() 函数 实现 卡通 动画 的 逐 帧 播放 效果 。 当 在 
Google Chrome 浏览 器 中 显示 该 页 面 时 将 动态 显示 美女 的 走路 效果 ,如 图 303-1 所 示 。 有 关 此 实例 的 
主要 代码 如 下 。 
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图 303-1 


<!doctype html >< html ><head >< meta charset = "UTF — 8"> 
< style type = "text/css"> 
@ - webkit — keyframes myBeauty { 0% { background - position: ~0% Opx; } 
/* 原 图 像 的 宽度 是 378= 54x7* / 
100% { background- position: —700% Opx; } } 
div { margin: 20px auto; height: 150px;width: 54px; 
/* steps(7) 表 示 让 整个 动画 在 7 个 关键 帧 之 间 切 换 * / 
— webkit — animation: myBeauty 700ms steps(7) infinite; 
background: url( img/B263. png); } 
body { background— color: aqua; } 
</style></head> 
<body>< div></div></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 .-webkit-animation: myBeauty 700ms 
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steps(7) infinite 表示 在 700 毫秒 内 完成 关键 帧 动画 myBeauty 指定 的 改变 背景 图 像 水 平 坐标 的 动 
作 , 并 且 分 成 7 步 来 执行 , 永 不 停 软 。 在 CSS3 中 ,animation 属性 指定 的 动画 默认 以 ease 方式 过 渡 ， 
它 会 在 每 个 关键 帧 之 间 插 入 补 间 动 画 , 所 以 动画 效果 是 连贯 性 的 。 但 是 有 些 动画 效果 并 不 需要 补 间 ， 
只 需要 关键 帧 之 间 的 跳跃 ,这 时 就 应 该 使 用 steps 过 渡 方式 。steps() 函 数 指定 了 一 个 阶 跃 函数 ,第 一 
个 参数 指定 了 时 间 函 数 中 的 间隔 数量 (必须 是 正 整 数 ) .第 二 个 参数 可 选 ,接受 start 和 end 两 个 值 , 指 
定 在 每 个 间隔 的 起 点 或 是 终点 发 生 阶 跃 变化 ,默认 为 end。step-start 等 同 于 steps(1,start) ,动画 分 
成 一 步 , 动 画 执 行 时 以 左 侧 端 点 的 部 分 为 开始 。step-end 等 同 于 steps(1,end) ,动画 分 成 一 步 , 动 画 执 
行 时 以 结尾 端点 为 开始 ,默认 值 为 send。 实例 中 的 steps(7) 表 示 让 整个 动画 在 7 个 关键 帧 之 间 切 换 。 
由 于 原 图 像 中 包含 了 7 个 动作 ,如 图 303-2 所 示 ,所 以 这 里 设置 了 7, 而 且 动 画 时 长 是 700ms, 也 就 是 
说 每 一 帧 停留 100ms ,这 就 和 普通 的 GIF 动 图 达到 了 一 样 的 效果 。 








图 303-2 


background-position 属性 用 于 设置 或 检索 元 素 的 背景 图 像 位 置 ,在 使 用 此 属性 时 必须 先 指定 元 
素 的 background-image 属性 。background-position 属性 提供 两 个 参数 值 ,第 一 个 用 于 横 坐 标 , 第 二 个 
用 于 纵 坐 标 , 如 果 只 提供 一 个 ,该 值 将 用 于 横 坐 标 , 纵 坐标 将 默认 为 50%。 其 默认 值 是 0% 0% ,效果 
等 同 于 left top。background-position 属性 的 语法 格式 如 下 。 

background - position:<position > [ ，<position > ]* 

<position>=[ left | center | right | top | bottom | < percentage> | <length> ] | [ left | center | right 


| <percentage> | <length> ] [ top | center | bottom | < percentage> | <length> ] | [ center | [ left | 
right ] [ <percentage > | <length> ]? ] && [ center | [ top | botton ] [ <percentage> | < length> ]? ] 


各 选项 的 相关 说 明 如 下 。 

(1) < percentage >: 表示 用 百分比 指定 背景 图 像 填充 的 位 置 .可 以 为 负 值 。 
(2) < length >: 表示 用 长 度 值 指定 背景 图 像 填充 的 位 置 . 可 以 为 负 值 。 

(3) center: 表示 背景 图 像 横向 和 纵向 居中 。 

(4) left: 表示 背景 图 像 在 横向 上 填充 从 左边 开始 。 

(5) right: 表示 背景 图 像 在 横向 上 填充 从 右边 开始 。 

(6) top: 表示 背景 图 像 在 纵向 上 填充 从 顶部 开始 。 

(7) bottom: 表示 背景 图 像 在 纵向 上 填充 从 底部 开始 。 

此 实例 的 源 文件 名 是 myHtmlB263. html。 


304 ”使 用 关键 帧 动画 高 仿 扑 死 出 牌 前 的 弹跳 动作 


此 实例 主要 在 animation 属性 中 调用 改变 图 像 纵 坐标 的 动画 ,从 而 实现 高 仿 扑 克 出 牌 前 的 似 出 非 
出 的 ( 抽 插 ) 弹 跳动 作 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,如 果 将 鼠标 指针 放 在 第 二 张 扑 
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克 牌 上 , 则 该 扑克 有 牌 将 上 下 弹跳 , 似 出 非 出 ,如 图 304-1 所 示 ; 如 果 将 鼠标 指针 放 在 其 他 扑克 牌 上 , 仍 


将 实现 类 似 的 效果 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 304-1 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<style type= "text/css"> 
* { margin: 0; padding: 0;} 
/* 设 置 扑 克 牌 样式 * / 
img{ border - radius: 10px;float: left;height: 150px; width: 100px; 
margin: 50px auto;} 
/* 设 置 鼠标 指针 悬浮 于 扑克 牌 时 的 弹跳 动画 * / 


img :hover { position: relative; - webkit— animation: myBounce 0.5s ease infinite; } 
@ - webk 让 一 keyframes myBounce { 0% { top: -35px; } 100% { top: 35px; } } 


</style></head> 
<body>< div>< span>< img src = "img/B265A. jpg"></span> 


< span >< img src = "img/B265B. jpg"></span > <span >< img src = "img/B265C. jpg"></span> 


< span >< img src = "img/B265D. jpg"></span ></div></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,0% {top: 一 35px;} 表 示 在 弹跳 动画 
开始 时 扑克 牌 的 纵 坐 标 为 top: 一 35px, 100% {top: 35px;} 表 示 在 弹跳 动画 结束 时 扑克 牌 的 纵 坐 标 
为 top: 35px, 至 于 扑克 牌 的 纵 坐标 在 动画 期 间 怎样 从 一 35px 移动 到 35px,ease 会 自动 采用 补 间 策 略 
解决 这 一 问题 ; -webkit-animation: myBounce 0. 5s ease infinite 表示 在 500 毫秒 内 按照 ease 模式 完 


成 关键 帧 动画 myBounce 指定 的 改变 扑克 牌 纵 坐 标的 动作 , 且 永 不 停歇 。 
此 实例 的 源 文 件 名 是 myHtmlB265. html。 


305 ”使 用 关键 帧 动画 往返 滑动 自 定义 下 画 线 


此 实例 主要 在 animation 属性 中 调用 改变 背景 的 水 平 坐标 的 动画 ,从 而 实现 自 定义 下 面 线 的 往返 
滑动 特效 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,如 果 将 鼠标 指针 悬浮 在 《巴山 夜 雨 》《 天 云 
山 传 奇 闪 上 , 则 将 在 下 面 出 现 一 条 类 似 于 虚线 的 下 画 线 , 并 且 往 返 滑 动 ,悬浮 期 间 永 不 停 风 , 如 图 305-1 
所 示 ; 如 果 将 鼠标 指针 悬浮 在 其 他 电影 片 名 上 , 仍 将 实现 类 似 的 效果 。 有 关 此 实例 的 主要 代码 如 下 。 
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最 佳 故 事 片 : 《巴山 夜 十 》、《 天 云 山 传奇 》。 
最 位 科教片 : 《生命 与 委 和 白质- 人 工会 成 脾 岛 素 》。 
最 储 志 录 片 : 《 坨 口 委 鸣 曲 》。 

最 住 儿 童 片 : 《地 光 里 的 微笑 》。 


最 住 合 搞 故事 片 : 《家 氏 三 姐妹》。 





图 305-1 


<! doctype html >< html >< head >< meta charset = "UTF - 8"> 
<style> 

/* 绘 制 阴影 框 * / 

div { display: inline - block;width: 380px; height: 200px; padding - left: 20px; 
padding - right: 20px; padding - bottom: 20px;margin: 10px; border- radius: 5px; 
background — color: #FFF;border: 1px solid #EEE; position: relative; 
box - shadow: 5px 5px 5px 1px #999, 0 0 40px rgba(0, 0, 0, 0.06) inset; } 

body { background — color: lightgray;} 

/* 设 置 字体 大 小 ,必须 与 span 中 的 字体 大 小 一 致 */ 

p{ line— height: 35px; font - family: 楷体 ; font - size: 16px; } 

span { position: absolute; height: 35px; font— size: 16px; } 

/* 定 制 下 夯 线 的 风格 */ 

span: hover{ background: linear - gradient(90deg, red 90%, transparent 0) repeat — x; 

background — size: 8px 2px; 
/* 设置 动画 轮流 反 向 播放 并 且 永 不 停止 * / 
— webkit ~ animation: mySlide ls ease alternate infinite; } 
/x* 改变 下 夯 线 背景 的 水 平 坐标 位 置 * / 
@ - webkit - keyframes mySlide { 0% { background - position: — 3em 30px; } 
100% { background - position: 0 30px; }} 
</style></head> 
<body >< div><p> 最 佳 故事 片 : < span > 巴山 夜 雨 > «天 云 山 传奇 ></span >< 巴 山 夜 雨 > < 天 云 山 传奇 >。<br> 
最 佳 科教 片 : < span >« 生 命 与 蛋白 质 一 人 工 合成 胰岛 素 ></span >« 生 命 与 蛋白 质 -人工 合 成 胰岛 素 >。 
<br> 
最 佳 纪录 片 : < span > 蛇口 奏 鸣 遇 ></span > 蛇口 奏鸣曲 >。< br > 
最 佳 儿童 片 : < span >« 烛 光 里 的 微笑 >»</span > 烛光 里 的 微笑 > 。< br> 
最 佳 合 拍 故 事 片 : < span >« 宋 氏 三 姐妹 »</span >« 宋 氏 三 姐妹 »。<br></p></div> 
</body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,background-position: 0 30px 表示 自 
定义 下 画 线 (背景 ) 的 水 平 坐标 为 0、 垂直 坐标 为 30px,background-position: 一 3em 30px 表示 自 定义 
下 画 线 (背景 ) 的 水 平 坐 标 为 一 3em、 垂 直 坐 标 为 30px( 在 一 般 情 况 下 ,如 果 元 素 的 坐标 值 为 负数 ,它们 
就 是 不 可 见 的 ); -webkit-animation: mySlide 1s ease alternate infinite 表示 在 1000 毫秒 内 按照 ease 
模式 完成 关键 帧 动画 mySlide 指定 的 改变 下 画 线 水 平 坐标 (从 一 3em 到 0) 的 动作 ,并 且 往 返 滑动 , 永 
不 停歇 。 

此 实例 的 源 文件 名 是 myHtmlB276. html。 
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306 ”使 用 关键 帧 动画 实现 白云 和 阴影 的 联动 


此 实例 主要 通过 控制 两 个 动画 相同 的 持续 时 间 实 现 白云 在 飘移 时 和 对 应 阴影 的 联动 。 当 在 
Google Chrome 浏览 器 中 显示 该 页 面 时 ,如 果 天 上 的 白云 向 上 飘移 , 则 下 面 的 与 白云 对 应 的 椭圆 形 阴 
影 随 之 变 小 ,如 图 306-1 所 示 ; 如 果 天 上 的 白云 向 下 和 飘移 , 则 下 面 的 与 白云 对 应 的 椭圆 形 阴 影 随 之 变 
大 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 306-1 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<style type= "text/css"> 
.myCloudy{ position: absolute; top: 50% ; left: 50%; 
width: 400px; height: 250px;transform: translate( ~- 50%, — 50%); 
background:url( img/B281. jpg); border ~ radius: 5px; } 
.myCloudy: before { content: ""; position: absolute; height: 50px; 
width: 50px; border - radius: 50% ; background: white;left: 20% ;top: 30%; 
transform: translate( ~- 50%, —40%); 
/* 绘制 整 团 白云 */ 
box - shadow: white 65px 一 15px 0 — 5px, white 25px — 25px, white 30px 10px, 
white 60px 15px 0 — 10px, white 85px 5px 0 — Spx, lightcyan 35px — 35px, 
lightcyan 66px — 27px 0 — lpx, lightcyan 91px 一 10px 0 - 2px; 
/* 白云 动画 * / animation: myCloudy 5s ease - in- out infinite; } 
.myCloudy:after { content: ""; position: absolute; top: 80 %; left: 50%; 
height: 15px; width: 120px; background: rgba(0, 0, 0, 0.5);border - radius: 50%; 
transform: translate( ~- 50%, — 50%); 
animation: myCloudy_shadow 5s ease— in~ out infinite; } 
/x* 白云 关键 帧 * / 
@keyframes myCloudy { 50% { transform: translate( ~- 50%, —80%);} 
100% { transform: translate(— 50%, -40%);}} 
/x* 阴影 关键 帧 * / 
@keyframes myCloudy_shadow {50% { transform: translate( ~ 50%, —50%) scale(0.8); } 
100% { transform: translate( -50%, — 50%) scale(1); } } 
</style></head> 
<body>< div class = "myCloudy"></div></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 .transform: translate (一 50% ,一 80%) 
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表示 将 元 素 ( 白 云 ) 平 移 到 参数 中 指定 的 位 置 ; animation: myCloudy 5s ease-in-out infinite 表示 在 5 
秒 内 按照 ease-in-out 模式 完成 关键 帧 动画 myCloudy 指定 的 translate 改变 元 素 ( 白 云 ) 纵 坐标 (从 一 
80% 到 一 40%) 的 动作 , 且 永 不 停 软 ; transform: translate( 一 50%, 一 50%) scale(0. 8) 表 示 将 元 素 
(阴影 ) 平 移 到 参数 中 指定 的 位 置 ( 此 实例 没有 改变 ,因为 前 后 坐标 均 完全 相同 ,用 户 可 根据 需要 考虑 
此 问题 ) ,并 缩小 scale 到 80% ; animation: myCloudy_shadow 5s ease-in-out infinite 表示 在 5 秒 内 按 
照 ease-in-out 模式 完成 关键 帧 动画 myCloudy_shadow 指定 的 scale 改变 元 素 ( 阴 影 ) 大 小 (从 80% 到 
100%) 的 动作 , 且 永 不 停 吹 。 
此 实例 的 源 文件 名 是 myHtmlB281. html。 


307 ”使 用 关键 帧 动画 实现 白云 和 文本 的 联动 


此 实例 主要 通过 控制 两 个 动画 具有 的 持续 时 间 实 现 白云 在 飘移 时 和 内 内 独 立 文本 的 同时 联动 。 
当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,如 果 不 规则 的 白云 向 上 飘移 , 则 其 里 面 内 艇 的 天 气 预报 
文本 也 同步 向 上 飘移 ,如 图 307-1 所 示 ; 如 果 不 规则 的 白云 向 下 球 移 , 则 其 里 面 内 内 的 天 气 预报 文本 
也 同步 向 下 飘移 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 307-1 


<!doctype html >< html>< head >< meta charset = "UTF - 8"> 
< style type = "text/css"> 
.myCloudy{position: absolute; top: 50% ; left: 50 % ; width: 400px; 
height: 250px; transform: translate( — 50%, —50%); 
background:url( img/B250. jpg); border — radius: 5px; } 
.myCloudy:after { content: ""; position: absolute; height:60px; width: 60px; 
background: white; left: 20%; top: 30% ; border — radius: 50%; 
/* 绘制 整 团 白云 */ 
box - shadow: white 65px — 20px 0 — 5px, white 25px — 25px, 
white 23px 20px, white 80px 15px 0 - Spx, white 95px — 15px 0 — 9px; 
transform: translate( ~- 50%, -30%);animation: myPos 5s ease ~ in~ out infinite; } 
.myCloudy:before{content:" 北 部 新 区 \D\A 2017 年 4 月 4 日 \D\a 晴 转 多 云 23TC"; 
position: absolute; top: 30% ;left: 32% ;height: 65px; width: 100px; 
white - space: pre; text - align: center; font ~ size: 14px; line—~ height: 20px; 
z- index:10;background: white; transform: translate( — 50%, —30%); 
animation: myPos 5s ease— ip- out infinite; } 
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@keyframes myPos { 50 % { transform: translate( ~- 50%, -80%);} 
100% { transform: translate(— 50%, —30%);}} 
</style></head> 
<body>< div class = "myCloudy"></div></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,transform: translate (一 50%, 一 80%) 
表示 将 元 素 ( 白 云 或 内 舱 文 本 ) 平 移 到 参数 中 指定 的 位 置 ; animation: myPos 5s ease-in-out infinite 表 
示 在 5 秒 内 按照 ease-in-out 模式 完成 关键 帧 动画 myPos 指定 的 translate 改变 元 素 (白云 或 内 肉 文 
本 ) 纵 坐标 (从 一 80% 到 一 30%) 的 动作 , 且 永 不 停 吹 ; white-space: pre 表示 空白 会 被 浏览 器 保留 ,其 
行为 方式 类 似 HTML 中 的 < pre > 标签 ,在 此 实例 中 的 主要 作用 是 确保 content 属性 中 的 “\D\A” 实 现 
换行 功能 ; box-shadow: white 65px 一 20px 0 一 5px，white 25px 一 25px, white 23px 20px, white 
80px 15px 0 一 5px, white 95px 一 15px 0 一 9px 用 于 创建 5 个 圆 形 阴影 , 当 这 5 个 圆 形 阴影 释 加 在 一 
起 的 时 候 就 类 似 于 一 团 不 规则 的 白云 。 

此 实例 的 源 文 件 名 是 myHtmlB282. html。 


308 ”使 用 关键 帧 动画 实现 雨滴 从 白云 中 下 落 


此 实例 主要 在 多 个 关键 帧 中 绘制 不 同位 置 的 长 条 形 雨滴 ,然后 通过 动画 改变 其 位 置 , 从 而 实现 拖 
尾 的 雨滴 从 白云 中 连续 下 落 的 特殊 效果 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 , 拖 尾 的 雨滴 
从 白云 中 下 落 的 效果 如 图 308-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 308-1 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
< style type = "text/css"> 
.myBox {position: absolute; top: 50% ; left: 50% ; width: 400px; height: 250px; 
transform: translate( - 50%, —50% );background: url(img/B283. jpg); 
border - radius: 5px;} 
.myRainy { position: absolute; width: 3px; height: 12px; top: 20% ; left: 50%; 
border - radius: 50% ; box - shadow: rgba(255,255,255, 0) — 10px 120px, rgba(255,255, 

255, 0) 40px 120px, rgba(255, 255,255, 0.3) — 50px 75px, rgba(255,255,255, 0.3) 55px 50px, rgba(255, 
255,255, 0.3) — 18px 100px, rgba(255,255,255, 0.3) 12px 95px, rgba(255,255,255, 0.3) — 31px 45px, rgba 
(255, 255,255, 0.3) 30px 35px; animation:myFall 1s infinite linear; } 
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.myRainy:before { content: ""; position: absolute;border - radius: 50%; 
height: 50px; width: 50px;top: 30px; left: — 40px; 
background: white; transform: translate( ~- 40%, -60%); 
/* 绘制 整 团 白云 */ 
box— shadow: white 65px - 15px 0 — 5px, white 25px — 25px, white 30px 10px, white 
60px 15px 0 — 10px, white 85px 5px 0 — 5px; } 
@keyframes myFall { 0% { box- shadow: rgba(255,255,255, 0) - 10px 30px, rgba(255,255,255, 0) 40px 
40px, rgba(255,255,255, 0.3) — 50px 75px, rgba(255,255,255, 0.3) 55px 50px, rgba(255,255,255, 0.3) 
— 18px 100px, rgba(255,255,255, 0.3) 12px 95px, rgba(255,255,255, 0.3) - 31px 45px, rgba(255,255,255, 
0.3) 30px 35px; } 

25% { box- shadow: rgba(255, 255, 255，0. 3) - 10px 45px, rgba(255,255,255, 0.3) 40px 60px, rgba 
(255, 255, 255, 0.3) — 50px 90px, rgba(255,255,255, 0.3) 55px 65px, rgba(255,255,255, 0) — 18px 120px, 
rgba(255, 255,255, 0) 12px 120px, rgba(255,255,255, 0.3) ~ 31px 70px, rgba(255,255,255, 0.3) 30px 60px; 
} 

26% {box- shadow: rgba(255, 255, 255，0. 3) - 10px 45px, rgba(255, 255, 255，0. 3) 40px 60px, rgba 
(255, 255,255, 0.3) - 50px 90px, rgba(255,255,255, 0.3) 55px 65px, rgba(255,255,255, 0) - 18px 40px, 
rgba(255, 255, 255, 0) 12px 20px, rgba(255, 255, 255，0. 3) - 31px 70px, rgba(255, 255, 255, 0.3) 30px 
60px; } 

50% {box- shadow: rgba(255, 255, 255，0. 3) - 10px 70px, rgba(255, 255,255, 0.3) 40px 80px, rgba 
(255, 255,255, 0) - 50px 100px, rgba(255,255,255, 0.3) 55px 80px, rgba(255,255,255, 0.3) — 18px 60px, 
rgba(255, 255, 255, 0.3) 12px 45px, rgba(255,255,255, 0.3) — 31px 95px, rgba(255,255, 255, 0.3) 30px 
85px; } 

51% { box- shadow: rgba(255, 255, 255，0. 3) - 10px 70px, rgba(255,255,255, 0.3) 40px 80px, rgba 
(255, 255, 255, 0) - 50px 45px, rgba(255,255,255, 0.3) 55px 80px, rgba(255,255,255, 0.3) - 18px 60px, 
rgba(255, 255, 255, 0.3) 12px 45px, rgba(255,255,255, 0.3) - 31px 95px, rgba(255, 255, 255, 0.3) 30px 
85px; } 

75% { box - shadow: rgba(255,255,255, 0.3) — 10px 95px, rgba(255,255,255, 0.3) 40px 100px, rgba 
(255, 255, 255, 0.3) - 50px 60px, rgba(255,255,255, 0) 55px 95px, rgba(255,255,255, 0.3) - 18px 80px, 
rgba(255,255, 255, 0. 3) 12px 70px, rgba(255, 255, 255, 0) — 31px 120px, rgba(255, 255, 255, 0) 30px 
110px; } 

76% { box- shadow: rgba(255,255,255, 0.3) — 10px 95px, rgba(255,255,255, 0.3) 40px 100px, rgba 
(255,255, 255, 0.3) — 50px 60px, rgba(255,255,255, 0) 55px 35px, rgba(255,255,255, 0.3) - 18px 80px, 
rgba(255,255,255, 0.3) 12px 70px, rgba(255, 255,255, 0) — 31px 25px, rgba(255,255,255, 0) 30px 15px; } 

100% {box— shadow: rgba(255, 255, 255，0) - 10px 120px, rgba(255,255,255, 0) 40px 120px, rgba 
(255, 255, 255, 0.3) — 50px 75px, rgba(255,255,255, 0.3) 55px 50px, rgba(255,255,255, 0.3) — 18px 100px, 
rgba(255, 255, 255, 0.3) 12px 95px, rgba(255,255,255, 0.3) — 31px 45px, rgba(255,255,255, 0.3) 30px 
35px; }} 

</style></head> 
<body>< div class = "myBox">< div class = "myRainy"></div ></div></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,box-shadow: rgba(255， 255，255， 
0) 一 10px 120px, rgba(255,255,255, 0) 40px 120px, rgba(255,255, 255, 0. 3) 一 50px 75px, rgba 
(255,255,255, 0.3) 55px 50px, rgba(255,255,255, 0.3) 一 18px 100px, rgba(255, 255, 255, 0. 3) 
12px 95px, rgba(255,255,255, 0.3) 一 31px 45px, rgba(255, 255,255, 0.3) 30px 35px 用 于 一 次 性 
产生 多 个 不 同位 置 的 雨滴 , 它 主 要 是 通过 设置 阴影 的 不 同 水 平 位 置 和 垂直 位 置 来 实现 的 ; animation: 
myFall 1s infinite linear 表示 在 1 秒 内 按照 linear 模式 显示 在 关键 帧 动画 myFall 中 每 个 百分点 指定 
的 雨滴 , 且 永 不 停 软 。 

此 实例 的 源 文 件 名 是 myHtmlB283. html。 
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309 ”使 用 关键 帧 动画 高 仿 风 力 发 电机 的 桨 叶 转动 的 特效 


此 实例 主要 通过 在 关键 帧 动画 中 旋转 3 个 桨 叶 的 角度 高 仿 风力 发 电机 的 桨 叶 转 动 的 动态 效果 。 
当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,风力 发 电机 的 桨 叶 转 动 的 动态 效果 如 图 309-1 所 示 。 
有 关 此 实例 的 主要 代码 如 下 。 
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图 309-1 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<style type= "text/css"> 
.myBox { position: absolute;top: 50% ; left: 50% ;width: 400px; height: 250px; 
border - radius: 10px;transform: translate( - 50%, -50%); 
background: url(img/B284. jpg);} 
/* 绘 制 直 杆 */ 
.myBox:after { content: ""; position: absolute;top: 68% ; left: 50%; 
transform: translate( - 50%, — 50%); width: 6px; height: 120px;background: 井 FFF; } 
/* 绘制 第 一 个 桨 叶 * / 
.myBreeze { position: absolute; top: 30% ; left: 50%; 
transform: translate( ~- 50%, -50%) rotate(ldeg); 
border - bottom: 60px solid # FFF; border ~ left: 5px solid transparent; 
border - right: 5px solid transparent; transform — origin: 50.5% 62px; 
animation: myWind 12s infinite linear;} 
/* 绘制 第 二 个 桨 叶 * / 
.myBreeze:before { position: absolute; top: 75px;left: - 59px; 
content: "";border - right: 60px solid # FFF;border — top: 5px solid transparent; 
border - bottom: 5px solid transparent; transform: rotate( ~ 30deg); } 
/* 绘制 第 三 个 桨 叶 * / 
.myBreeze:after { position: absolute; top: 75px; left: — 1px; 
content: ""; border — left: 60px solid # FFF;border — top: 5px solid transparent; 
border - bottom: Spx solid transparent;transform: rotate(30deg); } 
@keyframes myWind { 0% { transform: translate( — 50%, —50%) rotate(0deg); } 
100% { transform: translate( ~ 50%, -50%) rotate(360deg);} } 
</style></head> 
<body>< div class = "myBox"><div class = "myBreeze"></div></div></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,绘制 第 一 (二 三) 个 桨 叶 实 际 上 是 通 
过 控制 边框 线 宽度 来 透明 (transparent) 左 、 右 、 底 边框 线 实现 的 。 其 中 ,第 一 个 桨 叶 的 绘制 效果 如 
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图 309-2 所 示 。 如 果 按照 下 列 代码 进行 修改 , 即 用 红色 和 蓝 色 代替 左边 框 线 和 右边 框 线 的 透明 色 , 并 
设置 其 宽度 和 高 度 (以 前 此 值 均 为 0px) , 则 可 看 到 第 一 个 桨 叶 的 左 、 右 、 底 边框 线 是 怎样 切 分 成 三 角形 
的 ,如 图 309-3 所 示 。 
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图 309-2 图 309-3 


/* 绘制 第 一 个 桨 叶 * / 

.myBreeze { position: absolute; top: 30% ; left: 50%; 
transform: translate( ~- 50%, -50%) rotate(ldeg); 
transform— origin: 50.5% 62px; width:10px; height :10px; 
border - bottom: 60px solid #FFF; border — left: 5px solid green; 
border - right: 5px solid blue; } 


此 实例 的 源 文件 名 是 myHtmlB284. html。 


310 ”使 用 关键 帧 动画 模拟 彩虹 和 阴影 的 联动 


此 实例 主要 通过 使 用 圆 角 产 生 的 弧 线 制作 彩虹 并 控制 两 个 动画 相同 的 持续 时 间 , 从 而 实现 模拟 
彩虹 和 阴影 的 联动 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,彩虹 左右 摆动 时 下 面 的 阴影 也 同 
时 联动 ,如 果 彩 虹 达 到 左 端 , 则 下 面 与 之 对 应 的 阴影 最 小 ,如 图 310-1 所 示 ; 如 果 彩 虹 在 中 间 , 则 下 面 
与 之 对 应 的 阴影 最 大 。 有 关 此 实例 的 主要 代码 如 下 。 
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<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
< style type= "text/css"> 
.myBox{ position: absolute; top: 50% ; left: 50%; 
width: 400px; height: 250px; transform: translate( - 50%, —50%); 
background:url (img/B281. jpg); border - radius: 5px;} 
. myRainbow{ position:absolute; top: 50% ; left: 50%; 
transform: translate( ~- 50%, — 50%);} 
. myRainbow :before{ content:""; position:absolute; top: 50 % ;left: 50%; 
/* 将 矩形 旋转 45 ,使 左上 角 的 圆 角 产生 的 弧 线 向 上 项 起 * / 
transform: translate( ~ 50%, —50% ) rotate(45deg); 
/* 设置 矩形 的 宽度 和 高 度 , 仅 设置 矩形 左上 角 的 圆 角 半 径 , 其 他 3 个 角 不 显示 * / 
height: 60px;width: 60px; border — radius: 60px 0 0 0; 
/* 根据 左上 角 的 圆 角 产生 的 向 上 弧 线 产生 多 级 彩色 阴影 , 即 彩虹 * / 
box— shadow: #3F44336 一 2px 一 2px 0 lpx, #FF9800 一 4px 一 4px 0 3px, 
亲 FFEB3B 一 6px -6px 0 5px, #8BC34A 一 8px 一 8px 0 7px, 
井 00BCD4 - 10px — 10px 0 9px, #2196F3 - 12px — 12px 0 11px, 
井 9C27B0 - 14px -14px 0 13px; 
/* 使 用 关键 帧 动画 来 回 晃动 彩虹 * / 
animation: myRotate 5s ease 一 in- out infinite; } 
. myRainbow:after{ content: ""; position: absolute; 
top: 70px;left: 50%; 
height: 15px; width: 90px; background: rgba(0, 0, 0, 0.5); 
border — radius: 50% ;transform: translate( - 50%, -50%); 
/* 使 用 关键 帧 动画 缩放 阴影 * / 
animation: myShadow 5s ease- in— out infinite; } 
@keyframes myRotate { 50% { transform: translate( ~ 50%, -55%) rotate(30deg); } 
100% { transform: translate( ~ 50%, -50%) rotate(45deg); } } 
@keyframes myShadow {50% {transform: translate( -~ 50%, -50%) scale(0.8); 
background: rgba(0, 0, 0, 0.2); } 
100% {transform: translate(— 50%, —50%) scale(1); 
background: rgba(0, 0, 0, 0.5); } } 
</style></head> 
<body> 
<div class= "myBox">< div class = "myRainbow"></div ></div> 
</body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,animation: myRotate 5s ease-in-out 
infinite 表示 在 5 秒 内 按照 ease-in-out 模式 完成 关键 帧 动画 myRotate 指定 的 rotate 改变 元 素 ( 彩 虹 ) 
的 旋转 角度 ( 即 左 右 晃动 ), 且 永 不 停 软 ,此 实例 最 奇妙 的 地 方 是 使 用 圆 角 和 矩形 的 圆 角 弧 线 来 制作 圆 弧 
形 的 彩虹 ; border-radius; 60px 0 0 0 表示 左上 角 的 圆 角 半径 是 60px, 其 他 3 个 角 省 略 , 因 此 可 见 的 只 
有 四 分 之 一 的 圆 弧 形 的 彩虹 。 在 CSS3 中 ,border-radius 属性 用 于 设置 元 素 的 圆 角 半径 ,该 属性 的 语 
法 格式 如 下 。 

border - radius: 1- 4 length| % /1-4 length| %; 

其 中 ,length 表示 以 (像素 ) 值 设置 圆 角 半径 ; % 表 示 以 百分比 形式 定义 圆 角 半径 ; 1-4 的 顺序 分 
别 是 左上 角 、 右 上 角 、 右 下 角 、 左 下 角 , 按 此 顺序 设置 每 个 角 的 半径 值 。 如 果 省 略 bottom-left, 则 与 
top-right 相同 ; 如 果 省 略 bottom-right. 则 与 top-left 相同 ; 如 果 省 略 top-right, 则 与 top-left 相同 。 
例如 “border-radius: 2em lem 4em/0.5em 3em;” 等 价 于 以 下 代码 。 


border - top ~ left ~ radius: 2em 0.5em; 
border - top ~ right - radius: lem 3em; 
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border - bottom- right - radius: 4em 0.Sem; 
border - bottom— left- radius: lem 3em; 


此 实例 的 源 文件 名 是 myHtmlB285. html。 


311 使 用 关键 帧 动画 模拟 夜空 中 闪烁 的 星星 


此 实例 主要 使 用 多 级 阴影 产生 多 个 星星 ,并 在 关键 帧 中 设置 不 同 的 偏 移 位 置 ,从 而 实现 星星 闪烁 
的 动 7 RR 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,当月 亮 小 幅度 摆动 时 星星 也 出 现 一 明 一 
暗 的 闪烁 效果 ,如 图 311-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 311-1 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
< style type= "text/css"> 
.myBox { position: absolute; top: 50% ; left: 50% ; width: 400px; height: 250px; 
transform: translate( ~ 50%, -50%);background: url( img/B286. jpg); 
border - radius: 5px;} 
.myMoon { position: absolute;top: 20% ;left: 30%; 
transform: translate( - 50%, — 50%); height: 4px; width: 4px;border - radius: 50%; 
/* 通过 阴影 生成 多 个 星星 * / 
box - shadow: yellow - 26px 77px 0 - lpx, rgba(255, 255, 255, 0.1) - 36px 59px 0 — lpx, rgba 
(255, 255, 255, 0.1) -28px 89px 0 — lpx, yellow - 35px 20px 0 — lpx, yellow 14px 100px, rgba 
(255, 255, 255, 0.1) 41px 60px, yellow 34px 39px, rgba(255, 255, 255, 0.1) 14px 45px 0 — 1px, 
Yellow 64px 12px 0 — 1px, rgba(255, 255, 255, 0.1) 32px 96px 0 — lpx, yellow 64px 71px, rgba 
(255, 255, 255, 0.1) 60px 18px 0 — lpx, yellow 34px 9px, rgba(255, 255, 255, 0.1) - 26px 55px 
0 — 1px; 
/* 启动 星星 闪烁 动画 * / 
animation: myMoon_star 5s ease— in- out infinite; } 
. myMoon :before { content: ""; position: absolute; top: 20% ; left: 50%; 
width: 70px; height: 70px; box - shadow: white — 25px 0; 
transform: rotate(15deg); border - radius: 50%; 
animation: myMoon 5s ease — in— out infinite; } 
/* 实 现 晃动 的 月 亮 */ 
@keyframes myMoon { 50% { transform: rotate(45deg); } } 
/* 实 现 闪烁 的 星星 * / 
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@keyframes myMoon star { 50% { box— shadow: rgba(255, 255, 255, 0.1) - 26px 77px 0 — lpx, yellow 
一 36px 59px 0 — lpx, yellow — 28px 89px 0 — lpx, rgba(255, 255, 255, 0.1) — 35px 20px 0 — 1px, rgba(255, 
255, 255, 0.1) 14px 100px, yellow 41px 60px, rgba(255, 255, 255, 0.1) 34px 39px, yellow 14px 45px 0 — 1px, 
rgba(255, 255, 255, 0.1) 64px 12px 0 — 1px, yellow 32px 96px 0 — lpx, rgba(255, 255, 255, 0.1) 64px 71px, 
yellow 60px 18px 0 — 1px, rgba(255, 255, 255, 0.1) 34px 9px, yellow — 26px 55px 0 — lpx; } } 
</style></head> 
<body>< div class = "myBox"><div class = "myMoon"></div></div ></body ></html > 


上 面 有 


out infinite 


闪烁 动画 ， 





底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,animation: myMoon_star 5s ease-in 
表示 在 





5 秒 内 按照 ease-in-out 模式 完成 关键 帧 myMoon_star 中 指定 的 一 明 一 暗 的 星星 


次; animation : myMoon 5s ease-in-out infinite 表示 在 5 秒 内 按照 ease-in-out 模 


式 完成 以 关键 帧 myMoon 中 指定 的 角度 旋转 月 亮 的 摆动 动画 . 且 永 不 停 吹 。 此 实例 最 奇妙 的 地 方 是 


在 box-shadow: white 


white 25px 


此 实例 


312 


此 实 个 





25px 0 中 通过 弧 线 阴影 7 
0, 则 反 向 产生 一 个 向 右 的 月 亮 
的 源 文件 名 是 myHtmlB286. html 


使 用 关键 帧 动画 模拟 夜空 中 下 落 的 流星 雨 


主要 在 多 个 关键 帧 中 使 用 box-shadow 生成 不 同位 置 的 阴影 圆 形 (流星 ), 然 后 使 用 动画 不 


: 生 的 月 亮 , 如 果 将 此 代码 修改 为 box-shadow: 


断 改变 每 个 流星 的 位 置 , 从 而 实现 夜空 中 流星 十 下落 的 动态 效果 。 当 在 Google Chrome 浏览 器 中 显 





示 该 页 面 有 
如 下 。 


,流星 (中 间 部 分 的 黄 点 ) 从 夜空 中 下 > 





的 效果 如 图 312-1 所 示 。 有 关 此 实例 的 主要 代码 





NY] myHtmle287 html x 
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图 312-1 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
< style type = "text/css"> 
.myBox { position: absolute; top: 50%; left: 50% ;width: 400px; height: 250px; 


transform: translate( ~- 50%, — 50% ) ;background: url( img/B287. jpg); 
border — radius: 5px;} 


.myMeteor { position: absolute; width: 3px; height: 3px; border - radius:50%; 
top: 30%; left: 50% ; background: transparent; border ~ radius: 50%; 
/* 启 动 关键 帧 中 的 流星 雨 动画 * / 


animation: myMeteorRain 2s infinite linear; } 
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@keyframes myMeteorRain { 0% {/* 通 过 创建 多 个 阴影 ( 圆 ) 获 得 多 个 流星 * / 
box - shadow:rgba(255，255，0，0) - 10px 30px, rgba(255, 255, 0, 0) 40px 40px, 
rgba(255, 255, 0, 0.6) - 50px 75px, rgba(255, 255, 0, 0.6) 55px 50px, 
rgba(255, 255, 0, 0.6) - 18px 100px, rgba(255, 255, 0, 0.6) 12px 95px, 
rgba(255, 255, 0, 0.6) - 31px 45px, rgba(255, 255, 0, 0.6) 30px 35px; } 
25% {box— shadow: rgba(255, 255, 0, 0.6) - 10px 45px, rgba(255, 255, 0, 0.6) 40px 60px, 
rgba(255, 255, 0, 0.6) - 50px 90px, rgba(255, 255, 0, 0.6) 55px 65px, 
rgba(255, 255, 0, 0) - 18px 120px, rgba(255, 255, 0, 0) 12px 120px, 
rgba(255, 255, 0, 0.6) - 31px 70px, rgba(255, 255, 0, 0.6) 30px 60px; } 
26% {box - shadow: rgba(255, 255, 0, 0.6) - 10px 45px, rgba(255, 255, 0, 0.6) 40px 60px, 
rgba(255, 255, 0, 0.6) - 50px 90px, rgba(255, 255, 0, 0.6) 55px 65px, 
rgba(255, 255, 0, 0) - 18px 40px, rgba(255, 255, 0, 0) 12px 20px, 
rgba(255, 255, 0, 0.6) - 31px 70px, rgba(255, 255, 0, 0.6) 30px 60px; 
50% {box— shadow: rgba(255, 255, 0, 0.6) - 10px 70px, rgba(255, 255, 0, 0.6) 40px 80px, 
rgba(255, 255, 0, 0) - 50px 100px, rgba(255, 255, 0, 0.6) 55px 80px, 
rgba(255, 255, 0, 0.6) - 18px 60px, rgba(255, 255, 0, 0.6) 12px 45px, 
rgba(255, 255, 0, 0.6) - 31px 95px, rgba(255, 255, 0, 0.6) 30px 85px; 
51% { box- shadow:rgba(255, 255, 0, 0.6) - 10px 70px, rgba(255, 255, 0, 0.6) 40px 80px, 
rgba(255, 255, 0, 0) - 50px 45px, rgba(255, 255, 0, 0.6) 55px 80px, 
rgba(255, 255, 0, 0.6) - 18px 60px, rgba(255, 255, 0, 0.6) 12px 45px, 
rgba(255, 255, 0, 0.6) - 31px 95px, rgba(255, 255, 0, 0.6) 30px 85px; } 
75% { box- shadow: rgba(255, 255, 0, 0.6) - 10px 95px, rgba(255, 255, 0, 0.6) 40px 100px, 
rgba(255, 255, 0, 0.6) - 50px 60px, rgba(255, 255, 0, 0) 55px 95px, 
rgba(255, 255, 0, 0.6) — 18px 80px, rgba(255, 255, 0, 0.6) 12px 70px, 
rgba(255, 255, 0, 0) - 31px 120px, rgba(255, 255, 0, 0) 30px 110px;} 
76% { box- shadow: rgba(255, 255, 0, 0.6) - 10px 95px, rgba(255, 255, 0, 0.6) 40px 100px, 
rgba(255, 255, 0, 0.6) - 50px 60px, rgba(255, 255, 0, 0) 55px 35px, 
rgba(255, 255, 0, 0.6) — 18px 80px, rgba(255, 255, 0, 0.6) 12px 70px, 
rgba(255, 255, 0, 0) - 31px 25px, rgba(255, 255, 0, 0) 30px 15px; } 
100% {box- shadow:rgba(255, 255, 0, 0) - 10px 120px, rgba(255, 255, 0, 0) 40px 120px, 
rgba(255, 255, 0, 0.6) - 50px 75px, rgba(255, 255, 0, 0.6) 55px 50px, 
rgba(255, 255, 0, 0.6) - 18px 100px, rgba(255, 255, 0, 0.6) 12px 95px, 
rgba(255, 255, 0, 0.6) -31px 45px, rgba(255, 255, 0, 0.6) 30px 35px; }} 
</style></head> 
<body>< div class = "myBox">< div class = "myMeteor"></div ></div></body></html > 





上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,box-shadow: rgba(255, 255, 0, 0) 
一 10px 30px, rgba(255, 255, 0, 0) 40px 40px,rgba(255, 255, 0, 0.6) 一 50px 75px, rgba(255, 
255, 0, 0.6) 55px 50px, rgba(255, 255, 0, 0.6) 一 18px 100px, rgba(255, 255, 0, 0. 6) 12px 
95px, rgba(255, 255, 0, 0.6) 一 31px 45px, rgba(255, 255, 0, 0. 6) 30px 35px 用 于 一 次 性 产生 多 
个 不 同位 置 的 流星 ( 圆 ) , 它 主 要 是 通过 设置 阴影 的 不 同 水 平 位 置 和 垂直 位 置 来 实现 的 。 在 实例 中 有 
多 个 关键 帧 ,在 animation 使 用 补 间 动 画 修补 后 它们 在 执行 时 就 成 了 连续 的 动画 ,形成 完整 流畅 的 动 
作 。animation: myMeteorRain 2s infinite linear 表示 在 两 秒 内 按照 linear 模式 显示 关键 帧 动画 
myMeteorRain 中 每 个 百分点 指定 的 流星 , 且 永 不 停歇 。 在 动画 开始 后 ,除了 通过 不 断 改 变 位 置 产 生 
流星 下 落 的 效果 外 ,还 有 改变 透明 度 让 流星 在 下 落 时 一 会 儿 隐藏 一 会 儿 显 示 的 穿越 动画 效果 。 

此 实例 的 源 文 件 名 是 myHtmlB287. html。 


313 ”使 用 关键 帧 动画 实现 水 波 波纹 扩散 的 效果 


此 实例 主要 在 animation 属性 中 使 用 scale() 方 法 改变 大 小 ,从 而 实现 水 波 波纹 一 圈 接 一 圈 由 里 
向 外 自动 扩散 的 效果 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 , 圆 形 的 图 片 将 自动 呈现 水 波 波 
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纹 一 圈 接 一 圈 由 里 向 外 自动 扩散 的 效果 ,如 图 313-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
百 - oo x 


口 myHtmlB299 html x 
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图 313-1 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
< style type= "text/css"> 
.myWave{ position: absolute; top: 50% ;left: 50%;transform: translate( - 50%, - 50%); width: 
200px; height: 200px;background - image:url('img/B299. jpg' ); 
background - position: center center; overflow: hidden; border - radius: 50%; box— shadow: 2px 2px 8px 
black; } 
.myWave: :before, .myWave: :after{ content:"";position:absolute; 
background - image :url( 'img/B299. jpg') ;background - position:center center; 
border - radius:50% ;} 
.myWave: :before{ z- index:2; animation:myWave 5s ease— out infinite;} 
.myWave: :after{ z- index:3; animation:myWave 5s ease— out 0.5s infinite;} 
@keyframes myWave{ 0%{ top: 50% ;left: 50%; 
transform: translate( - 50%, — 50%) scale(1.5);width:30px;height:30px;} 
50%{ top: 50% ;left: 50% ; transform: translate( ~ 50%, -50%) scale(1); 
/x* 设置 波纹 扩散 后 的 大 小 * / width:240px; height:240px;} 
100% { top: 50% ;left: 50% ; transform: translate( ~- 50%, — 50%) scale(1); 
width: 240px; height:240px; } } 
</style></head> 
<body>< div class = "myWave"></div ></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , animation: myWave 5s ease-out 
infinite 表示 在 5 秒 内 按照 ease-out 模式 完成 关键 帧 动画 myWave 指定 的 改变 图 像 大 小 的 动作 , 且 永 
不 停歇 ; animation: myWave 5s ease-out 0. 5s infinite 实现 的 功能 与 前 面 的 代码 相同 ,但 是 有 0. 5 秒 
的 延迟 ,因此 产生 波纹 一 圈 接 一 圈 扩 散 的 动态 效果 。 

此 实例 的 源 文 件 名 是 myHtmlB299. html。 


314 ”使 用 关键 帧 动画 模拟 座 椅 在 地 板 上 滑动 


此 实例 主要 通过 在 animation 属性 中 改变 元 素 ( 座 椅 ) 与 右边 缘 的 距离 模拟 座 椅 在 地 板 上 的 左右 
滑动 效果 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ' 座 椅 将 首先 从 左边 滑 向 右边 ,如 图 314-1 所 
示 ; 然后 再 从 右边 滑 向 左边 ,如 此 往复 , 永 不 停 软 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 314-1 


<!doctype html >< html >< head > < meta charset = "UTF - 8"> 
<style type= "text/css"> 
div { margin: 0 auto; width: 400px; height: 250px; border — radius: 5px; 
background - image: url("img/B308B. jpg"); background - size: 100% 100%;} 
img { position: relative; width: 150px; height: 150px; bottom: — 90px; 
— webkit ~ animation: mySlide 10s linear infinite; } 
@ -webkit ~ keyframes mySlide { 0% { right: 0;} 50% { right: 一 250px; } 
100% { right: 0; } } 
</style></head> 
<body>< div>< img src = "img/B308A. png"></div></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,right: 一 250px 表示 座 椅 与 右边 缘 的 
距离 是 一 250px。 在 CSS 中 ,right 属性 规定 元 素 的 右边 缘 ,该 属性 定义 了 定位 元 素 右 外 边 距 边界 与 其 
包含 块 右边 界 之 间 的 偏 移 , 如 果 position 属性 值 为 static, 那 么 设置 right 属性 不 会 产生 任何 效果 。 

webkit-animation: mySlide 10s linear infinite 表示 在 10 秒 内 按照 linear 模式 完成 关键 帧 动画 
mySlide 指定 的 改变 座 椅 与 右边 缘 的 距离 的 动作 , 即 座 椅 与 右边 缘 的 距离 不 断 在 0 到 一 250, 再 返回 0 
之 间 循 环 , 永 不 停歇 。 

此 实例 的 源 文 件 名 是 myHtmlB308. html。 


315 ”使 用 关键 帧 动画 模拟 内 、 外 圆 环 转动 特效 


此 实例 主要 在 animation 属性 中 以 动画 的 形式 旋转 元 素 并 改变 透明 度 , 从 而 实现 模拟 内 、 外 圆 环 
错位 连续 转动 的 特效 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,内 、 外 两 个 蓝 色 的 圆 环 将 错位 旋 
转 , 且 永 不 停 软 ,效果 如 图 315-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 

天 二 


[DY myHtemlB310 html x 





= 说 CD file///D/myWork/myHtm 安 三 





第 3 部 分 > 





<!doctype html >< html >< head >< meta charset = "UTF — 8"> 
<style type= "text/css"> 
/* 外 层 圆 环 设置 */ 
##myOutCircle { background— color: rgba(0, 0, 0, 0); opacity: 0.9; 
border: 5px solid rgba(0, 183, 229, 0.9);border — right: 5px solid rgba(0, 0, 0, 0); 
border - left: 5px solid rgba(0, 0, 0, 0); border - radius: 50px; 
box— shadow: 0 0 35px #2187E7;width: 50px; height: 50px; margin: 0 auto; 
position: fixed;left: 50% ; top: 50% ; margin— left: — 25px; margin— top: — 25px; 
— webkit - animation: OutCirclePulse 1s infinite ease— in— out;} 
/* 外 层 圆 环 关键 帧 设置 * / 
@ - webkit - keyframes OutCirclePulse { 
0% { - webkit - transform: rotate(160deg) ; 
opacity: 0; box- shadow: 0 0 lpx #505050; } 
50% { —webkit— transform: rotate(145deg); opacity: 1; } 
100% { - webkit - transform: rotate( - 320deg); opacity: 0;} } 
/* 内 层 圆 环 设置 */ 
##myInCircle { background: rgba(0, 0, 0, 0) no - repeat center center; 
border: 5px solid rgba(0, 183, 229, 0.9); opacity: 0.9; 
/* 产 生 上 .下 两 个 断 开 圆 环 */ 
border - top: 5px solid rgba(0, 0, 0, 0); 
border - bottom: 5px solid rgba(0, 0, 0, 0); 
border - radius: 50px; box— shadow: 0 0 15px #2187E7; 
width: 30px; height: 30px; margin: 0 auto; position: fixed; 
left: 50% ; top: 50% ;margin— left: — 15px; margin - top: — 15px; 
— webkit - animation: InCirclePulse 3s infinite linear; } 
/* 内 层 圆 环 关键 帧 设置 * / 
@ - webkit - keyframes InCirclePulse { 0% { - webkit- transform: rotate(Odeg);} 
100% { - webkit- transform: rotate(360deg); } } 
</style></head> 
<body><div id = "myOutCircle"></div><div id= "myInCircle"></div></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,border-right: 5px solid rgba(0, 0， 
0, 0) 用 于 设置 外 层 圆 环 的 右边 框 线 ( 四 分 之 一 圆 环 ) 的 线 宽 为 5px, 完 全 透明 , 即 产 生 断 开 的 效果 ; 
opacity; 0 表示 完全 透明 ,opacity: 1 表示 完全 不 透明 ,外 层 圆 环 通过 控制 透明 度 决定 自己 在 何 时 隐 
藏 . 何 时 显示 ,从 而 在 旋转 时 产生 闪烁 的 效果 ; rotate(160deg) 表 示 沿 着 顺 时 针 方 向 旋转 160"， 
-webkit-animation: OutCirclePulse 1s infinite ease-in-out 表示 在 1 秒 内 按照 ease-in-out 模式 完成 关 
键 帧 动画 OutCirclePulse 指定 的 改变 旋转 角度 和 透明 度 的 动作 , 且 永 不 停歇 。 

此 实例 的 源 文件 名 是 myHtmlB310. html。 


316 ”使 用 关键 帧 动画 实现 带 阴 影 浙 变 进度 条 
此 实例 主要 在 animation 属性 中 以 动画 的 形式 改变 元 素 的 宽度 ,从 而 创建 带 阴 影 的 渐变 进度 条 。 


当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 , 带 渐 变色 的 进度 条 将 从 左 向 右 改 变 进度 , 且 永 不 停 欣 ， 
效果 如 图 316-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 





<!doctype html > < html >< head >< meta charset = "UTF — 8"> 
<style type= "text/css"> 
.myBox { left: 10px; position: absolute; top: 20px; } 
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.myProgress { background - color: #E5E9Eb; 
height: 0. 25em; position: relative; width: 20em; } 
/* 绘 制 渐变 进度 条 * / 
.myProgress - bar { background - image: linear - gradient(to right， 井 4CD964， 井 5RC8FR， 提 007RFF， 间 
34AADC， 提 5856D6，## FF2D55); 
background — size: 20em 0.25em; height: 100%; 
position: relative; animation: myWidth 3s linear infinite;} 
/* 绘 制 渐变 进度 条 下 面 的 阴影 * / 
.myProgress - shadow { background - image: linear — gradient(to bottom, # EAECEE, transparent); 
height: 4em; position: absolute; top: 100%; 
transform: skew(45deg); transform- origin: 0 0; width: 100% ; } 
@ - webkit - keyframes myWidth { 
0%, 100% {transition- timing - function: cubic - bezier(1, 0, 0.65, 0.85);} 
0O% {width: 0; } 100% { width: 100%; }} 
</style></head> 
<body >< div class = "myBox"> 
<div class= "myProgress">< div class = "myProgress — bar"> 
<div class = "myProgress - shadow"></div></div ></div></div></body ></html > 





上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 一 
代码 中 ,width:100% 表 示 用 百分比 来 定义 宽度 ,百分比 DD myHtml8313 html x 
参照 块 宽度 ,在 此 实例 中 使 用 百分比 最 大 的 优势 是 盒子 | 全 说 C [DTieyWDymyworwmyhtmlB 安 | 三 


中 的 元 素 宽 度 始 终 随 着 盒子 的 宽度 而 改变 ; linear- | 一 一 一 
gradient(to right, #4CD964, #5AC8FA., #007AFF,. 
#34AADC, #5856D6，# FF2D55) 用 于 以 从 左 向 右 的 
方向 创建 线性 渐变 的 背景 ，animation: myWidth 3s 
linear infinite 表示 在 3 秒 内 按照 linear 模式 完成 关键 帧 图 316-1 
动画 myWidth 指定 的 改变 宽度 的 动作 , 且 永 不 停歇 。 

此 实例 的 源 文件 名 是 myHtmlB313. html。 


317 ”使 用 关键 帧 动画 实现 当前 按钮 标题 的 闪烁 显示 


此 实例 主要 使 用 关键 帧 动画 设置 按钮 标题 的 color 属性 ,从 而 实现 当 鼠 标 指针 悬浮 在 按钮 上 时 按 
钮 标题 不 断 闪 烁 的 效果 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,如 果 鼠 标 指 针 悬 浮 在 第 一 个 
按钮 上 , 则 该 按钮 的 标题 “奇妙 数学 的 100 个 重大 突破 ?将 以 黑色 .青色 .绿色 的 顺序 交替 闪烁 ,如 
图 317-1 所 示 ; 如 果 鼠 标 指 针 悬 浮 在 其 他 按钮 上 , 则 该 按钮 的 标题 也 将 以 黑色 .青色 .绿色 的 顺序 交替 
闪烁 。 有 关 此 实例 的 主要 代码 如 下 。 
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<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<style type= "text/css"> 
ay a:visited { outline: none; color: black; } 
.myButton { display: inline— block; min— width: 250px; 
width: 60% ; height: 20px; font — size: 18px; 
color: black; text - decoration: none ! important; 
padding: 9px 30px; 
box — shadow: 0 5px 5px darkgrey; 
border — radius: 10px; background - color: grey; } 
.myButton:hover { — webkit — animation: myBlink 1s infinite ease; } 
/* 设 置 关键 帧 动画 的 闪烁 颜色 * / 
@ - webkit ~ keyframes myBlink { 0% { color: black; } 
40% { color: cyan; } 70% { color: lightgreen;} } 
</style></head> 
<body> 
<p align= "center"><a href ="#" class= "myButton"> 奇 妙 数学 的 100 个 重大 突破 </a></p> 
<p align= "center"><a href ="#" class= "myButton"> 科 学 美国 人 趣味 数学 集锦 </a></p> 
<p align = "center"><a href ="#" class = "myButton"> 改 变 世 界 的 134 个 概率 统计 故事 </a > </p></body > 
</html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,text-decoration: none ! important 
用 于 取消 超 链接 的 下 画 线 。! important 是 CSS1 定义 的 语法 ,作用 是 提高 指定 样式 规则 的 应 用 优先 
权 。 其 语法 格式 为 { cssRule ! important }, 即 它 写 在 CSS 定义 的 最 后 面 ,例如 box{color:red ! 
important; }。 在 默认 情况 下 ,CSS 规则 按 级 层 覆 盖 , 例 如 在 . css 文件 中 的 定义 可 以 被 style 标签 的 定 
义 窗 盖 , 反 之 则 不 行 。 然 而 ,对 于 覆盖 平衡 而 言 ,加 上 一 个 “! important” 就 优先 于 正常 的 CSS 规则 。 
40% { color: cyan; } 表 示 在 动画 期 间 的 40% 时 点 上 按钮 标题 的 颜色 是 cyan。-webkit-animation: 
myBlink 1s infinite ease 表示 当前 按钮 的 标题 将 在 1 秒 内 以 ease 模式 执行 myBlink 关键 帧 中 的 改变 
颜色 的 动作 , 且 永 不 停歇 。 

此 实例 的 源 文件 名 是 myHtmlB325. html。 


318 ”使 用 关键 帧 动画 实现 圆 环 转圈 加 载 的 特效 


此 实例 主要 通过 关键 帧 动画 控制 元 素 的 transform 属性 指定 的 rotate() 方 法 实现 圆 环 转圈 加 载 








的 特效 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 . 圆 环 在 转圈 的 过 程 中 将 按照 顺序 改变 颜色 , 且 
永 不 停 软 ,如 图 318-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
百 口 x 
DD myHtmlB326 html x 
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<!doctype html >< html >< head >< meta charset = "UTF — 8"> 
<style type= "text/css"> 
-myBox{ } 
/* 设 置 内 圆 样式 */ 
.myBox . inner_circle { position: relative; width: 120px; height: 120px; 
background - color: white; border - radius: 50% ;margin- top: — 135px; 
line - height: 120px;z— index: 999;} 
/x* 设 置 外 圆 样式 */ 
.myBox . outer_circle { position: relative;width: 150px; height: 150px; 
border - radius: 50% ; background— color: cyan;} 
/* 设置 外 圆 与 内 圆 之 间 的 转 峰 圆 ( 环 ) 的 样式 * / 
.myBox . rotate circle { position: relative; border - radius: 150px 0 0 150px; 
width: 75px; height: 150px;background— color: red; margin— top: - 150px; 
margin— left: - 75px; z- index: 222; — webkit - transform - origin: 75px 75px; 
— webkit ~ animation: myRotate 5s infinite linear; } 
@— webkit— keyframes myRotate{ 0% { -webkit— transform: rotate(0deg) ; 
background - color: red; } 
50% { —webkit— transform: rotate(180deg); background - color: green; } 
100% { -webkit— transform: rotate(360deg); background - color: blue; } } 
</style></head> 
<body>< div class = "myBox" align = "center"> 
<divclass="outer circle"></div><div class = "rotate circle"></div> 
<div class = "inner_circle"> 正 在 加 载 .. .</div></div></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,z-index 属性 用 于 设置 元 素 的 堆 释 顺 
序 , 拥 有 更 高 堆 伙 顺序 的 元 素 总 是 处 于 堆 释 顺序 较 低 的 元 素 的 前 面 ,由 于 此 实例 是 由 3 个 不 同 半径 的 
圆 饼 按照 z-index 属性 值 的 大 小 堆 秋 在 一 起 ,转圈 效果 只 需要 中 间 的 圆 饼 ( 环 ) 转 动 即 可 ; -webkit- 
transform: rotate(180deg) 表 示 顺 时 针 旋 转 180 ; -webkit- transform-origin: 75px 75px 用 于 设置 旋 
转 元 素 ( 圆 饼 ) 的 基点 位 置 (75px 75px) ; -webkit-animation: myRotate 5s infinite linear 表示 在 5 秒 内 





以 线性 方式 完成 关键 帧 动画 myRotate 的 旋转 动作 . 且 永 不 结束 。 
此 实例 的 源 文件 名 是 myHtmlB326. html。 


319 ”使 用 关键 帧 动画 实现 环绕 矩形 转动 特效 


此 实例 主要 通过 关键 帧 动画 控制 clip 属性 指定 的 裁剪 矩形 实现 环绕 矩形 的 转动 特效 。 当 在 
Google Chrome 浏览 器 中 显示 该 页 面 时 ,一 条 黄色 的 线条 将 按照 逆 时 针 方 向 环绕 矩形 图 像 做 逆 时 针 





转动 ,如 图 319-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 


<!doctype html >< html>< head ><meta charset = "UTF - 8"> 
< style type= "text/css"> 
html, body { margin: 0; padding: 0; background: #101010;} 
.myBox { width: 300px; margin: 50px auto; } 
/* 设 置 图 像 盒子 的 大 小 < / 
.myImage { position: relative; width: 200px; height: 200px; } 
/* 在 图 像 盒 子 的 外 面 嵌 套 黄色 边框 线 的 矩形 * / 
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width: 220px; height: 220px; top: - 10px; left: - 10px; border: 2px solid yellow; 


.myImage:after { content: " "; display: block; position: absolute; z- index: 10; 


box- sizing: border - box; - webkit- animation: myClip 2s infinite linear; } 
/=* 使 用 关键 帧 裁剪 黄色 边框 线 的 矩形 * / 
@keyframes myClip { 0O%, 100% { clip: rect(0px，220px，220px，217px); } 
25% {clip: rect(Opx, 220px, 3px, Opx); } 50% { clip: rect(Opx, 3px, 220px, Opx); } 
75% {clip: rect(217px, 220px, 220px, Opx); } } 
img { width: 200px; height: 200px; border - radius: 5px; } 
</style></head> 
<body >< div class = "myBox" align = "center"> 
<div class= "myImage">< img src = "img/B328. jpg"></div></div></body></html> 





上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 百 - oo x 
分 代码 中 ,box-sizing: border-box 用 于 控制 边框 盒 。 在 口 myHtemlB328 html 其 





CSS3 中 ,box-sizing 属性 允许 以 特定 的 方式 定义 匹配 某 c 
个 区 域 的 特定 元 素 。 例 如 需要 并 排放 置 两 个 带 边框 的 
框 ,可 将 box-sizing 设置 为 border-box, 这 样 可 使 浏览 器 
呈现 出 带 有 指定 宽度 和 高 度 的 框 ,并 把 边框 和 内 边 距 放 
入 框 中 。box-sizing 属性 主要 支持 下 列 两 个 属性 值 。 

(1) content-box: 该 属性 值 表示 宽度 和 高 度 分 别 应 
用 到 元 素 的 内 容 框 ,在 宽度 和 高 度 之 外 绘制 元 素 的 内 边 
距 和 边框 。 

(2) border-box: 该 属性 值 表示 为 元 素 设 定 的 宽度 
和 高 度 决定 了 元 素 的 边框 指定 的 
任何 内 边 距 和 边框 都 将 在 已 设 定 的 宽度 和 高 度 内 进行 
绘制 。 通 过 从 已 设 定 的 宽度 和 高 度 分 别 减 去 边框 和 内 国 
边 距 才能 得 到 内 容 的 宽度 和 高 度 

clip 属性 用 于 剪裁 绝对 定位 元 素 。 也 就 是 说 , 当 一 幅 图 像 的 尺寸 大 于 包含 它 的 元 素 时 会 发 生 什么 
呢 ? clip 属性 允许 规定 一 个 元 素 的 可 见 尺 寸 , 这 样 此 元 素 就 会 被 修剪 并 显示 为 这 个 形状 。 对 于 一 个 绝 
对 定义 元 素 ,在 这 个 矩形 内 的 内 容 才 可 见 。 出 了 这 个 剪裁 区 域 的 内 容 会 根据 overflow 的 值 来 处 理 。 
剪裁 区 域 可 能 比 元 素 的 内 容 区 大 ,也 可 能 比 内 容 区 小 。 在 此 实例 中 ,clip: rect(0px，220px，3px， 
0px) 中 的 各 参数 值 对 应 的 方位 是 rect (top, right，bottom，left) 。 

-webkit-animation: myClip 2s infinite linear 表示 在 两 秒 内 以 线性 方式 完成 关键 帧 动画 myClip 
的 裁剪 动作 , 且 永 不 结束 

此 实例 的 源 文件 名 是 myHtmlB328. html 


320 ”使 用 关键 帧 动画 实现 凸轮 滑动 闪烁 特效 


此 实例 主要 通过 关键 帧 动画 控制 text-shadow 属性 产生 的 阴影 特效 实现 文字 闪烁 时 产生 类 似 于 
凸轮 滑动 轨迹 (如 蒸汽 火车 的 火车 轮子 连 杆 ) 的 动态 效果 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 
时 ,“ 炫 酷 实 例 集锦 ”将 根据 关键 帧 所 设置 的 阴影 特效 轮番 内 烁 ,如 图 320-1 所 示 。 有 关 此 实例 的 主要 
代码 如 下 。 
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图 320-1 


<!doctype html >< html >< head > < meta charset = "UTF - 8"> 
< style type = "text/css"> 


p { text - shadow: 2px 2px cyan;font — size:50px; 
— webkit ~ animation: myBlink 0.5s infinite; } 


@ - webkit - keyframes myBlink { 0%, 100% { text - shadow: 2px 2px cyan, 3px 3px cyan; } 
25% { text— shadow: 2px — 2px lightgreen, 3px - 3px lightgreen; } 
50% { text— shadow: 一 2px — 2px blue，-3px -3px blue; } 

75% { text— shadow: — 2px 2px yellow，- 3px 3px yellow; } } 
</style></head> 


<body>< div align = "center"><p> 炫 酷 实例 集锦 </p></div></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , “text-shadow: 
3px 一 3px blue” 对 应 的 是 “text-shadow :水 平 阴影 的 位 置 
的 位 置 垂直 阴影 


2px 一 2px blue， 
置 垂直 阴影 的 位 置 阴影 的 颜色 ,水平 阴 影 
的 位 置 阴影 的 颜色 ”; -webkit-animation: myBlink 0. 5s infinite 表示 在 500 毫秒 内 
以 默认 方式 完成 关键 帧 动画 myBlink 中 预 置 的 设置 阴影 颜色 和 位 


7 置 的 变化 动作 , 且 永 不 结束 。 
此 实例 的 源 文件 名 是 myHtmlB329. html 


321 ”使 用 关键 帧 动画 模拟 立方 体 的 3D 旋转 特效 





此 实例 主要 通过 设置 -webkit-perspective、-webkit-transform-origin、-webkit-transform-style 等 





z 方 体 的 3D 旋转 特效 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,立方 体 将 在 当前 空间 
中 不 断 变 换 角 度 和 颜色 显示 , 且 永 不 停 软 .效果 如 图 321-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<style type= "text/css"> 
body { background: #1A1A1A; — webkit - perspective: 600px; } 
.myBox { width: 150px; height: 150px;position: relative; top: 60px; left: 50%; 
margin - left: —75px; - webkit ~ transform- style: preserve— 3d; 
— webkit - transform: rotateY(0deg) translateZ( — 200px); 
一 webk 让 一 animation: myRotate 5s linear infinite; } 
.myFace { width: 150px; height: 150px;position: absolute; opacity: 0.45; 
background: 井 FF033E; — webkit- transform— origin: 50% 50%; 
border: lpx solid white; } 
.myFace — front { 一 webk 让 一 transform: translateZ(75px); 
一 webkit -animation: changeColor 5s linear infinite;} 
.myFace - left { - webkit ~ transform: rotateY(90deg) translateZz(75px); 
— webkit - animation: changeColor 5s linear infinite;} 
.myFace — back { — webkit— transform: translateZ( — 75px); 
— webkit ~ animation: changeColor 5s linear infinite;} 
.myFace — right { - webkit — transform: rotateY(90deg) translateZ( - 75px); 
— webkit ~ animation: changeColor 5s linear infinite;} 
.myFace - top { - webkit - transform: rotatex(90deg) translateZ( - 75px); 
— webkit — animat ion: changeColor 5s linear infinite;} 
.myFace - bottom { — webkit- transform: rotateX(90deg) translateZ(75px); 
— webkit ~ animation: changeColor 5s linear infinite;} 
/* 设 置 立方 体 的 旋转 关键 帧 * / 
@ - webk 让 一 keyframes myRotate { 
0% { —webkit— transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) ;} 
100% { - webkit— transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg)}} 
/* 设 置 立方 体 每 面 的 颜色 变化 关键 帧 * / 
@ - webk 让 一 keyframes changeColor { 0%, 100% { background: cyan; } 
25% { background: darkgreen; } 50% { background: red; } } 
</style></head> 
<body>< div class = "myBox"> 
<div class= "myFace myFace— front"></div>< div class = "myFace myFace — left"></div> 
<div class= "myFace myFace— back"></div><div class = "myFace myFace — right"></div> 
<div class = "myFace myFace— top"></div><div class = "myFace myFace - bottom"> </div > </div ></body > 
</html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,-webkit-perspective: 600px 定义 立 
方 体 和 视图 的 距离 是 600px, perspective 属性 通常 与 perspective-origin 属性 同时 使 用 ; -webkit- 
transform-origin: 50% 50% 用 于 定义 立方 体 的 每 个 面 在 X 轴 和 YY 轴 的 位 置 都 是 50%; -webkit- 
transform-style: preserve-3d 表示 子 元 素 ( 立 方 体 的 每 个 面 ) 将 保留 其 3D 位 置 ; -webkit-transform: 
rotateY(90deg) translateZ(75px) 表 示 立 方 体 的 左面 沿 Y 轴 旋 转 90°, 沿 Z 轴 平 移 75px; -webkit- 
animation: myRotate 5s linear infinite 表示 在 5 秒 内 以 线性 方式 完成 myRotate 所 指定 的 旋转 动作 ， 
且 永 不 停歇 。 

此 实例 的 源 文件 名 是 myHtmlB330. html。 


322 ”使 用 关键 帧 动画 模拟 多 个 立方 体 的 旋转 


此 实例 主要 通过 设置 perspective、transform-style 等 属性 模拟 多 个 立方 体 沿 着 螺旋 路 径 旋转 的 
特效 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 .12 个 立方 体 ( 金 条 ) 将 环绕 螺旋 线 旋 转 , 且 永 不 
停 软 ,如 图 322-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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<! doctype html >< html >< head >< meta charset = "UTF - 8"> 
< script src s/jquery -3.1.1.min. js"></script>< script type 
$ (function() { 
for (var a= 1; a<=12; a++) {// 添 加 12 根 金条 
$ (".myBox").append("<div class = 'myCuboid'></div >"); 
for (var b=1; b<=6; br+){ 
$ (".myBox .myCuboid").append("<div class ='front'></div><div class='left'> </div>< div class= 
'back'></div><div class='right'></div ><div class ='top'></div> <div class='bottom'></div >"); 
}1} 
for (var i=1; i<=12; i++) {// 设 置 每 根 金条 的 动画 参数 
$ (".myCuboid:nth— child("+ i+")").css(" — webkit- animation ~ delay"”, — (1.9-0.1x(i-1))+"s"); 
for (var j=1; j<=4; j++) { 
$ (".myCuboid:nth— child(" +i+") div:nth— child("+j+")").css("— webkit — animation - delay", 
—(3.4-0.1x*(i—1)) +0.5x(j—-1)+"s"); 
}1}); 
</script > 
<style type= "text/css"> 
body{ background - color: black; } 
/* 设 置 盒子 的 基本 样式 * / 
.myBox { position: relative; top: 90px;left:50px; margin: 0 auto; 
width: 300px; perspective: 400px; transform— style: preserve— 3d; } 
/* 设 置 金条 的 基本 样式 * / 
. myCuboid { position: relative; height: 20px; width: 200px; 
padding - bottom: 10px; transform - style: preserve— 3d; 





— webkit - animation: myRotate 2s infinite linear; } 

.myCuboid div { position: absolute;background - color: # 8A5BOF; 
backface — visibility: hidden; } 

/* 设 置 金 条 前 面 左面、 后面 .右面 的 颜色 动画 * / 

.myCuboid .front, .myCuboid .left, .myCuboid .back, .myCuboid . right { 


animation: myColor 1s infinite linear alternate; } 
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/* 设 置 金 条 前 面 、 后 面 的 尺寸 * / 

.myCuboid .front, .myCuboid . back { height: 20px; width: 200px; } 

/* 设 置 金条 下 面 、 上 面 的 尺寸 x*/ 

.myCuboid .bottom, .myCuboid .top { height: 20px; width: 200px; } 

/* 设 置 金条 左面 .右面 的 尺寸 x*/ 

.myCuboid .left, .myCuboid .right { height: 20px; width: 20px; } 

/x* 设 置 金条 前 面 的 平移 尺寸 */ 

. myCuboid .front { transform: translateZ(10px); } 

/* 设 置 金条 后 面 的 旋转 角度 和 平移 尺寸 * / 

.myCuboid .back { transform: rotateY(180deg) translateZ(10px); } 

/* 设 置 金条 上 面 的 旋转 角度 和 平移 尺寸 * / 

.myCuboid .top { transform: rotateX(90deg) translateZ(10px); 
background - color: #F0C175; } 

/* 设 置 金条 下 面 的 旋转 角度 和 平移 尺寸 * / 

. myCuboid .bottom { transform: rotateX( - 90deg) translateZ(10px); } 


/* 设 置 金条 左面 的 旋转 角度 和 平移 尺寸 * / 
.myCuboid .left { transform: rotateY( - 90deg) translateZ(10px); } 


/* 设 置 金条 右面 的 旋转 角度 和 平移 尺寸 * / 
. myCuboid .right { transform: rotateY(90deg) translateZ(190px); } 
/* 设 置 金条 旋转 动画 的 关键 帧 * / 
@keyframes myRotate { from { transform: rotateY(0deg); } 
to { transform: rotateY(360deg); } } 
/* 设置 金条 颜色 动画 的 关键 帧 * / 
@keyframes myColor { from { background— color: red; } 
to { background - color: yellow; } } 
</style></head> 
<body>< div class ='myBox'></div></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,perspective: 400px 用 于 定义 立方 体 
(金条 ) 与 视图 的 距离 为 400px; transform-style: preserve-3d 表示 子 元 素 将 保留 其 3D 位 置 ; 
transform: rotateY( 一 90deg) translateZ(10px) 表 示 立 方 体 沿 Y 轴 道 时 针 旋 转 90", 沿 Z 轴 平 移 
10px; -webkit-animation: myRotate 2s infinite linear 表示 在 两 秒 内 以 线性 方式 完成 myRotate 所 指 
定 的 旋转 动作 , 且 永 不 停 软 ; animation: myColor 1s infinite linear alternate 表示 在 1 秒 内 以 线性 方 
式 完成 myColor 所 指定 的 颜色 变化 动作 , 且 轮 流 交 替 进 行 , 永 不 停歇 。 

此 实例 的 源 文件 名 是 myHtmlB331. html。 


323 ”使 用 关键 帧 动画 模拟 小 圆 点 加 载 的 状态 


此 实例 主要 在 关键 帧 动画 中 使 用 scale( ) 方 法 缩放 小 圆 点 ,从 而 模拟 Windows 10 操作 系统 启动 

时 大 小 变化 的 小 圆 点 加 载 进度 状态 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,大 小 变化 的 小 圆 

点 将 以 顺 时 针 方向 转圈 形式 指示 加 载 进度 状态 ,效果 如 图 323-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
百 - 5 x 
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<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<script src= "js/jquery - 3.1.1.min. js"></script >< script type = "text/javascript"> 
$ (function(){ 
for(var i=1;i<=4;i++){ 
for(var j=1;j<=4;j++){ $(".myBox" +i+" .circle" +j+"").css("animation— delay"，(( 一 1.2+ 
Oe 
a 
</script> 
<style type= "text/css"> 
/* 设 置 转圈 的 样式 * / 
.myContainer { margin: 30px auto; width: 20px; height: 20px; position: relative; } 
/* 设 置 小 圆 点 的 样式 * / 
.myBoxl > div, .myBox2> div, .myBox3> div { width: 6px; height: 6px; 
background - color: red; border - radius: 100% ; position: absolute; 
animation: myScale 1.2s infinite ease ~ in~ out; } 
.myContainer .myContainer ~ myBox { position: absolute; 
width: 100 %; height: 100%; } 
.myBox2 { transform: rotateZ(45deg); } 
.myBox3 { transform: rotateZ(90deg); } 
.circlel { top: 0;left: 0; } /* 在 左上 角 显 示 */ 
.circle2 { top: 0; right: 0; } /* 在 右上 角 显 示 */ 
.circle3 { right: 0; bottom: 0;} /* 在 右 下 角 显 示 * / 
.circle4 { left: 0; bottom: 0;} /x* 在 左下 角 显 示 * / 
@keyframes myScale { 0%, 80%, 100% { transform: scale(0.0) } /* 小 圆 点 消失 * / 
40% { transform: scale(1.0) } /x* 小 圆 点 出 现 */} 
</style></head> 
<body>< div class = "myContainer"> 
<div class = "myContainer — myBox myBoxl"> 
<div class= "circlel"></div><div class = "circle2"></div> 
<divclass= "circle3"></div><div class= "circle4"></div></div> 
<div class = "myContainer — myBox myBox2"> 
<divclass="circlel"></div><div class = "circle2"></div> 
<div class= "circle3"></div><div class = "circle4"></div ></div> 
<div class = "myContainer — myBox myBox3"> 
<div class= "circlel"></div><div class = "circle2"></div> 
<div class= "circle3"></div><div class= "circle4"></div></div></div> 
</body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,transform: scale(0. 0) 表 示 将 小 圆 点 
(6,6) 缩 小 至 0, 即 消失 ,transform: scale(1.0) 表 示 将 小 圆 点 (6,6) 缩 放 至 原始 大 小 , 即 显示 ; 
animation-delay 属性 定义 动画 执行 前 等 待 的 时 间 . 以 秒 或 毫秒 计 , 且 允许 为 负 值 ,一 2s 表示 动画 马上 
开始 ,但 跳 过 两 秒 进入 动画 ; animation: myScale 1. 2s infinite ease-in-out 表示 在 1200 上 毫秒 内 以 ease- 
in-out 方式 完成 关键 帧 动画 myScale 的 缩放 动作 , 且 永 不 结束 。 

此 实例 的 源 文 件 名 是 myHtmlB336. html。 


324 ”使 用 关键 帧 动画 实现 以 多 色 圆 环 模拟 加 载 进度 


此 实例 主要 在 关键 帧 动画 中 重 置 模糊 圆 的 位 置 , 从 而 实现 以 转圈 的 多 色 圆 环 模拟 加 载 进度 状态 
的 效果 。 当 在 Google Chrome 浏 览 器 中 显示 该 页 面 时 , 红 \ 蓝 、 黄 、 绿 等 色 将 在 圆 环 上 以 顺 时 针 方 向 转 
圈 形 式 指示 加 载 进度 状态 ,效果 如 图 324-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 324-1 


<!doctype html >< html >< head > < meta charset = "UTF - 8"> 
<style type= "text/css"> 
body { background— color: gray;} 
/* 设 置 外 圆 样 式 */ 
body> div { position: relative; background — color: darkgrey; width: 200px; 
height: 200px; border - radius: 100% ; overflow: hidden; margin: 20px auto; } 
/* 设 置 内 圆 样式 */ 
/* 父 元 素 (body) 的 第 2 个 子 元 素 (div) * / 
body> div:nth - child(2) { width: 160px; height: 160px; top: — 200px; 
line - height: 160px; text— align: center;background- color: pink; } 
/* 设置 模糊 圆 的 样式 * / 
body> div div { width: 155px; height: 155px;border — radius: 100%; 
— webkit ~ filter: blur(20px) ;position: absolute; } 
/* 父 元 素 (div) 的 第 1 个 子 元 素 (div) * / 
body> div div:nth- child(1) { background ~ color: red; 
— webkit — animation: myMove 4s infinite linear; — webkit - animation— 
delay: 4.8s; } 
/* 父 元 素 (div) 的 第 2 个子 元 素 (div) * / 
body> div div:nth- child(2) {background— color: green; 
— webkit ~- animation: myMove 3s infinite linear; } 
/* 父 元 素 (div) 的 第 3 个 子 元 素 (div) * / 
body> div div:nth- child(3) { background - color: blue; 
一 webk 让 一 animation: myMove 6s infinite linear; — webkit ~- animation— 
delay: 3.2s;} 
/* 父 元 素 (div) 的 第 4 个 子 元 素 (div) * / 
body> div div:nth- child(4) { background - color: yellow; 
一 webk 让 一 animation: myMove 5s infinite linear; — webkit ~ animation 一 
delay: 1.6s; } 
@ - webkit — keyframes myMove { 
%, 100% {top: 0%; left: 0%; } 25% { top: 0%; left: 50%;} 
50% { top: 50% ;left: 50%; } 75% { top: 50% ;left: 0%;}} 
</style></head> 
<body><div><div></div><div></div><div></div><div></div></div> 
<div> 加 载 中 ,请 稍 候 . . .</div></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 .nth-child(n) 选 择 器 匹配 属于 其 父 元 
素 的 第 n 个 子 元 素 ,而 不 论 元 素 的 类 型 ,n 可 以 是 数字 、 关 键 字 或 公式 .例如 body > div:nth-child(2) 即 
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表示 body 中 的 第 2 个 div 元 素 ; -webkit-animation: myMove 4s infinite linear 表示 在 4 秒 内 以 linear 
方式 完成 关键 帧 动画 myMove 的 转圈 动作 , 且 永 不 结束 。 
此 实例 的 源 文件 名 是 myHtmlB337. html。 


325 ”使 用 关键 帧 动画 模拟 足球 射门 的 动作 变化 


此 实例 主要 通过 在 关键 帧 动画 中 同时 执行 旋转 、 平 移 、 缩 放 动作 模拟 足球 射门 的 变化 动作 。 当 在 
Google Chrome 浏览 器 中 显示 该 页 面 时 ,足球 在 射门 前 的 状态 如 图 325-1 的 左下 角 所 示 ,在 踢 球 后 , 足 
球 向 右上 和 角 的 球门 飞 去 时 将 发 生 旋 转 、 移 动 以 及 远 去 的 视觉 变化 。 有 关 此 实例 的 主要 代码 如 下 。 
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<!doctype html >< html >< head > < meta charset = "UTF - 8"> 
< style type = "text/css"> 
/* 设 置 草坪 的 样式 * / 
.myBox { width: 400px; height: 250px;background - image: url("img/B340. jpg"); 
background- size: 100% 100% ;border— radius: 5px;box— shadow: 2px 2px 5px gray; } 
/* 设 置 足球 的 基本 样式 */ 
.myBall { position: absolute; left: 15px; top: 170px; width: 60px; height: 60px; 
border - radius: 50 % ;background - repeat: no - repeat; 
background — image: url(img/B255. png); 
— webkit ~ animation: myRoll 5s ease— in ~ out infinite; 
background— size: 100% 100%;} 
/* 设 置 足球 射门 时 的 翻滚 旋转 动作 * / 
@ - webkit ~ keyframes myRoll { 
0%, 100% { — webkit — transform: translateX(0px) translateY(0px) rotateZz(0deg) scale(1); } 
99% { - webk 让 -transform: translateX(320px) translateY( - 165px) rotateZ(360deg) scale(0.3); } } 
</style></head> 
<body>< div class = "myBox">< div class= "myBall"></div></div></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , translateX (0px) 和 translateX 
(320px) 表 示 足 球 (div) 将 从 0px 位 置 沿 着 X 轴 平 移 到 320px 位 置 ; translateY (0px) 和 translateY 
(一 165px) 表 示 足 球 (div) 将 从 0px 位 置 沿 着 Y 轴 平 移 到 一 165px 位 置 , 即 从 左下 角 沿 对 角 线 移动 到 
右上 和 角 ; rotateZ(0deg) 和 rotateZ(360deg) 表 示 足 球 将 围绕 Z 轴 从 0 旋转 至 360", 即 一 圈 ; scale(0. 3) 
表示 在 足球 到 达 右 上 角 的 过 程 中 将 其 大 小 逐渐 缩小 到 原来 的 30%; myRoll 5s ease-in-out infinite 表 
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示 在 5 秒 内 完成 关键 帧 动画 myRoll 中 的 旋转 平移 ,缩放 动作 . 且 永 不 
此 实例 的 源 文件 名 是 myHtmlB340. html。 


326 ”使 用 关键 帧 动画 模拟 雷达 的 动态 扫描 效果 


此 实例 主要 通过 在 关键 帧 动画 中 执行 旋转 动作 模拟 雷达 扫描 的 动态 效果 。 当 在 Google Chrome 
浏览 器 中 显示 该 页 面 时 ,绿色 渐变 的 扫描 扇形 将 围绕 中 心 做 顺 时 针 的 旋转 动作 ,如 果 发 现 目标 , 则 会 
出 现 一 个 亮点 闪烁 提示 ,效果 如 图 326-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 
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图 326-1 


<! doctype html >< html >< head >< meta charset = "UTF - 8"> 
< style type= "text/css"> 
html, body { margin: 0; padding: 0; 
height: 100 % ; position: relative; overflow: hidden; } 

/* 设 置 盒子 的 基本 样式 * / 

#myBox { width: 100% ; height: 100%; 
border — radius: 50% 50% 0 0; position: relative; } 

/* 设 置 嵌 套 圆 环 的 基本 样式 * / 

.myCircle { position: absolute;left: 0; right: 0; top: 0; bottom: 0; 

margin: auto; width: 300px; height: 300px; border - radius: 50%; background: - webkit — 
repeating - radial - gradient(lightgreen 3%, black 5%, black 25% ); } 

/* 设 置 水 平 坐标 线 * / 

.myHorizontal { position: absolute;top: 149px; height: 2px; width: 100%; 

background: #00A638; } 

/* 设 置 垂直 坐标 线 */ 

.myVertical { position: absolute; left: 149px; width: 2px; 

height: 100% ; background: #00A638 } 

/* 设 置 扫描 图 形 * / 

.myScan { width: 150px;height: 150px; background: linear - gradient(0deg，rgba(115，255，162，0.0)， 
rgba(0, 166, 56, 0.75)); border - radius: 100% 0 0 0; z- index: 999; - webkit - animation: 
myScan 4s linear infinite; border - right: 3px solid rgba(0, 255, 86, 0.5); - webkit — 
transform ~ origin: 150px 150px; } 

/* 设 置 闪烁 点 的 基本 样式 * / 
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.myDot { position: absolute; border - radius: 50% ; opacity: 0; 
top: 20px; left: 20px; width: 7px; height: 7px; 
box - shadow: 0 0 5px 3px lightgreen; background: #C3FFD3; } 
.myDotl { top: 75px; left: 75px; /* 设置 闪烁 点 1 的 坐标 和 闪烁 动画 */ 
— webkit — animation: myFlash 4s linear infinite 3.5s;} 
.myDot2 { top: 150px; left: 250px; /x 设置 内 烁 点 2 的 坐标 和 闪烁 动画 * / 
— webkit — animation: myFlash 4s linear infinite 1s; } 
.myDot3 { top: 250px; left: 250px; /* 设置 闪烁 点 3 的 坐标 和 闪烁 动画 * / 
— webkit ~ animation: myFlash 4s linear infinite 1.5s; } 
.myDot4 { top: 60px; left: 230px; /* 设置 闪烁 点 4 的 坐标 和 闪烁 动画 * / 
— webkit ~ animation: myFlash 4s linear infinite 0.5s; } 
/* 设 置 扫描 关键 帧 * / 
@ - webkit ~ keyframes myScan { 0% { - webkit- transform: rotateZ(0deg); } 
100% { -webkit— transform: rotateZz(360deg); } } 
/* 设 置 闪 烁 关键 帧 * / 
@ - webkit -keyframes myFlash { 0% { opacity: 0; } 
10% { opacity: 1; } 30% { opacity: 0; } } 
</style></head> 
<body><div id = "myBox"> <div class = "myCircle"> 
<div class 





myHorizontal"></div> < div class = "myVertical"></div> 
<div class= "myScan"></div><div class = "myDot myDot1"></div> 

<div class= "myDot myDot2"></div> <div class= "myDot myDot3"></div> 
<div class = "myDot myDot4"></div></div></div></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,rotateZ(0deg) 和 rotateZ(360deg) 表 
示 扫 描 扇形 将 围绕 Z 轴 从 0° 旋转 至 360”, 即 一 圈 ; opacity: 1 表示 完全 不 透明 ,opacity: 0 表示 从 
明 ; -webkit-animation: myScan 4s linear infinite 表示 在 4 秒 内 完成 关键 帧 动画 myScan 中 的 旋转 
作 , 且 永 不 停歇 。 

此 实例 的 源 文件 名 是 myHtmlB343. html 


327 ”使 用 关键 帧 动画 模拟 霓虹灯 文字 的 闪烁 


此 实例 主要 通过 在 关键 帧 动画 中 改变 text-shadow 属性 值 模拟 霓虹灯 文字 一 是 一 姬 的 闪烁 效果 。 
当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,“ 炫 酷 实 例 集锦 ”将 以 一 退 一 瞬 的 需 虹 灯 效 果 不 断 闪烁 ， 
如 图 327-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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<! doctype html >< html >< head >< meta charset = "UTF — 8"> 
< style type= "text/css"> 
body { background— color: black; } 
# myBox { width: 400px; margin: 50px auto; text ~ align: center; } 
a { font- size: 16px; text— decoration: none; color: white; font — size: 60px; 
/* 设置 关键 帧 动画 的 参数 */ 
— webkit — animation: myNeon 0.5s ease- in— out infinite alternate; } 
/* 设 置 关键 帧 的 霓 虹 效 果 * / 
@ - webkit — keyframes myNeon { 0% ,100%{ color:white; } 
40% { text— shadow: 0 0 10px #FFF, 0 0 20px #FFF, 0 0 30px #FFF, 0 0 40px #FF1177, 
0 0 70px ##FF1177,0 0 80px #FF1177, 0 0 100px #FF1177,0 0 150px #FF1177;} 
90% { text— shadow: 0 0 5px #FFF,0 0 10px #FFF, 0 0 15px #FFF,0 0 20px #FF1177, 
0 0 35px 间 FF1177,0 0 40px 间 FF1177, 0 0 50px 井 FF1177,0 0 75px #FF1177; } } 
</style></head> 
<body>< div id = "myBox" ><a> 炫 酷 实 例 集锦 </a></div></body></html > 





上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,text-shadow 属 WE 用 于 向 文本 添加 一 

逗号 分 隔 的 阴影 列表 ,每 
个 阴影 由 两 个 或 3 个 长 度 值 和 一 个 可 选 的 颜色 值 进行 规定 ,省 略 的 长 度 是 0; -webkit-animation: 
myNeon 0. 5s ease-in-out infinite alternate 表示 在 500 毫秒 内 以 ease-in-out 模式 完成 关键 帧 动画 
“ 字 阴 影 改变 动作 ,然后 交替 反 向 , 且 永 不 停 
此 实例 的 源 文件 名 是 myHtmlB344. html 


328 ”使 用 关键 帧 动画 实现 3D 效果 的 走马 灯 文 字 


此 实例 主要 在 关键 帧 动画 中 使 用 translateX() 方 法 平移 文字 ,从 而 实现 3D 效果 的 走马 灯 文 字 
动 播放 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 “CSS3 炫 酷 实例 集锦 ”将 以 3D 效果 滚动 播放 ， 
如 图 328-1 所 示 。 有 关上 例 的 主要 代码 如 下 





个 或 多 个 阴影 (text-shadow: h-shadow v-shadow blur color; ) ,i 





myNeon 中 的 文 





软 
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图 328-1 


<!doctype html ><html ><head>< meta charset = "UTF - 8"> 
<style type= "text/css"> 
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body { 


background: black; } 


/* 设 置 盒子 的 基本 样式 * / 
#myMarquee { margin - top: 7rem; font - size: 0; - webkit - perspective: 500px; 


font ~ family: "Microsoft YaHein ;text- align: center; } 


/* 设 置 背 景 的 基本 样式 * / 
#myMarquee div { display: inline - block; height: 12rem; width: 30rem; 


position: relative; } 


/* 设 置 左 背 景 * / 
#myMarquee div:first - of - type { background: red; color: white; 
一 webkit - transform - origin: top right; - webkit ~ transform: rotateY( - 40deg); } 
/* 设 置 右 背景 * / 
#myMarquee div:last- of - type { background: blue; color: snow; 
—webkit - transform - origin: top left; - webkit- transform: rotateY(45deg); } 
/* 设 置 文字 块 盒子 * / 
#myMarquee div { font - size: 8rem; overflow: hidden; } 
/* 设 置 文字 块 样式 * / 
#myMarquee div span { position: absolute; width: 400% ; line— height: 1.4; } 
/# 设 置 左边 的 文字 块 动画 * / 
#myMarquee div:first ~ of - type span { - webkit — transform: translateX(60ren); 


一 webkit- animation: myLeftcrawl 14s linear infinite; 
text - shadow: 14px Opx 14px black; } 


/* 设 置 右边 的 文字 块 动画 */ 
#myMarquee div:last — of - type span { - webkit - transform: translateX(30rem); 


— webkit ~ animation: myRightcrawl 14s linear infinite; } 


/* 设 置 左边 的 文字 块 动画 关键 帧 * / 

@ - webkit — keyframes myLeftcraw]l {to { —webkit— transform: translateX( - 100rem);}} 

/V* 设 置 右边 的 文字 块 动画 关键 帧 * / 

@ - webkit - keyframes myRightcrawl {to { - webkit- transform: translateX( - 130rem);}} 
</style></head> 


<body>< 


div id = "myMarquee"> 


<div>< span > CSS3 炫 酷 实 例 集 锦 </span></div> 
<div>< span> CSS3 炫 酷 实 例 集锦 </span ></div></div ></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,-webkit-perspective: 500px 用 于 定 
义 3D 元素 (myMarquee) 和 视图 的 距离 ,以 像素 计 . 当 为 元 素 定义 perspective 属性 时 其 子 元 素 会 获得 


透视 效果 ,而 


不 是 元 素 本 身 ; -webkit-transform-origin: top left 用 于 设置 被 转换 元 素 (# myMarquee 


div:last-of-type) 的 位 置 ; -webkit-transform: rotateY (45deg) 定 义 沿 着 Y 轴 顺 时 针 旋 转 45"; 
-webkit-transform: translateX (60rem) 表示 文字 块 沿 着 X 轴 的 平移 尺寸 ; -webkit-animation: 


myLeftcrawl 


走马 灯 动 作 ， 


14s linear infinite 表示 在 14 秒 内 以 linear 模式 完成 关键 帧 动画 myLeftcrawl 中 的 文字 
且 永 不 停歇 。 


此 实例 的 源 文 件 名 是 myHtmlB345. html。 


329 ”使 用 关键 帧 动画 模拟 阴影 跟随 灯光 移动 
此 实例 主要 在 关键 帧 动画 中 同步 改变 灯光 的 left 属性 和 文字 阴影 的 水 平 阴影 的 位 置 ,从 而 实现 





文字 阴影 跟随 灯光 移动 的 效果 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,白色 的 灯光 将 在 文字 


的 左 ` 右 两 端 
如 下 。 


来 回 移动 ,文字 阴影 也 跟随 灯光 的 移动 而 移动 ,如 图 329-1 所 示 。 有 关 此 实例 的 主要 代码 
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图 329-1 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<style type= "text/css"> 

/* 设 置 背 景 颜色 * / 

body { background: darkgray; } 

/* 设 置 盒子 的 基本 样式 * / 

.myBox{ position: relative;width:400px; margin: 0 auto; } 

/* 设 置 文字 的 基本 样式 * / 

p { margin: 0; padding: 0;font— size: 42px; position: absolute; 

top: 60px; left: 20px; color: red; font - weight: bold;z ~ index: 1; 
animation: myShadow 5. 0s ease— in- out infinite; } 

/* 设 置 灯光 的 基本 样式 * / 

.myLight {z- index: 2; opacity: 0.8; position: absolute; top: 35px; left: 50px; width: 100px; height: 
100px; border - radius: 100px; z- index: 0;background: - webkit - radial - gradient(center, 
ellipse cover, #FFF 0%, rgba(255, 255, 255, 0.2) 100% );box - shadow: Opx 0px 50px # FFF; 
animation: myLamp 5.0s ease— in— out infinite; } 

/* 设 置 灯光 关键 帧 样式 * / 

@ - webkit -keyframes myLamp{0% { left: 15px; } 

50% { left: 270px;} 100% { left: 15px; } } 
/* 设 置 文字 阴影 关键 帧 样式 * / 
@ - webkit - keyframes myShadow { 0% { text— shadow: — 9px lpx 4px #000; } 
50% { text— shadow: 9px lpx 4px #000; }100% { text— shadow: — 9px 1px 4px #000; } } 
</style></head> 
<body>< div class = "myBox"><p> CSS3 炫 酷 实 例 集锦 </p> 
<divclass= "myLight"></div></div></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 .text-shadow 属性 用 于 向 文本 添加 一 
个 或 多 个 阴影 ,其 语法 格式 如 下 。 


text - shadow: h— shadow v- shadow blur color 


其 中 ,参数 h-shadow 表示 水 平 阴影 的 位 置 ,允许 为 负 值 ; 参数 v-shadow 表示 垂直 阴影 的 位 置 , 允 
许 为 负 值 ; 参数 blur 表示 模糊 的 距离 ; 参数 color 表示 阴影 的 颜色 。 在 此 实例 中 主要 是 在 关键 帧 动 
画 中 改变 文字 阴影 的 h-shadow 值 来 同步 与 灯光 的 left 值 。 

animation: myShadow 5. 0s ease-in-out infinite 表示 在 5 秒 内 以 ease-in-out 模式 完成 关键 帧 动 
画 myShadow 中 的 改变 文字 阴影 的 h-shadow 值 的 动作 , 且 永 不 停 吹 。animation: myLamp 5. 0s 
ease-in-out infinite 表示 在 5 秒 内 以 ease-in-out 模式 完成 关键 帧 动画 myLamp 中 的 改变 灯光 的 left 
值 的 动作 , 且 永 不 停 欣 。 

此 实例 的 源 文件 名 是 myHtmlB350. html。 
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330 ”使 用 关键 帧 动画 模拟 多 层 波浪 波动 的 效果 


此 实例 主要 在 关键 帧 动画 中 不 停 地 旋转 两 个 圆 角 甜 形 ,从 而 实现 通过 两 个 矩形 的 圆 角 产生 类 似 
于 波浪 波动 的 效果 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,两 个 圆 角 和 矩形 将 不 停 地 旋转 (大 部 
分 被 隐藏 ) ,露出 的 圆 角 部 分 像 波浪 一 样 波动 ,如 图 330-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 330-1 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<style type= "text/css"> 

/* 设 置 盒子 的 基本 样式 * / 

.myBox { margin:3px auto; position: relative; width: 400px;height: 300px; 
/* 注释 下 面 这 行 代码 即 可 看 到 整个 圆 角 矩 形 的 旋转 效果 * / 
overflow: hidden;transform: rotateZ(180deg); } 

/* 设 置 产生 波浪 的 圆 角 和 矩形 的 基本 样式 */ 

.myWave { opacity: 0.4; position: absolute; top: 3%;left: 50% ;width: 500px; 
height: 500px; margin - left: ~ 250px; margin ~ top: ~ 250px; 

— webkit ~ transform— origin: 50% 48%; border— radius: 41%;} 

.myWave. green { background:green; /* 设置 绿色 波浪 的 动画 参数 * / 

— webkit -animation: myRotate 2.9s infinite linear; } 

.myWave. cyan { background:cyan; /* 设置 青色 波浪 的 动画 参数 * / 

—webkit ~ animation: myRotate 4.3s infinite linear; } 

/* 设 置 波浪 的 关键 帧 参数 * / 

@ - webkit - keyframes myRotate { from { - webkit- transform: rotate(360deg); } } 

/* 设 置 提示 文本 的 基本 样式 * / 

.myTitle { position: absolute; left: 0; top: 0; width: 100% ; z ~ index: 1; 
line - height: 150px; text ~ align: center; font- size: 40px; 
transform: rotateZ( - 180deg); } 

</style></head> 
<body><div class ='myBox' id= "myBox" > 
<div class = 'myWave green' ></div ><div class = 'myWave cyan' ></div> 
<div class = 'myTitle' > CSS3 精彩 实例 集锦 </div></div></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,border-radius: 41% 用 于 设 园 矩形 的 
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圆 角 半径 , 它 是 此 实例 的 关键 ,可 以 根据 矩形 的 大 小 进行 适当 调整 ; -webkit-transform: rotate 
(360deg) 表 示 将 圆 角 和 矩形 旋转 360”; -webkit-animation: myRotate 4. 3s infinite linear 表示 在 4300 
毫秒 内 完成 关键 帧 动画 myRotate 中 设置 的 将 圆 角 矩形 旋转 一 周 的 动作 .并且 一 直 旋 转 。 注 意 ,两 个 
动画 的 时 间 参 数 不 能 设置 成 完全 相同 ,否则 就 不 会 产生 一 波 一 波 的 效果 。 

此 实例 的 源 文 件 名 是 myHtmlB351. html。 


331 ”使 用 关键 帧 动画 模拟 生物 在 水 中 的 摆动 


此 实例 主要 通过 在 关键 帧 动画 中 使 用 translate3d() 和 rotate3d() 等 方法 模拟 鱼 等 海洋 生物 在 水 
中 游 动 时 使 劲 摆 动身 子 的 特效 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,类 似 鱼 的 海洋 生物 将 
使 劲 地 摆动 身子 ,如 图 331-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 331-1 


<! doctype html >< html >< head ><meta charset = "UTF - 8"> 
< script src= "js/jquery -3.1.1.min.js"></script >< script type= "text/javascript"> 
$ (function() { 
function insertRule( sheet, selectorText, cssText, position) { 
if (sheet. insertRule) { 
sheet. insertRule( selectorText + "{" + cssText + "}", position); 
} else if (sheet.addRule) { 
sheet. addRule( selectorText, cssText, position); 
ok 
for (var i=1; i<=635; i++) { 
$ (".myBox").append("< span class= 'myImg'></span>"); 
// 设 置 背景 图 像 的 位 置 
$(".myBox .myImg:nth— child(" +i+")").css("background - position", (—2xi)+"px 0"); 
// 设 置 3D 位 移 和 旋转 的 初始 值 
$ (".myBox .myImg:nth— child(" +i+")").css("transform", "translate3d( - 50%, — 40%,0) rotate3d 
(0,1,0,"+ (360/800 * i) + "deg) translate3d(200px,0,0) rotate3d(0, - 1,0,"+ (360/800* i) + "deg"); 
// 设 置 关键 帧 
insertRule ( document. styleSheets[0], "@ - webkit - keyframes ani - " + i, "50% {transform: 
translate3d( - 50%, — 60%,0) rotate3d(0, 1,0," + (360/800 * i) + "deg) translate3d (180px, 0, 0px) 
rotate3d(0, —1,0,"+ (360/800 * i) + "deg);}", 0); 
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// 设 置 动画 参数 
$ (".myBox .myImg:nth— child(" +i+")").css("animation", "ani— "+i+"1sease-in-out "+(-1/ 
200* i) + "s infinite"); 
} 7); 
</script> 
<style type= "text/css"> 
/* 设 置 盒子 的 基本 样式 * / 
-myBox { transform - style: preserve— 3d; 
position: absolute; left: 45% ; top: 45%; 
transform: translate3d( ~- 50%, -50%, 0) rotate3d(1, 0, 0, 5deg); } 
/* 设 置 图 像框 的 基本 样式 * / 
.myImg { width: Spx; height: 250px; position: absolute; 
background: url(img/B357B. png) no - repeat; } 
</style></head> 
<body>< div class = "myBox"></div> 
</body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,translate3d() 用 于 使 一 个 元 素 在 三 维 
空间 中 移动 ,这 种 变形 的 特点 是 使 用 三 维 向 量 的 坐标 定义 元 素 在 每 个 方向 上 移动 多 少 , 其 基本 语法 
如 下 。 


translate3d(tx, ty, tz) 


其 中 ,参数 tx 代表 横向 坐标 位 移 向 量 的 长 度 ; 参数 ty 代表 纵向 坐标 位 移 向 量 的 长 度 ; 参数 tz 代 
表 Z 轴 位 移 向 量 的 长 度 。 

rotate3d() 方 法 用 于 在 3D 空间 中 旋转 ,有 3 个 维度 来 描述 一 个 转动 轴 , 轴 的 旋转 是 一 个 [x,y,z] 
向 量 并 经 过 元 素 原 点 ,其 基本 语法 如 下 。 


rotate3d(x, y, 2,a) 


其 中 ,参数 x 是 一 个 0 到 1 的 数值 ,主要 用 来 描述 元 素 围绕 X 轴 旋 转 的 矢量 值 ; 参数 y 是 一 个 0 
到 ! 的 数值 ,主要 用 来 描述 元 素 围绕 Y 轴 旋转 的 矢量 值 ; 参数 z 是 一 个 0 到 1 的 数值 ,主要 用 来 描述 
元 素 围绕 Z 轴 旋 转 的 矢量 值 ; 参数 a 是 一 个 角度 值 ,主要 用 来 指定 元 素 在 3D 空间 中 旋转 的 角度 ,如 
果 其 值 为 正 数 ,元 素 顺 时 针 旋 转 ,反之 元 素 逆 时 针 旋 转 。 

insertRule ( document. styleSheets [0]," @-webkit-keyframes ani-" + i, " 50% {transform: 
translate3d(—50%,—60% .0) rotate3d(0.1.0,"+(360/800 x*i)++ "deg) translate3d(180px,0,0px) 
rotate3d(0, 一 1,0," 十 (360/800 站 十 "deg) ;)", 0) 用 于 设置 旋转 和 位 移 的 关键 帧 。 








$(". myBox .mylImg:nth-child( "二 i 二 ")"). css("animation", "ani-" 二 i 十 " 1s ease-in-out "十 
(一 1/200*i 十 "s infinite") 表 示 在 1 秒 内 以 ease-in-out 模式 完成 指定 关键 帧 动画 中 的 位 移 和 旋转 动 
作 , 且 永 不 停歇 。 


此 实例 的 源 文 件 名 是 myHtmlB357. html。 


332 ”使 用 关键 帧 动画 模拟 碎片 拼接 图 像 特 效 


此 实例 主要 通过 在 关键 帧 动画 中 使 用 translate3d() 和 rotate() 等 方法 模拟 碎片 拼接 图 像 的 特效 。 
当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,可 以 看 到 多 个 碎片 在 不 停 地 旋转 和 移动 ,如 图 332-1 所 
示 , 然 后 逐渐 拼接 成 一 幅 图 像 , 单 击 * 以 碎片 拼接 方式 显示 图 像 "按钮 将 重新 演示 这 一 过 程 。 有 关 此 实 
例 的 主要 代码 如 下 。 
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<!doctype html >< html >< head >< meta charset = "UTF — 8"> 
<script src= "js/jquery -3.1.1.min. js"></script >< script type = "text/javascript"> 
$ (function() { 
clipPath( $ (" #myImage")[0]); 
$ ("#myBtnSplicing"). click(function() { // 以 碎片 拼接 方式 显示 图 像 
location. reload() 
D2}); 
function clipPath(t) { 
t. removeAttribute("id"); 
var r= {height: t.clientHeight, width: t.clientWidth, distance: 60, html: t.outerHTMD}; 
vara=r.distance, n=r.width, e=r. height; 
varo= "ni 
for (var i=0; i<n; i+=a){ 
for (var h=0; h<e; ht+=a) { 
var d= [i, h], u=[i, hta]l, 1=[ita, hta], v=[i+t+a, h]; 
var c= [i+a/2, h+a/2]; 
var m= [[d, c¢, v], [du c], [cuw 1], [v, c, 1]]; 
m. forEach(function(t, a) { 
var n=t.map(function(t) { 
return t. map(function(t) { 
return t+ "px" 
1).join(" ") }). join(); 
// 根 据 n 创建 路 径 ,把 图 像 按照 路 径 内 部 的 尺寸 进行 裁剪 形成 碎片 
var e="—webkit— clip— path: polygon(" +n+");"; 
var i= Math. random( ); 
var h=i<.5? -1:1; 
var d= [[h* (200 + Math. round(500 x i)), — 1* (500 + Math. round(300* i))], [hx* (100 + Math. round 
(500x i)), —1x(400+Math.round(600 *i))], [hx (50 +Math. round(500 x i)), — 1x (500+ Math. round(300 
¥i))], [hx (100+Math. round(400* i)), 1* (500 + Math. round(700 * i))]]; 
var u= [600* (0.5— Math. random()), 600* (0.5 — Math. random())]; 
var 1= "translate(" +u.map(function (t) { // 对 碎片 进行 旋转 和 平移 
return t+ "px”}). join() +") rotate("+ Math.round(hx 360* Math.random()) + "deg)"; 
var v="- webkit- transform:" + 1+";transform:" +1+";"; 
0o=0+r.html.replace('">', '" style="'+etvt+'">') 
D+}} 
t. parentNode. innerHTML = r.html + 0; 
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} 
</script > 
< style type= "text/css"> 
/* 控制 渐变 显示 图 像 */ 
.myBox .clip:not([style]) { - webkit - animation: fadeIn 1s 5s both; } 
/* 控制 拼接 显示 图 像 * / 
.myBox . clip[ style] { opacity: 0; - webkit - animation: myInitial 5s both; } 
/* 控制 拼接 显示 图 像 关键 帧 * / 
@ - webkit — keyframes myInitial { 
to { opacity: 1; - webkit - transform: translate3d(0, 0, 0) rotate(0deg); } } 
/* 控 制 渐变 显示 图 像 关键 帧 * / 
@ - webkit — keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } 
/* 设 置 图 像 的 基本 样式 */ 
.image { position: absolute; width:400px; height :250px; 
border - radius: 10px;box— shadow: 2px 2px 10px black; opacity: 0; } 
button { width: 405px; } 
</style></head> 
<body><p><button id= "myBtnSplicing"> 以 碎片 拼接 方式 显示 图 像 </button></p> 
<div class = "myBox"> 


< img id= "myImage" class = "image clip" src = "img/B358. jpg"/></div></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,translate3d() 方 法 表示 使 用 三 维 向 量 
的 坐标 定义 元 素 在 每 个 方向 上 移动 ; rotate() 方 法 用 于 根据 指定 的 角度 在 2D 内 旋转 ; polygon() 方 法 
用 于 定义 一 个 多 边 形 , 它 的 参数 是 一 组 坐标 对 (< shape-arg > < shape-arg >) ,每 一 个 坐标 对 代表 多 边 















形 的 一 个 顶点 坐标 ,浏览 器 会 将 最 后 一 个 顶点 和 第 一 个 顶点 -个 封闭 的 多 边 形 ,坐标 对 使 用 
逗号 进行 分 隔 , 可 以 使 用 绝对 单位 或 百分比 单位 值 ; -webkit-animation: mylnitial 5s both 表示 在 5 秒 


: 键 帧 动画 myInitial 中 的 位 移 和 旋转 
此 实例 的 源 文 件 名 是 myHtmlB358. html 


333 ”使 用 关键 帧 动画 模拟 地 球 在 太空 中 自转 


此 实例 主要 通过 在 关键 帧 动画 中 使 用 translateY() 和 rotateY() 等 方法 模拟 地 球 在 太空 中 自转 的 
特效 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,地 球 在 太空 中 自转 的 效果 如 图 333-1 所 示 。 有 
关 此 实例 的 主要 代码 如 下 


动作 





Y] myHtmlB364 html < 


© Dfiley//D/myWork/myHtm 








第 3 部 分 > 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<style type= "text/css"> 

body{ background:url("img/B364A. jpg"); }/ * 设置 太空 图 像 */ 

.myEarth{ margin:0 auto; width:200px; height:200px; 
/* 设置 世界 地 形 图 图 像 x* / 
background — image:url("img/B364B. jpg" ) ;background- position: Opx Opx; 
background — size:auto 100 % ; border — radius: 50%; 
/x* 设置 动画 参数 * / 
一 webkit- animation: myRotate 10s linear alternate infinite; 
/* 在 地 球 左边 显示 外 阴影 .右边 显示 内 阴影 * / 
box- shadow: — 8px 0 25px rgba( 256, 256, 256, 0.3), — lpx — 2px 14px rgba(256,256,256,0.5) 
inset; } 

/* 设 置 关键 帧 动画 的 参数 * / 

@ - webk 让 一 keyframes myRotate { 
0% {background — position - x:0px; - webkit - transform: translateY(20% ) rotateY(0deg);} 
25 % {background — position— x:300px; - webkit — transform: translateY(20% ) rotateY(20deg);} 
75 % {background — position— x:600px; - webkit — transform: translateY(20% ) rotateY( - 20deg);} 
100 % {background - position - x:100% ; - webkit — transform: translateY(20% ) rotateY(0deg);} } 

</style></head> 
<body>< div class = "myEarth"></div ></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,box-shadow: -8px 0 25px rgba(256， 
256,256,0.3), 一 ]px 一 2px 14px rgba(256,256,256,0.5) inset 中 的 inset 表示 内 置 阴影 , 即 阴影 产 
生 在 元 素 的 边框 内 部 (此 实例 即 左边 ), 默 认 情 况 下 阴影 产生 在 元 素 的 边框 外 部 (此 实例 即 右边 ); 
background-position-x 表示 背景 图 像 的 水 平 坐标 值 。translateY() 用 于 设置 元 素 在 Y 轴 上 平移 的 距 
离 ; rotateY() 用 于 设置 元 素 在 Y 轴 上 旋转 的 角度 ; -webkit-animation: myRotate 10s linear alternate 
infinite 表示 在 10 秒 内 以 线性 模式 完成 指定 关键 帧 动画 myRotate 中 的 位 移 和 旋转 动作 , 且 交 替 进 
行 , 永 不 停止 。 

此 实例 的 源 文件 名 是 myHtmlB364. html。 


334 ”使 用 关键 帧 动画 模拟 文字 弹跳 滑 人 页 面 


此 实例 主要 通过 在 关键 帧 动画 中 使 用 translate3d() 等 方法 模拟 文字 从 屏幕 之 外 弹跳 滑 人 页 面 的 
特效 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 , 单 击 "文字 从 左 侧 弹 跳 进入 页 面 "按钮 , 则 文字 将 
从 屏幕 左 侧 滑 和 页面 ,并 在 目标 位 置 显 示 类 似 于 篮球 触 地 的 弹跳 特效 ,如 图 334-1 所 示 ; 单 击 “文字 从 
右 侧 弹跳 进入 页 面 "按钮 , 则 文字 将 从 屏幕 右 侧 滑 和 页面. 并 在 目标 位 置 显 示 类 似 于 篮球 触 地 的 弹跳 
特效 。 有 关 此 实例 的 主要 代码 如 下 。 
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[文字 从 左 风 并 进入 页 面 | 。 | 文字 从 右 侧 泊 襄 进入 页 面 | 
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图 334-1 
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<!doctype html >< html >< head >< meta charset = "UTF — 8"> 
<script src= "js/jquery - 3.1.1.min. js"></script>< script type = "text/javascript"> 
$ (function() { 
$ ("#myBtnleft").click(function() { // 文 字 从 左 侧 弹 跳 进入 页 面 
$ ('#myBox'). removeClass() .addClass( 'myFromLeft animated') .one( 'webkitAnimationEnd', function() { 
$ (this). removeClass(); });}); 
$ ("#myBtnright"). click(function() { // 文 字 从 右 侧 弹跳 进入 页 面 
$ ('#myBox'). removeClass( ). addClass( 'myFromRight animated'). one( 'webkitAnimationEnd', function() { 
$ (this). removeClass(); });});}); 
</script > 
< style type= "text/css"> 
/* 设 置 动画 参数 */ 
.animated { - webkit - animation - duration: 1s; - webkit ~ animation— fill ~ mode: both; } 
/* 设置 左 侧 的 弹跳 动画 */ 
.myFromLeft { — webkit ~ animation - name: myFromLeft; } 
@ - webkit ~ keyframes myFromLeft { 
0%, 100%, 60%, 75%, 90% { - webkit - transition - timing - function: cubic - bezier 
{0:215r 0:61, 0-355, 1); } 
0% {opacity: 0; - webkit — transform: translate3d( - 3000px, 0, 0);} 
60% {opacity: 1; — webkit— transform: translate3d(25px, 0, 0);} 
75% { - webkit -transform: translate3d( - 10px, 0, 0);} 
90% { - webkit -transform: translate3d(5px, 0, 0);} 
100% {—webkit— transform: none;} } 
/* 设 置 右 侧 的 弹跳 动画 * / 
. myFromRight { — webkit - animation - name: myFromRight; } 
@ - webk 让 - keyframes myFromRight { 0%, 100%, 60%, 75%, 90% { — webkit ~ transition- timing— 
function: cubic - bezier(0.215, 0.61, 0.355, 1); } 
0% {opacity: 0; — webkit— transform: translate3d(3000px, 0, 0); } 
60% { opacity: 1; - webkit ~ transform: translate3d( - 25px, 0, 0);} 
75% { — webkit— transform: translate3d(10px, 0, 0); } 
90% { — webkit— transform: translate3d( — 5px, 0, 0); } 
100% { - webkit - transform: none; } } 
/* 设 置 文字 的 基本 样式 * / 
hl { background - image: - webkit — linear - gradient(92deg, green, red); 
— webkit ~ background — clip: text; — webkit— text ~ fill - color: transparent; 
font - size: 3rem; font — weight: bold; } 
#myBox { display: block; } /* 设置 盒子 的 显示 模式 * / 
button { margin: 10px; width: 180px;} 
</style></head> 
<body>< div align = "center"> 
<button id= "myBtnleft"> 文 字 从 左 侧 弹跳 进入 页 面 </button> 
<button id= "myBtnright"> 文 字 从 右 侧 弹跳 进入 页 面 </button > 
< span id= "myBox">< hl > CSS3 炫 酷 实 例 集锦 </hl ></span></div></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,-webkit-transform: translate3d 
(一 3000px，0, 0) 表 示 平 移动 作 定位 在 X 轴 的 负 方 向 的 3000px 位 置 点 ,这 个 位 置 点 通常 在 大 多 数 计算 
机 屏幕 之 外 的 左 侧 ; -webkit-animation-name: myFromLeft 表示 为 动画 指定 @keyframes 属性 指定 的 名 
称 ,在 使 用 这 一 属性 后 必须 规定 animation-duration 属性 ,否则 由 于 动画 的 时 长 为 0, 就 不 会 播放 动画 
了 ; $('#myBox'). removeClass(). addClass('myFromLeft animated'). one('webkitAnimationEnd ' ， 
function() { $ (this). removeClass(); )) 是 一 段 jQuery 代码 , 它 表示 首先 移 除 文字 盒子 的 所 有 CSS 
类 ,然后 添加 动画 类 myFromLeft 和 animated。 

此 实例 的 源 文 件 名 是 myHtmlB368. html。 
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335 ”通过 关键 帧 动画 使 字符 串 呈现 波浪 抖动 


此 实例 主要 在 关键 帧 动画 中 使 用 translateY() 方 法 改变 字符 在 Y 轴 上 的 位 置 ,从 而 使 字符 串 呈 
现 波 浪 式 抖动 的 特效 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,字符 串 呈 现 波浪 式 拌 动 的 效果 
如 图 335-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 335-1 


<! doctype html >< html >< head >< meta charset = "UTF - 8"> 
< script src= "js/jquery -3.1.1.min. js"></script>< script type = "text/javascript"> 
$ (function() { 
function wave() {// 拆 分 字符 串 并 设置 每 个 字符 的 样式 
var myString =$ (".myBook")[0]. textContent. trim( ); 
$ (".myBook")[0]. innerHTML = null; 
split myString( $ (".myBook"), myString); 
function split myString(element, myArray) { 
for (var i =0; i<myArray. length; i++) { element.append("< span>" + (myArray[i] ===" "? "gnbsp;" : 
myArray[i]) + "</span>"); } } 
for (var i=0; i<200; i++){ $ (".myBook :nth- child("+i+")").css("animation— delay", (~0.16+ 
0.016x* i)+"s"); }} 
wave( ); 
D); 
</script > 
<style type= "text/css"> 
/* 设 置 文本 的 基本 样式 * / 
.myBook span { font - size: 24px; font - weight: bold; display: inline - block; margin -top: 20px; letter 
~ spacing: 2px; color: darkgreen; animation: myWave 0.08s infinite alternate; } 
/* 设 置 动 画 的 关键 帧 参数 * / 
@keyframes myWave { from { transform: translateY(0); } 
to { transform: translateY(18px); } } 
</style></head> 


<body>< div align = "center">< div class = "myBook"> HTML5 + CSS3 炫 酷 实例 集锦 </div></div> 
</body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,. myBook :nth-child 中 的 myBook 
和 :nth-child 之 间 有 个 空格 , 且 必 须 存在 ,nth-child(n) 选 择 器 用 于 匹配 属于 其 父 元 素 的 第 n 个 子 元 
素 , 而 不 论 元 素 的 类 型 ,n 可 以 是 数字 、 关 键 字 或 公式 ; translateY() 方 法 用 于 根据 参数 指定 的 距离 在 
Y 轴 上 平移 元 素 ; animation: myWave 0. 08s infinite alternate 表示 在 80 毫秒 内 完成 myWave 关键 帧 
指定 的 Y 轴 平 移动 作 ,并 且 重 复 ,交替 进行 . 永 不 停止 。 

此 实例 的 源 文 件 名 是 myHtmlB372. html。 
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336 ”使 用 requestAnimFrame( ) 方 法 动态 绘制 火苗 


此 实例 主要 实现 了 使 用 requestAnimFrame() 方 法 创建 一 束 不 断 燃 烧 的 火苗 。 当 在 Google 
Chrome 浏览 器 中 显示 该 页 面 时 将 显示 一 东 不 断 燃 烧 的 火苗 ,如 图 336-1 所 示 。 有 关 此 实例 的 主要 代 
码 如 下 
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图 336-1 


<! doctype html >< html >< head >< meta charset = "UTF - 8"> 
< script src= "js/jquery - 3.1.1.min. js"></script>< script> 
$ (document). ready(function() { 
var mySurface = document. getElementById("mySurface"). getContext ("2d"); 
var myParticles =[]; // 设 置 帧 集合 myParticles 
var myCount = 150; // 任 意 改变 此 值 , 会 出 现 奇异 的 火苗 


for (var i=0; i<myCount; i++) { 








myParticles. push(new particle()); 
} 
var myWidth = 320;var myHeight = 480; // 设 置 画 布 的 大 小 
$ ("#mySurface").css( {width: myWidth, height: myHeight}); 
window. requestAnimFrame= (function() {  // 设 置 动画 帧 
return window. requestAnimationFrame || 
window. webkitRequestAnimationFrame | | 
window. mozRequestAnimationFrame | | 
function (callback) { // 定 义 每 秒 执行 60 次 动画 
window. setTimeout (callback, 1000/60); 
}; DD) (0); 
function particle() { 
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this. speed = {x: —1+Math.random() *2, y: —5+Math. random() * 5}; 
myWidth= ( document. getElementById("mySurface"). width); 
myHeight = (document. getElementById( "mySurface"). height); 
this. location = {x: myWidth/2, y: (myHeight/2) + 35}; 
this. radius = 0.5+ Math. random( ) * 1; 
this. life= 10 + Math. random( ) * 10; 
this. death= this. life; 
this.r= 255; 
this.g= Math. round( Math. random( ) * 155); 
this.b= 0; 
} 
function ParticleAnimation() { 
mySurface. globalCompositeOperat ion = "source — over"; 
mySurface. fillStyle = "black"; 
mySurface. fillRect(0, 0, myWidth, myHeight); 
mySurface. globalCompositeOperation = "lighter"; 
for (var i=0; i<myParticles. length; i++) { 
var myFrame = myParticles[ i]; 
mySurface. beginPath( ); 
myFrame. opacity = Math. round(myFrame. death/myFrame. life * 100)/100 
var gradient = mySurface. createRadialGradient (myFrame. location. x, 
myFrame. location. y,0, myFrame. location. x, 
myFrame. location. y, myFrame. radius); 
gradient. addColorStop(0, "rgba(" + myFrame.r+", "+myFrame.g+ 
", "+myFrame.b+", "+myFrame.opacity+")"); 
gradient. addColorStop(0.5, "rgba(" + myFrame.r +", "+myFrame.g+ 
", "+myFrame.b+", "+myFrame.opacity+")"); 
gradient. addColorStop(1, "rgba(" + myFrame.r+", "+myFrame.g+ 
", "+myFrane.b+", 0)"); 
mySurface. fillStyle = gradient; 
mySurface. arc(myFrame. location. x, myFrame. location.y, 
myFrame. radius, Math. PI * 2, false); 
mySurface. fill(); myFrame. death —— ; myFrame. radius++; 
myFrame. location. x += (myFrame. speed. x); 
myFrame. locat ion.y += (myFrame. speed. y); 
// 重 新 生成 myParticles 
if (myFrame. death< 0| |myFrame. radius <0) { 
myParticles[i] = new particle( ); 
EF 
// 通 过 window. requestanimFrame( ) 方 法 递归 调用 自身 
window. requestAnimFrame( ParticleAnimat ion); 
} 
ParticleAnimation( ); // 开 始 动画 
1D); 
</script ></head> 
<body>< div>< canvas id= "mySurface"></canvas></div></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , window. requestAnimFrame( ) 方 法 
是 HTML5 新 增 的 方法 ,该 方法 用 于 以 一 种 比 定 时 器 更 好 的 性 能 来 实现 动画 。 通 过 window. 
reqduestAnimFrame() 方 法 ,浏览 器 可 以 将 各 种 并 发 性 动画 结合 到 一 个 单一 的 页 面 进 行 创 建 及 泻 染 ,这 
种 能 力 将 使 动画 的 实现 具有 更 好 的 性 能 。 例 如 ,可 以 同时 执行 使 用 JavaScript 脚本 代码 实现 的 动画 
与 使 用 CSS 中 的 transition 样式 属性 实现 的 动画 。 另 外 .通过 window. requestAnimFrame() 方 法 , 当 
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用 户 将 浏览 器 标签 窗口 切换 到 其 他 标签 窗口 时 .当前 页 面 中 的 动画 将 被 暂停 运行 ,以 减少 CPU .GPU 
与 内 存 的 消耗 。 
此 实例 的 源 文 件 名 是 myHtmlA107. html。 


337 ”使 用 requestAnimFrame( ) 方 法 动态 绘制 桃 心 


此 实例 主要 通过 使 用 requestAnimFrame( ) 方 法 以 动画 的 形式 动态 绘制 桃 心 图 形 的 线条 。 当 在 
Google Chrome 浏览 器 中 显示 该 页 面 时 ,动态 绘制 桃 心 图 形 的 过 程 如 图 337-1 所 示 。 有 关 此 实例 的 主 
要 代码 如 下 。 
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图 337-1 


<! doctype html >< html >< head >< meta charset = "UTF — 8"> 
< script src= "js/jquery - 3.1.1.min. js"></script>< script type= "text/javascript"> 
$ (function() { 
myCanvas = document. get ElementById( "myCanvas" ); 
myContext = myCanvas. getContext( '2d'); 


W= myCanvas. width = window. innerWidth— 20; // 设 置 画 布 的 宽度 
H= myCanvas. height = window. innerHeight - 20; // 设 置 画布 的 高 度 
radius = Hx 0.45; // 设 置 半 径 的 大 小 
ticks= []; 
for (var i=0; i<=360; i+=5) { ticks. push(i); ”// 向 数组 的 末尾 添加 i 
function toRadians(angle) { 

return angle * (Math. PI/180); // 将 角度 转换 成 弧度 
1 
function calcPoints() { 

points=[]; 


for (var i=0; i<ticks. length; i++) { 
points. push([ W/2 +Math. cos(toRadians(ticks[i])) * radius, 
H/2 + Math. sin(toRadians(ticks[i])) x* radius ]); 


he 
function drawHeart (dashL, dash0) { // 绘 制 桃 心 图 案 
myContext. beginPath( ); // 开 始 绘制 路 径 


myContext. lineWidth = 1. 2; // 线 条 的 宽度 


贺 
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myContext. setLineDash( [dashL, dash0]); // 设 置 线条 样式 
myContext. strokeStyle = 'red'; // 线 条 的 颜色 
offset = 18; 


for (var i=0; i<=18; i++) { 
myContext. moveTo(points[i][0], points[i][1]); 
myContext. lineTo(points[i+ offset][0], points[i+ offset][1]); } 
for (var i=36; i<=54; it+) { 
myContext. moveTo(points[ i][0], points[i][1]); 
myContext. lineTo(points[i+ offset][0], points[i+offset][1]); } 
offset = 20; 
for (var i=18; i<36; i++) { 
myContext. moveTo(points[i][0], points[i][1]); 
myContext. lineTo(points[i+ offset][0], points[i+offset][1]); 
offset++; 1) 
offset = 20; 
for (var i=54; i>36; i--) 1{ 
myContext. moveTo(points[i][0], points[i][1]); 
myContext. lineTo(points[i- offset][0], points[i— offset][1]); 
offset++ 7 
} 
myContext. stroke( ); 
myContext. closePath( ) ; 
} 
calcPoints(); update( ); 
var dashLength= 100; var dashOffset = 100; 
function update() { 
if (dashLength<650) { 
dashLength += 2; myContext. clearRect(0, 0, W, H); 
drawHeart (dashLength, dashOffset); 
} 
window. requestAnimationFrame(update); ”// 请 求 动画 不 断 绘制 心 形 线条 
} 0); 
</script ></head > 
<body>< div align = "center">< canvas id= "myCanvas"></canvas ></div ></body ></html > 





上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,window. requestAnimationFrame 
(update) 用 于 通过 传 入 的 update() 方 法 递归 调用 自己 绘制 桃 心 。requestAnimationFrame( ) 方 法 的 语 
法 格式 如 下 。 


requestID = window. requestAnimationFrame( callback); 

在 每 次 需要 重新 绘制 动画 时 ,调用 callback 参数 所 指定 的 函数 。 此 时 回调 函数 会 收 到 一 个 参数 ， 
这 个 DOMHighResTimeStamp 类 型 的 参数 指示 当前 时 间距 开始 触发 requestAnimationFrame 的 回调 
时 间 。 该 方法 的 requestID 是 一 个 长 整 型 非 零 值 ,作为 一 个 唯一 的 标识 符 , 可 以 将 该 值 作 为 参数 传 给 
window. cancelAnimationFrame() 来 取消 这 个 回调 函数 。 

此 实例 的 源 文 件 名 是 myHtmlA127. html。 


338 ”通过 矩阵 变换 绘制 动态 走动 的 时 钟 


此 实例 主要 通过 使 用 transform() 方 法 进行 矩阵 变换 ,从 而 绘制 动态 走动 的 时 钟 。 当 在 浏览 器 中 
显示 该 页 面 时 将 显示 一 个 带 刻 度 盘 的 不 停 走动 的 时 钟 ,如 图 338-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 


HTML5+CSS3 炫 酷 应 用 实例 集锦 











下 x 


国 localhost63342/myWor x W 





© @ localhost:63342/myWork/myHtnyY | 








图 338-1 


<!doctype html ><html >< head >< meta charset = UIF -8> 
< script language = " javascript"> 
window. onload = function() { 
myClock(); 
}; 
function myClock() { 
var myCanvas = document. getElementById( "myCanvas"); 
var myContext = myCanvas. getContext("2d"); 
myContext. clearRect(0, 0, 410, 410); 
myContext. save( ); // 保 存 状 态 
myContext. lineWidth = 2; // 绘 制 刻度 
myContext. fillStyle = "red"; 
myContext. strokeStyle = "black"; 
var sin= Math. sin(Math. PI/6); 
var cos = Math. cos(Math. PI/6); 
myContext. translate(205, 205); 
for (var i=0; i<=12; i++) { 
myContext. fillRect(160, -7.5, 30, 10); 
myContext. strokeRect(160, —7.5, 30, 10); 
myContext. transform(cos, sin, ~ sin, cos, 0, 0); 
} 
var sin= Math. sin(Math. PI/30); // 重 置 中 心 位 置 
var cos = Math. cos(Math. PI/30) 
for (var i= 0; i<=60; i++){ 
myContext. fillRect(170, —5, 10, 2); 
myContext. transform(cos, sin, - sin, cos, 0, 0); 
1 
myContext. restore( ); 
myContext. font = '14pt 宋体 '; 





myContext . 
myContext. 
myContext . 
myContext . 
myContext . 
myContext. 
myContext. 


fillText("12", 193, 62); 
fillText("6", 202, 360); 
fillText("9", 50, 215); 
fillText("3", 350, 210); 
save(); 

translate(205, 205); 


save(); 


var now = new Date( ); 


var hrs = now. getHours( ); 


Var min = now. getMinutes(); 
var sec = now. getSeconds(); 


myContext. 
myContext. 
myContext. 
myContext. 
myContext. 
myContext. 
myContext. 
myContext. 
myContext. 
myContext. 
myContext. 
myContext. 
myContext. 
myContext. 
myContext. 
myContext. 
myContext. 
myContext. 
myContext. 
myContext. 
myContext. 
myContext. 
myContext. 
myContext. 
myContext. 


rotate(Math. PI/6 * (hrs+ (min/60) + (sec/3600))); 
beginPath( ); 

lineWidth = 6; 

moveTo(0, 10); 

lineTo(0, — 60); 

stroke( ); 

restore( ); 

save( ); 

rotate(Math. PI/30 * (min+ (sec/60))); 
beginpath( ); 

lineWidth = 4; 

moveTo(0, 20); 

lineTo(0, — 110); 
stroke(); 

restore( ); 

save( ); 

rotate(Math. PI/30 * sec); 
strokeStyle = " # E33"; 
beginpath( ); 

lineWidth = 2; 

moveTo(0, 20); 

lineTo(0, — 140); 

stroke( ); 

restore( ); 

restore( ); 


setTimeout (myClock, 1000); 


} 


</script ></head> 
<body >< canvas id = "myCanvas" width= "410" height = "410"></canvas> 
</body></html> 
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// 绘 制 显 示 的 4 个 时 钟 数字 


// 获 取 当 前 时 间 


// 绘 制 时 针 


// 绘 制 分 针 


// 绘 制 秒针 


// 恢 复 状 态 
// 必 须 两 次 
// 每 秒 刷 新 一 次 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,transform( ) 方 法 允许 缩放 、 旋 转 、 移 
动 并 倾斜 当前 的 环境 ,该 变换 只 会 影响 调用 transform( ) 方 法 之 后 的 绘图 。 如 果 已 经 将 绘图 设置 为 放 
大 两 倍 ,transform( ) 方 法 把 绘图 放大 两 倍 , 绘 图 最 终 将 放大 4 倍 。transformt( ) 方 法 的 语法 声明 如 下 。 


transform(a b,c, d,e, £); 





其 中 ,参数 a 表示 水 平 缩放 绘图 ; 参数 b 表示 水 平 倾斜 绘图 ; 参数 c 表示 垂直 倾斜 绘图 ; 参数 d 


表示 垂直 缩放 绘图 ; 参数 。 表示 水 平移 动 绘图 ; 参数 f 表示 垂直 移动 绘图 。 
此 实例 的 源 文件 名 是 myHtmlA066. html。 
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339 ”通过 绘制 圆 距 模拟 风车 叶轮 的 转动 特效 


此 实例 主要 通过 使 用 are() 方 法 和 setInterval( ) 函数 以 绘制 圆 弧 的 形式 模拟 风车 叶轮 的 转动 特 
效 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,风车 的 4 个 叶轮 将 连续 不 断 地 围绕 圆心 转动 ,如 果 
在 “风车 转动 速度 :" 下 拉 列 表 框 中 选择 风速 ,再 单 击 * 设 置 风速 ?按钮 , 则 风车 的 4 个 叶轮 将 按照 选择 
的 风速 进行 旋转 ,如 图 339-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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<! doctype html >< html >< head >< meta charset = "UTF — 8"> 
< script src= "js/jquery- 3.1.1.min. js"></script >< script type = "text/javascript"> 


var canvas, context; var X,Y; // 风 车 的 圆心 坐标 
var rate= 1; // 风 车 的 转速 ,默认 为 1 
var R= 20; // 风 车 的 半径 


var canvasWidth, canvasHeight; 
function drawArc(radian, style){ 
context. beginPath( ); 
var myGradient = context.createLinearGradient (X, Y, X, Y+4*R); 
myGradient. addColorStop(0, style); 
myGradient. addColorStop(1, "white"); 
context. fillStyle = myGradient; 
context.arc(X— (2* RxMath.cos(radian)), 
Y-2x*RxMath.sin(radian), 2 * R, radian, Math. PI + radian, true); 
context. closePath( ) ;context. fil1( ) ; context. save(); 
} 
var radian= 0; 
function draw( ){ 
radian = radian + (rate * 1/32) * Math. PI; 
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var myGradient = context. createLinearGradient (Xx, Y, X+ 10, Y); 
myGradient. addColorStop(0,'#663300'); 
myGradient. addColorStop(0.4, '#996600'); 
myGradient. addColorStop(1, '#552200"); 
context. fillStyle = myGradient; 
context. clearRect( 0, 0, canvasWidth, canvasHeight); 
context. fillRect(X, Y, 0.2 xR, 8*R); 
drawArc(radian, " i# 552200"); // 绘 制 4 个 叶轮 
drawArc(radian+ 1/2 * Math. PI, " #990000"); 
drawArc(radian+ Math. PI, "#0033FF"); 
drawArc(radian+ 3/2 * Math. PI, " #225500"); 
} 
$ (function(){ 
context =$ ("#myCanvas")[0].getContext("2d"); 
canvasWidth = $ ("#myCanvas")[0]. width;canvasHeight = $ ("#myCanvas")[0]. height; 
X= canvasWidth/2; Y = canvasHeight/3; 
// 每 隔 20 毫秒 执行 一 次 绘制 操作 
setInterval (draw, 20); 
// 响 应 单 击 "设置 风速 "按钮 
$ ("#myBtnRate").click(function(){ rate=$ ("select").val(); }); 
DD); 
</script ></head> 
<body><div align = "center"> 
<canvas id = "myCanvas" height = "300px" width= "400px" ></canvas><br> 
<p> 风 车 转动 速度 : 
< select><option value = "0"> 停 止 </option >< option value = "0. 1"> 徽 风 </option> 
<option value = "0.5"> 小 风 </option >< option value= "1"> 中 风 </option> 
<option value= "2"> 大 风 </option>< option value= "4"> 狂 风 </option></select> 
<button id = "myBtnRate"> 设 置 风速 </button ></p></div></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,arc() 方 法 用 于 创建 弧 / 曲 线 ,或 者 用 
于 创建 圆 .部 分 圆 。 如 果 需 要 通过 arc() 创 建 圆 ,应 把 起 始 角 设置 为 0、 结束 角 设 置 为 2 * Math. PI。 
arc() 方 法 的 语法 声明 如 下 。 





arc(x, y, r, sAngle, eAngle, counterclockwise) 


其 中 ,参数 x 表示 圆心 的 x 坐标 ; 参数 y 表示 圆心 的 y 坐标 ; 参数 r+ 表示 圆 的 半径 ; 参数 sAngle 
表示 起 始 角 ,以 弧度 计 , 弧 ( 圆 形 ) 的 三 点 (时 ) 钟 位 置 是 0 ; 参数 eAngle 表示 结束 角 , 以 弧度 计 ; 参数 
counterclockwise 是 可 选 参数 ,规定 是 逆 时 针 还 是 顺 时 针 绘 图 ,false 表示 顺 时 针 ,true 表示 逆 时 针 。 

setInterval() 函 数 用 于 按照 指定 的 周期 来 调用 函数 或 计算 表达 式 , 该 方法 会 不 停 地 调用 参数 中 指 
定 的 方法 ,直到 clearInterval() 函数 被 调用 或 窗口 被 关闭 。 由 setInterval() 函 数 返 回 的 ID 值 可 用 作 
clearInterval() 函数 的 参数 。setlInterval() 函 数 的 语法 格式 如 下 。 














setInterval(code, millisec[, "lang" ]) 


其 中 ,参数 code 表示 要 调用 的 方法 或 要 执行 的 代码 串 ; 参数 millisec 表示 周期 性 执行 或 调用 
code 之 间 的 时 间 间 隔 . 以 毫秒 计 。 该 方法 的 返回 值 用 于 传递 给 clearInterval() 函数 从 而 取消 对 code 
的 周期 性 执行 的 值 。 

此 实例 的 源 文件 名 是 myHtmlAl19. html。 
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340 ”通过 旋转 绘图 对 象 模拟 高 速 旋转 的 车 轮 


此 实例 主要 使 用 画布 的 translate() .rotate() ,drawImage() 方 法 和 定时 器 方法 setInterval() ,从 
而 实现 以 旋转 绘图 对 象 (画布 ) 模 拟 高 速 旋 转 的 车 轮 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ， 
单 击 * 开 始 转动 ”按钮 , 则 车 轮 将 高 速 转动 ,如 图 340-1 所 示 ; 单 击 “ 停 止 转动 ”按钮 , 则 车 轮 将 停止 转 
动 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 340-1 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<script src= "js/jquery - 3.1.1.min. js"></script>< script type = "text/javascript"> 
$ (function() { 
var canvas =$ ("#myCanvas")[0]; 
Var context = canvas. getContext ("2d"); 
var angle = 0, timer; 
$ ("#myBtnStart"). click(function() { // 响 应 鼠标 单 击 "开始 转动 "按钮 
timer = setInterval(function() { // 每 隔 50 秒 旋 转 1” 
if (angle== 360) { angle= 0; } 
context. clearRect(0, 0, 200, 200); 
context. translate(100, 100); 
context. rotate(angle * Math. PI/180); // 根 据 指定 的 角度 (弧度 ) 旋 转 绘图 
context. translate( - 100, — 100); 


context. drawImage( $ ("img")[0],0,0,，200, 200); // 绘 制图 像 
anglet+; }, 50); }); 


$ ("#myBtnStop"). click(function() { // 响 应 鼠标 单 击 " 停 止 转动 "按钮 
clearInterval (timer); 
DD); 
$ ("#myBtnstart"). click(); // 自 动 执行 鼠标 单 击 " 开 始 转动 "按钮 的 动作 
DD); 
</script > 


<style type= "text/css"> 
img { display: none; } 
button { width: 150px; } 
</style></head> 
<body>< div align = "center">< img src = "img/A120. jpg"/> 
<canvas id= "myCanvas" width= "200" height = "200"></canvas > 
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<p><button id= "myBtnStart"> 开 始 转动 </button> 
< button id = "myBtnStop"> 停 止 转动 </button></p></div></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,context. clearRect(0，0，200，200) 


用 于 清空 (0, 0, 200, 200) 参 数 指定 的 矩形 内 的 所 有 像素 ; context. translate(100, 100) 用 于 根据 指 
定 参 数 (100,100) 的 位 置 重新 映射 画布 上 的 (0.0) 位 置 ; context. rotate(angle * Math. PI/180) 用 于 以 
指定 的 角度 (弧度 ) 旋 转 当前 的 绘图 (画布 ); context. drawImage($ ("img")[0], 0, 0, 200, 200) 用 





于 在 画布 上 根据 指定 位 置 和 尺寸 绘制 (车 轮 ) 图 像 ; setInterval() 函数 用 于 按照 指定 的 周期 (50 毫秒 ) 


执行 旋转 画布 对 象 及 绘图 的 代码 ,该 方法 会 不 停 地 调用 参数 中 指定 的 代码 ,直到 clearInterval() 函数 
被 调用 或 窗口 被 关闭 。 


此 实例 的 源 文件 名 是 myHtmlA120. html。 


341 通过 定时 器 改变 HSLA 值 模拟 渐变 的 圆 环 


此 实例 主要 使 用 不 断 改变 的 HSLA 颜色 填充 圆 环 ,从 而 使 圆 环 的 颜色 在 圆周 上 呈现 渐变 的 效果 。 





当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 , 圆 环 的 颜色 将 不 断 动态 改变 ,如 图 341-1 所 示 。 有 关 此 
实例 的 主要 代码 如 下 。 
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图 341-1 


<! doctype html >< html >< head >< meta charset = "UTF - 8"> 
< script src= "js/jquery - 3.1.1.min. js"></script >< script type = "text/javascript"> 
$ (function() { 
var myContext =$ ("canvas")[0].getContext('2d'), myHue =0, myAngle= 0.01; 
setInterval(function() { // 每 隔 5 毫秒 更 改 一 次 颜色 
myAngle += 0.03; myHue<= 360 ? myHue += 0.25 : myHue=0; 
var s=— Math. sin(myAngle); var c= Math.cos(myAngle); 
myContext. save( ); myContext.globalAlpha = 0.5; 
myContext. beginpath( ); 
myContext. fillStyle ='hsla('+myHue+',100 各 , 50% ,1)'; // 填 充 绘画 的 颜色 
// 创 建 弧 /曲线 (创建 圆 或 部 分 圆 ) 
myContext.arc(200/2+ (sx* 75), 200/2+ (cx*75)，5，0，2* Math. PI); 
myContext. fil1( ) ; myContext. restore(); }, 5); 
$ ("canvas")[0].width=200; $ ("canvas")[0].height = 200; 
D); 
</script ></head> 
<body >< div align = "center"><canvas></canvas ></div></body ></html > 
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上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , myContext. fillStyle 二 'hsla( ' 十 
myHue 十 ',100% ,50%,1)' 用 于 以 HSLA 颜色 的 形式 设置 填充 颜色 。 在 HTML5 中 除了 可 以 使 用 
RGB 颜色 外 ,还 可 以 使 用 HSLA 颜色 。HSLA 是 使 用 色调 (H)、 饱 和 度 (S) .亮度 (L) ,alpha 通道 值 
(A) 来 定义 颜色 。HSLA 颜色 标记 法 的 意义 如 下 。 

(1) H: Hue( 色 调 ),0( 或 360) 表 示 红 色 .120 表示 绿色 .240 表示 蓝 色 ,也 可 取 其 他 数值 来 指定 颜 
色 , 其 取 值 范围 为 0 一 360 。 

(2) S: Saturation( 饱 和 度 ) ,其 取 值 范围 为 0.0% 一 100.0%%。 

(3) L: Lightness( 亮 度 ) ,其 取 值 范围 为 0.0% 一 100.0%% 。 

(4) A: Alpha 透明 度 , 其 取 值 范围 为 0 一 1。 

当 色 调 值 大 于 360 时 (例如 480) , 则 实际 值 等 于 480 除去 360 之 后 的 余数 120( 取 模 运 算 ) 。 

此 实例 的 源 文件 名 是 myHtmlA178. html。 


342 ”使 用 蒙 版 高 仿 电波 逐 级 扩散 的 动态 特效 


此 实例 主要 在 -webkit-mask 蒙 版 上 创建 渐变 色 的 圆 环 ,从 而 实现 高 仿 电波 逐 级 扩散 的 动态 特效 。 
当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 , 单 击 图 像 上 的 任意 一 点 , 即 以 此 点 为 中 心 产 生 一 个 渐变 
色 的 圆 环 并 向 外 扩散 ,连续 单 击 此 点 , 则 会 到 加 这 些 渐 变色 的 圆 环 并 向 外 扩散 ,犹如 基站 发 射电 波 信 
号 一 样 ,效果 如 图 342-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 342-1 


<!doctype html ><html >< head >< meta charset = "UTF — 8"> 
<script src= "js/jquery - 3.1.1.min. js"></script >< script type = "text/javascript"> 
$ (function() { 
// 单 击 图 片 即 可 实现 电波 扩散 特效 ,在 同一 位 置 多 次 单 击 则 可 实现 多 个 波纹 全 加 的 特效 
$ ("img").click(function(e) { 
var radius = 0; 
var timer = setInterval(function() { 
// 超 出 最 大 半径 时 重新 从 圆心 扩散 
if (radius > parseInt( $ ("img"). height()/2)) { radius=0; } 
// 在 蒙 版 上 添加 渐变 色 圆 环 
$ ("img").css({" — webkit ~- mask": " ~ webkit ~ gradient (radial, "+e.offsetX+" "+e.offsetY+","+ 
radius+", "+e.offsetX+" "+e.offsetY+", "+ (radius+15)+", from(rgba(255, 255, 255,1)), color— 
stop(0.5,rgba(255, 255, 255, 0.2)), to(rgba(255, 255, 255,1)))"}); 
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radius +=3; }, 50); 
}) 1); 
</script ></head> 
<body>< div align = "center">< img src = "img/A183. jpg"/></div></body></htnl > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , $ ("img"). css({"-webkit- mask": 
"-webkit-gradient(radial, "十 e. offsetX+" "十 e. offsetY 十 ", "十 radius 十 "，" 十 e. offsetX 十 " "十 e. 
offsetY 十 "，" 十 (radius 十 15) 十 "，from(rgba(255，255，255,1))，color-stop(0. 5,rgba(255，255， 
255, 0.2))，to(rgba(255，255，255,1)))"}) 用 于 在 蒙 版 上 添加 渐变 色 圆 环 。-webkitrmask 使 
Google Chrome 浏览 器 支持 创建 任意 形状 的 花样 蒙 版 成 为 可 能 , 蒙 版 可 以 是 CSS3 渐变 或 者 半 透 明 的 
png 图 片 。 当 蒙 版 元 素 的 alpha 值 为 0 的 时 候 会 覆盖 下 面 的 元 素 , 为 1 的 时 候 会 完全 显示 下 面 的 内 
容 。 与 -webkit-mask 相关 的 属性 有 -webkit-mask-clip、-webkit-mask-position 和 -webkit-mask-repeat 
等 ,严重 依赖 来 自 background 中 的 语法 。setlInterval() 函 数 用 来 对 遮 黑 层 的 渐变 位 置 进行 动态 变化 。 

此 实例 的 源 文件 名 是 myHtmlA183. html。 


343 ”以 动画 形式 模拟 订单 提交 前 的 等 待 状态 


此 实例 主要 使 用 @keyframes 规则 创建 每 个 关键 帧 动画 ,从 而 实现 以 动画 形式 模拟 订单 提交 等 进 
程 等 待 状态 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,在 第 1 秒 显示 “订单 正在 提交 中 .”, 如 
图 343-1 所 示 , 以 此 类 推 。 如 果 完 成 全 部 10 秒 动作 , 则 重新 开始 循环 。 有 关 此 实例 的 主要 代码 如 下 。 
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订单 正在 提交 中 . 





图 343-1 


<! doctype html >< html >< head><meta charset = "UTF - 8"> 
< style type= "text/css"> 
dot { display: inline - block; height: lem; line- height: 1; 
text - align: left; vertical - align: ~ 0.25em; overflow: hidden;} 
dot: :before {display: block; animation: dot 10s infinite step- start both; 


white— space: pre— wrap; /也 可 以 是 white- space: pre x*/} 
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@keyframes dot { 10% { transform: translateY( - 9em); } 
20% { transform: translateY( - 8em); } 30% { transform: translateY( - Tem); } 
40% { transform: translateY( - 6em); } 50% { transform: translateY( - 5em); } 
60% { transform: translateY( - 4em); } 70% { transform: translateY( - 3em); } 
80% { transform: translateY( - 2em); } 90% { transform: translateY( - lem); } } 
img{ width:487px; height :323px; border - radius: 5px; } 
body{ font - size:20px; font - weight: 500; } 
</style></head> 
<body >< img src = "img/B122. jpg"/> 订 单 正在 提交 中 <dot >.......... </dot > </body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 .@keyframes 用 于 设置 在 整个 动画 过 
程 中 每 个 关键 帧 的 CSS 样式 ,在 动画 过 程 中 能 够 多 次 改变 这 套 CSS 样式 ,可 以 通过 百分比 来 改变 发 
生 的 时 间 ,或 者 通过 关键 字 from 和 to, 等 价 于 0% 和 100%, 其 中 0% 是 动画 的 开始 时 间 、100% 动 画 的 
结束 时 间 。@keyframes 的 语法 格式 如 下 。 


@keyframes animationname {keyframes - selector {css— styles;}} 


其 中 ,各 参数 值 的 说 明 如 下 。 

(1) animationname: 定义 动画 的 名 称 。 

(2) keyframes-selector: 设置 动画 时 长 的 百分比 ,合法 的 值 有 : 0% 一 100% from( 与 0% 相同 )、 
to( 与 100% 相 同 )。 

(3) css-styles: 定义 一 个 或 多 个 合法 的 CSS 样式 属性 。 

此 实例 的 源 文件 名 是 myHtmlB122. html。 


344 以 文本 缩 进 形式 模拟 等 待 的 变 长 省 略 号 


此 实例 主要 在 @keyframes 中 使 用 text-indent 属性 规定 指定 的 关键 帧 的 文本 缩 进 值 , 从 而 实现 以 
动画 形式 模拟 订单 提交 等 进程 等 待 状态 的 变 长 省 略 号 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 
时 ,在 第 1 秒 显示 “订单 正在 提交 中 .”, 如 图 344-1 所 示 ,以 此 类 推 。 如 果 完 成 全 部 10 秒 动作 , 则 重新 
开始 循环 。 有 关 此 实例 的 主要 代码 如 下 。 
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<!doctype html ><html >< head ><meta charset = "UTF - 8"> 
<style type= "text/css"> 
dot { display: inline - block; width: 10ch;vertical - align: bottom; 
overflow: hidden; animation: dot 10s infinite step— start both; 
font - family: Consolas, Monaco, monospace; } 
@keyframes dot { 10% {text- indent: - 9ch;} 
20% {text— indent: - 8ch;} 
30% {text—- indent: -7ch;} 
40% {text— indent: - 6ch;} 
50% {text— indent: — 5ch;} 
60% {text— indent: - 4ch;} 
70% {text— indent: — 3ch;} 
80% {text— indent: -2ch;} 
90% {text— indent: — lch;} 
100% {text— indent: Och;} } 
inmg { width: 487px; height: 323px; border - radius: 5px; } 
body { font - size: 20px; font - weight: 500; } 
a { border - radius: 3px; padding: 5px; border: solid lpx black; 
background - color: lightskyblue; text ~ decoration: none; } 
</style></head> 
<body >< img src = "img/B122. jpg"/> 
<a href = "http: //order. jd. com/center/1ist.action" > 订单 提交 中 
</dot ></a></body></html > 
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上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,animation: dot 10s infinite step-start 
both 表示 在 10 秒 内 完成 dot 动画 , 且 无 限 重 复 , both 实际 上 是 animation-fill-mode: both。 
animation-fill-mode 属性 规定 动画 在 播放 之 前 或 之 后 的 动画 效果 是 否 可 见 ,该 属性 的 语法 格式 如 下 。 


animation - fill - mode: none | forwards | backwards | both 
其 中 ,各 个 属性 值 的 意义 如 表 344-1 所 示 。 
表 344-1 animation-fill-mode 属性 值 及 意义 
值 描 述 





none 不 改变 默认 行为 
forwards 当 动 画 完成 后 保持 最 后 一 个 属性 值 (在 最 后 一 个 关键 帧 中 定义 ) 


backwards 在 animation-delay 指定 的 一 段 时 间 内 ,在 动画 显示 之 前 应 用 开始 属性 值 (在 第 一 个 关键 帧 中 定义 ) 


both 向 前 和 向 后 填充 模式 都 被 应 用 





10% { text-indent: 一 9ch;} 表 示 动 画 完成 10% 时 文本 缩 进 “ 一 9ch”, 即 10 个 “. ” 仅 显 示 一 个 “.”， 


其 余 以 此 类 推 。 
此 实例 的 源 文件 名 是 myHtmlB123. html。 


345 ”使 用 收缩 扩展 的 形式 平滑 切换 两 个 场景 


此 实例 主要 通过 设置 元 素 的 transform 和 transition 属性 实现 以 收缩 .扩展 的 形式 平滑 切换 两 个 
场景 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 .如 果 鼠 标 指针 滑 入 左上 角 的 图 片 . 则 图 片 将 在 指 
定 的 时 间 内 扩展 并 滑 入 文本 ,如 图 345-1 所 示 ; 如 果 鼠 标 指针 滑 入 右 下 角 的 图 片 , 则 右 下 角 的 图 片 将 
在 指定 的 时 间 内 扩展 并 滑 和 文本 ,同时 左上 角 的 文本 收缩 并 将 在 指定 的 时 间 内 滑 入 图 片 ; 使 用 鼠标 指 
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针 在 其 他 图 片上 滑 和 人 、 滑 出 将 实现 类 似 的 效果 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 345-1 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<style type= "text/css"> 

.main * { padding:0; margin:0;} 

.main { position: relative; width: 680px; margin: 0 auto;} 

.view { width: 300px; margin: 10px;float: left; 

border: 10px solid #FFF; overflow: hidden; 

position: relative;text - align: center; 

— webkit - box — shadow: 1px 1px 2px #E6E6E6, - lpx - lpx 2px # E6E6e6; 
cursor: default; background - color: aqua; } 

.View .mask{ width: 300px; height: 200px; position: absolute; 

overflow: hidden; top: 0; left: 0;} 

.View img {display: block; position: relative;max— width:100% ;} 

.view h2 {text - transform: uppercase;color: #FFF;text -align: center; 
position: relative;font ~ size: 17px; padding: 10px; 
background: rgba(0, 0, 0, 0.8);margin: 20px 0 0 0;} 

.view p { font ~ size: 12px; position: relative; color: #FFF; 
padding: 10px 20px 20px; text — align: left;} 

.view . link { display: inline - block;text — decoration: none; 

padding: 7px 14px;background: 间 000;color: #FFF; 
text - transform: uppercase; 
— webkit - box - shadow: 0 0 1px #000;font— size: 14px;} 

.view .link:hover { - webkit — box— shadow: 0 0 5px #000;} 

.view— tenth img { — webkit— transform: scaleY(1); 

— webkit ~ transition: all 0.7s ease— in- out;} 

.view- tenth .mask {background— color: rgba(249, 179, 255, 0.3); 

— webkit- transition: all 0.5s linear; opacity: 0;} 
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.view ~ tenth h2 { border - bottom: 1px solid rgba(0, 0, 0, 0.3); 
background: transparent; margin: 20px 40px Opx 40px; 
— webkit ~ transform: scale(0); color: #333; 
— webkit — transition: all 0.5s linear; opacity: 0;} 
.view— tenth p {color: #333; opacity: 0; - webkit - transform: scale(0); 
— webkit ~ transition: all 0.5s linear;} 
.view— tenth .link {opacity: 0; — webkit— transform: scale(0); 
— webkit — transition: all 0.5s linear;} 
.view — tenth:hover img { - webkit — transform: scale(10); opacity: 0; } 
.view — tenth:hover .mask {opacity: 1;} 
.view ~ tenth:hover h2,. view - tenth: hover p, .view— tenth:hover .link { 
— webkit ~- transform: scale(1); opacity: 1; } 
body{ background - color: gray;} 
</style></head> 
<body>< div class = "main"> 
<div class = "view view— tenth">< img src = "img/B127A. jpg" /> 
<divclass= "mask"><h2 > 重庆 网 博 网 </h2 ><p> 重 庆 网 博 网 , 是 一 个 集 自然 景观 和 人 文 景观 为 一 体 的 超大 型 
城市 生态 公园 . . .</p> <a href = "http://baike. so. com/doc/5639682 - 5852310. html" class = "link"> 查 看 全 
文 </a></div></div> 
<div class= "view view - tenth">< img src= "img/B127B. jpg" />< div class = "mask"> 
<h2 > 重庆 网 博 网 </h2 ><p> 重 庆 园 博 网 ,是 一 个 集 自然 景观 和 人 文 景观 为 一 体 的 超大 型 城市 生态 公园 . . .</p> 
<a href = "http://baike. so. com/doc/5639682 - 5852310. html" class = "link"> 查 看 全 文 </a></div></div> 
<div class= "view view - tenth">< img src="img/B127C. jpg" /><div class = "mask"> 
<h2 > 重庆 网 博 网 </h2 ><p> 重 庆 网 博 网 ,是 一 个 集 自然 景观 和 人 文 景观 为 一 体 的 超大 型 城市 生态 公园 . . .</p> 
<a href = "http: //baike. so. com/doc/5639682 - 5852310. html” class = "link"> 查 看 全 文 </a></div></div> 
<div class= "view view - tenth">< img src="img/B127D. jpg" />< div class = "mask"> 
<h2 > 重庆 网 博 园 </h2 > <p> 重 庆 网 博 网 ,是 一 个 集 自然 景观 和 人 文 景观 为 一 体 的 超大 型 城市 生态 公园 . . .</p> 
<a href = "http://baike. so. com/doc/5639682 - 5852310. html" class = "link"> 查 看 全 文 </a></div></div></div> 
</body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,transform: scale(10) 表 示 将 元 素 ( 图 


片 ) 放 大 10 倍 ,transform: scale(0) 则 表示 缩小 至 消失 ; transition: all 0. 5s linear 表示 以 linear 方式 


在 0. 
Prop 


5 秒 内 完成 所 有 属性 的 动画 过 渡 。transition 属性 是 一 个 简写 属性 .用 于 设置 transition- 
erty ,transition-duration,transition-timing-function、transition-delay 几 个 过 渡 属 性 ,默认 形式 为 


transition: all 0 ease 0。 


此 实例 的 源 文 件 名 是 myHtmlB127. html。 


346 ”以 类 似 翻 书 的 风格 旋转 切换 两 个 场景 


此 实例 主要 通过 使 用 rotateY () 等 方法 实现 以 类 似 翻 书 的 风格 旋转 切换 两 个 场景 。 当 在 Google 





Chrome 浏览 器 中 显示 该 页 面 时 .如果 鼠标 指针 滑 和 右上 角 的 图 片 , 则 将 在 指定 的 时 间 内 绕 Y 轴 反 向 


旋转 
向 旋 
针 在 


90 滑 和 人 文本 ,如 图 346-1 所 示 ; 如 果 鼠 标 指针 滑 人 左下 角 的 图 片 , 则 将 在 指定 的 时 间 内 绕 Y 轴 反 
转 90 并 滑 人 文本 ,同时 右上 角 的 文本 绕 Y 轴 正 向 旋转 90 并 收缩 文本 以 显示 图 片 ; 使 用 鼠标 指 
其 他 图 片上 滑 入 、 滑 出 将 实现 类 似 的 效果 。 
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图 346-1 


有 关 此 实例 的 主要 代码 如 下 。 


<! doctype html >< html >< head >< meta charset = "UTF - 8"> 
<style type= "text/css"> 
.mainx {padding: 0; margin: 0; - webkit — box— sizing: border — box;} 
.main { position: relative; width: 640px; margin: 0 auto;} 
.view { width: 300px; margin: 10px; float: left; border: 10px solid # FFF; 
— webkit ~ box — shadow: 1px 1px 2px #E6E6E6, — 1px - lpx 2px # E6E6E6; 
cursor: default; } 
.view figure img {max — width: 100% ; display: block; position: relative;} 
.view .mask { position: absolute; top: 0; left: 0;bottom: 0; padding: 10px; 
background - color: rgba(233, 194, 236, 0.9); color: black; } 
.view .mask h2 { margin: 0 0 5px; padding: 0 0 5px; color: black; font — size: 20px; 
font - weight: bold; text ~ align: center; border - bottom: 1px solid gray;} 
.View .mask p { font ~ size: 14px;} 
.view . link { position: absolute; bottom: 10px; right: 10px; text - align: center; padding: 5px 10px; 
border — radius: 5px; display: inline- block; background: red; color: #FFF; text— decoration: none;} 
.view- tenth { — webkit - perspective: 1700px; — webkit— perspective— origin: 0 50%;} 
.view ~ tenth .mask { width: 100 % ; opacity: 0; - webkit — backface— visibility: hidden; 
— webkit— transform— origin: 0 0; — webkit— transform: rotateY( - 90deg); 
— webkit — transition: — webkit — transform 0.4s, opacity 0.1s 0.3s; } 
.view- tenth figure:hover .mask {opacity: 1; - webkit— transform: rotateY(0deg); 
— webkit - transition: — webkit— transform 0.4s, opacity 0.1s; } 
body { background — color: gray; } 
</style></head> 
<body><div class = "main">< div class = "view view — tenth"> 
<figure><div>< img src = "img/B127A. jpg"/></div ><div class = "mask"> 
<h2 > 重庆 网 博 园 </h2 > <p> 重 庆 园 博 园 ,是 一 个 集 自然 景观 和 人 文 景观 为 一 体 的 超大 型 城市 生态 公园 .. . 
</p><a href = "http://baike. so. com/doc/5639682 - 5852310. html”class = "link"> 查 看 全 文 </a > </div > 
</figure></div><div class = "view view— tenth"> 
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<figure><div>< img src = "img/B127B. jpg"/></div><div class = "mask"> 


<h2 > 重庆 网 博 网 </h2 ><p> 重 庆 园 博 网 ,是 一 个 集 自然 景观 和 人 文 景观 为 一 体 的 超大 型 城市 生态 公园 . 
</p><a href = "http://baike. so. com/doc/5639682 - 5852310. html" class = "link"> 查 看 全 文 </a></div > 
</figure></div><div class = "view view— tenth"> 

<figure><div>< img src= "img/B127C. jpg"/></div>< div class = "mask"> 

<h2 > 重庆 网 博 园 </h2 ><p> 重 庆 园 博 园 , 是 一 个 集 自然 景观 和 人 文 景观 为 一 体 的 超大 型 城市 生态 公园 .. . 

</p><a href = "http://baike. so. com/doc/5639682 - 5852310. html” class = "link"> 查 看 全 文 </a></div > 
</figure></div><div class = "view view— tenth"> 

<figure><div>< img src= "img/B127D. jpg"></div>< div class= "mask"> 

<h2 > 重庆 园 博 园 </h2 > <p > 重庆 园 博 园 ,是 一 个 集 自 然 景 观 和 人 文 景观 为 一 体 的 超大 型 城市 生态 公园 . . .</p> 
<a href = "http://baike. so. com/doc/5639682 - 5852310. html" class = "link"> 查 看 全 文 </a ></div></figure> 
</div></div></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,rotateY() 表 示 从 当前 位 置 绕 Y 轴 旋 
转 到 指定 的 角度 。perspective 属性 定义 3D 元 素 与 视图 的 距离 ,以 像素 计 , 该 属性 允许 改变 3D 元 素 
以 查看 3D 元 素 的 视图 , 当 为 元 素 定 义 perspective 属性 时 其 子 元 素 会 获得 透视 效果 ,而 不 是 元 素 本 
身 , 该 属性 通常 与 perspective-origin 属性 一 起 使 用 ,这 样 就 能 够 改变 3D 元 素 的 底部 位 置 。 在 实例 中 ， 
如 果 把 “-webkit-perspective: 1700px;” 改 成 “webkit-perspective: 100px;”, 则 会 在 测试 时 出 现 较 强 
的 动态 效果 。perspective 属性 的 语法 格式 如 下 。 

perspective: number| none 

其 中 ,number 表示 元 素 与 视图 的 距离 ,以 像素 计 ; none 是 默认 值 ,与 0 相同 ,不 设置 透视 。 

perspective-origin 属性 定义 3D 元 素 所 基于 的 X 轴 和 轴 位 置 ,该 属性 允许 改变 3D 元 素 的 底 
部 位 置 。 当 为 元 素 定义 perspective-origin 属性 时 其 子 元 素 会 获得 透视 效果 ,而 不 是 元 素 本 身 , 该 属 
性 必须 与 perspective 属性 一 起 使 用 ,而 且 只 影响 3D 转换 元 素 。perspective-origin 属性 的 语法 格式 
如 下 。 


perspective - origin: x- axis yY- axis 


其 中 ,x-axis 定义 该 视图 在 X 轴 上 的 位 置 .默认 值 是 50%, 可 能 的 值 有 left、center、right、 
length、%; y-axis 定义 该 视图 在 Y 轴 上 的 位 置 ,默认 值 是 50%, 可 能 的 值 有 top、center、 bottom 、 
length、%。 

此 实例 的 源 文件 名 是 myHtmlB129. html。 


347 ”创建 渐变 色 文字 的 光影 流动 特效 


此 实例 主要 使 用 滚动 的 渐变 色 填 充 文字 ,从 而 实现 光影 流动 的 文字 动画 特效 。 当 在 Google 
Chrome 浏览 器 中 显示 该 页 面 时 ,文字 的 颜色 将 按照 从 左 向 右 的 方向 渐变 ,由 于 渐变 色 是 用 动画 不 停 
变换 的 ,因此 像 变 色 的 探照灯 不 停 地 往复 照射 文字 一 样 .如 图 347-1 所 示 。 有 关 此 实例 的 主要 代码 
> 





<!doctype html ><html >< head >< meta charset = "UTF — 8"> 
<style type= "text/css"> 
. masked {background — image: — webkit - linear - gradient (left，# 147B96， # E6D205 25%, 
提 147B96 50 当 ， 井 E6D205 75%， #147B96); - webkit - text — fill - color: transparent; 
— webkit — background - clip: text; — webkit — background — size: 200% 100%; — webkit 
— animation: masked- animation 4s infinite linear; font- size: 24px; margin: 60px;} 
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@ - webkit -keyframes masked- animation { 0% { background- position: 0 0;} 
100% { background- position: -100% 0; }} 





</style></head> 


<body><div class= "masked">< hl > 待 月 西 厅 下 ,迎风 户 半 开 。 隔 墙 花影 动 , 疑 是 玉 人 来 。</hl > </div> </body> 
</html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,background-image: -webkit-linear- 
gradient(left，# 147B96 ，# 上 6D205 25%, #147B96 50% ，# E6D205 75%% ，# 147B96) -webkit- 
text-fill-color: transparent 、-webkit-background-clip: text 这 些 代码 在 一 起 表示 用 渐变 色 填 充 文字 线 
条 ; -webkit-animation: masked-animation 4s infinite linear 表示 在 4 秒 内 以 线性 方式 执行 masked- 
animation 动画 ,上 且 无 限 循环 执行 下 去 。 

此 实例 的 源 文件 名 是 myHtmlB143. html。 
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待 月 西 厢 下 ， 
迎风 户 半 开 。 


隔 墙 花影 动 ， 


疑 是 玉 人 来 。 





图 347-1 


348 不 间断 水 平 深 动 显示 序列 中 的 广告 图 片 


此 实例 主要 设置 overflow、white-space、display 等 属性 ,并 使 用 定时 器 不 断 改变 显示 位 置 ,从 而 实 
现 不 间断 水 平 滚动 播放 无 序列 表 中 的 广告 图 片 的 特效 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 
时 ,如 果 鼠 标 指针 悬浮 在 图 片上 , 则 滚动 播放 和 暂停; 如 果 鼠 标 指针 离开 图 片 , 则 继续 滚动 播放 图 片 , 效 
果 如 图 348-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 





<!doctype html >< html ><head >< meta charset = "UTF - 8"> 
< script language = " javascript"> 
function ScrollImgLeft() { 
Var speed = 20; // 设 置 滚动 速度 
Var myBegin = document. getElementById( "myBegin"); 
Var myEnd = document. getElementBYId("myEnd" ) ; 
Var myBox = document. getElementById( "myBox"); 
myEnd. innerHTML = myBegin. innerHTML; 
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function Marquee() { 
if (myEnd. offsetWidth - myBox. scrollLeft <= 0) 
myBox. scrollLeft -= myBegin. off setWidth; 
else 
myBox. scrollLeft++ ; 
} 
var MyMar = setInterval (Marquee, speed); 


myBox. onmouseover = function() { // 和 鼠标 指针 悬浮 时 停止 滚动 
clearInterval (MyMar); 

| 

myBox. onmouseout = function() { // 鼠 标 指针 离开 后 继续 滚动 


MyMar = setInterval(Marquee, speed); 
es 
</script > 
<style type = "text/css"> 
.myBox { width: 410px; height: 210px; 
margin: 20px auto; /* 第 二 个 auto 能 够 实现 盒子 水 平 居中 */ 
overflow: hidden; /=* 超出 部 分 隐藏 */ 
white - space: nowrap; padding: 5px; /* 不 换行 */ 
background: #FFFFFF; box - shadow: 1px 1px 10px #AAA;} 
img { width: 200px; height: 200px;border: 1px black solid; 
margin: auto 5px; box— shadow: 1px 1px 10px #AAA; } 
#myBegin, #myEnd, ul, li{ display: inline; } /x* 在 一 行 中 显示 所 有 图 像 * / 
</style></head> 
<body><div id= "myBox" class = "myBox">< div id = "myBegin"> 
<ul><1i>< ing src="img/B202A. jpg"/></1i><1i>< img src = "ing/B202B. jpg"/></1i> 
<1i>< img src= "img/B202C. jpg"/></li><1i>< img src = "img/B202D.jpg" 人 ></1i> </ul ></div> 
<div id= "myEnd"></div></div > 
< script type = "text/javascript"> ScrollImgLeft();</script ></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,display: inline 用 于 在 一 行 中 显示 所 
有 图 片 及 其 他 元 素 ; overflow: hidden 表示 无 序列 表 的 所 有 列表 项 (图 片 ) 在 显示 窗口 无 法 显示 时 隐 
藏 超出 范围 的 部 分 ; white-space: nowrap 表示 在 显示 窗口 中 的 内 容 不 能 换行 。 在 CSS 中 ,white- 
space 属性 用 于 设置 如 何 处 理 元 素 内 的 空白 ,该 属性 支持 的 属性 值 的 意义 如 下 。 

(1) normal: 默认 值 , 表 示 空 白 会 被 浏览 器 忽略 。 

(2) pre: 表示 空白 会 被 浏览 器 保留 ,其 行为 方式 类 似 HTML 中 的 < pre > 标签 。 
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(3) nowrap: 表示 文本 不 会 换行 ,文本 会 在 同一 行 继续 ,直到 遇 到 < br > 标签 为 止 。 

(4) pre-wrap: 表示 保留 空白 符 序列 ,但 是 正常 地 进行 换行 。 

(5) pre-line: 表示 合并 空白 符 序列 ,但 是 保留 换行 符 。 

(6) inherit: 表示 规定 应 该 从 父 元 素 继承 white-space 属性 的 值 。 

此 实例 中 的 JS 代码 主要 用 于 定时 器 函数 setInterval() 改 变 图 片 的 显示 位 置 ,以 产生 不 断 深 动 的 
效果 。 

此 实例 的 源 文 件 名 是 myHtmlB202. html。 


349 “使 用 计时 器 实现 电话 在 桌面 上 震动 的 特效 


此 实例 主要 通过 使 用 计时 器 函数 setTimeout() 和 clearTimeout() 不 停 地 改变 元 素 的 左上 角 坐 标 
值 , 从 而 实现 类 似 于 电话 机 在 桌面 上 震动 的 特殊 动画 效果 。 当 在 Google Chrome 浏览 器 中 显示 该 页 
面 时 , 单 击 * 开 始 震 动 效果 ”按钮 , 则 电话 机 就 开始 在 办 公 桌 上 不 停 地 震动 ( 像 地 震 发 生 时 那样 ), 如 
图 349-1 所 示 ; 单 击 * 停 止 震动 效果 ?按钮 , 则 震动 结束 。 有 关 此 实例 的 主要 代码 如 下 。 
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<!doctype html ><html >< head >< meta charset = "UTF - 8"> 
<style> 
img { position: absolute; top: 30px; z- index: 999; } 
div { width: 450px; height: 350px;background - image: url(img/B230. jpg); 
background - size: 100% 100%; } 
input{ width:170px;} 
</style></head> 
<body><center> 
<p><input type = "button”value = "开始 震动 效果 "onclick = "myImage. start()"/> 
< input type = "button”value = "停止 震动 效果 ”onclick = "myImage. stop()"/></p> 
<div>< img src= "img/B066A. png" id = "myImg"></div> 
< script type = "text/javascript"> 
var m= document. getElementById( "myImg" ); 
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function SKclass(myPhone, Rate, speed) { 
var myLeft = myPhone. of fsetLeft; 
var myTop = myPhone. off setTop; 
this. stop = null; this.myTime = null; var myShake = this; 
this. start = function() { 

证 (parseInt(myPhone. style. left) == myLeft 一 2) { 
myPhone. style.top = myTop + 2+ "px" 
setTimeout( function() { 

myPhone. style. left = myLeft + 2+ "px" 
}, Rate) 
}else{ 
myPhone. style. top= myTop — 2 + "px"; 
setTimeout(function() { 
myPhone. style. left = myLeft ~ 2+ "px" 
}, Rate) } 
this. myTime = setTimeout( function() { 
myShake. start() 
}, speed); } 
this. stop = function() { clearTimeout(this.myTime); } } 
var myImage = new SKclass(m, 20, 70); 
</script ></center ></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,left 和 top 表示 电话 机 图 像 的 左上 角 
坐标 值 ,办 公 桌 是 另外 一 幅 图 像 ; setTimeout () 函数 用 于 在 指定 的 间隔 时 间 内 改变 此 坐标 值 。 
setTimeout() 函 数 的 语法 格式 如 下 。 

setTimeout (code, millisec) 

其 中 ,参数 code 表示 要 执行 的 JavaScript 代码 串 ( 此 实例 就 是 修改 电话 机 图 像 的 左上 角 坐 标 值 ) ; 
参数 millisec 规定 在 执行 代码 前 需要 等 待 的 毫秒 数 。 

clearTimeout() 函 数 则 用 于 取消 指定 的 setTimeout() 函 数 将 要 执行 的 代码 ,该 函数 的 语法 格式 
如 下 。 


clearTimeout (id) 


其 中 ,参数 id 是 setTimeout() 函 数 返 回 的 ID。 
此 实例 的 源 文件 名 是 myHtmlB230. html。 


350 ”使 虚线 边框 线 实现 跑马 灯 滨 动 效果 


此 实例 主要 使 用 setInterval() 函 数 不 断 改变 虚线 风格 的 边框 线 的 左上 角 坐 标 ,从 而 使 边框 线 实现 
跑马 灯 的 深 动 效果 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,图 像 周 围 的 4 条 边框 线 的 跑马 灯 
滚动 效果 如 图 350-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 





<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<script src= "js/jquery- 3.1.1.min. js"></script>< script type = "text/javascript"> 
$ (function() { 
setInterval(function() { ”// 动 态 改变 4 条 边框 线 的 左上 角 位 置 
var $left=$(".dashed— top").css("left"); 
var $ top=$ (".dashed - bottom").css("left"); 
$ left = parseInt( $ left); $ top= parseInt( $ top); 
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if ($1eft<0) { 
$ left +=2; 
} else { 
$ left =— 1400; 
} 
证 ($top>-1000) { 


$ top—= 2; 
} else{ 
$ top= 0; 


} 
$ (".dashed— top").css("left", $ left+ "px"); 
$(".dashed— right").css("top", $ left+"px"); 
$ (".dashed— bottom").css("left", $ top+"px"); 
$ (".dashed— left").css("top", $ top+"px"); 
}, 60); }); 
</script > 
<style type= "text/css"> 
.dashed - box { width: 400px; height: 280px; overflow: hidden; position: relative; } 
/* 上 边框 线 * / 
.dashed - top { width: 2000px; height : 0px; border - bottom: 2px black dashed; 
position: absolute; top: 0; left: — 1400px;} 
/* 左 边框 线 */ 
.dashed - left { width: Opx; height: 2000px;border - left: 2px black dashed; 
position: absolute; left: 0; top: - 1600px; } 
/* 下 边框 线 */ 
.dashed - bottom { width: 2000px; height: 0px; border - bottom: 2px black dashed; 
position: absolute; left: Opx; bottom: 0;} 
/* 右边 框 线 */ 
.dashed - right { width: Opx; height: 2000px; border - left: 2px black dashed; 
position: absolute; right: 0; top: — 1600px; } 
</style></head> 
<body><center ><div class = "dashed - box">< img src = "ing/B235. jpg"> 
<divclass="dashed— top"></div>< div class = "dashed — left"></div> 
<divclass= "dashed - right"></div><div class = "dashed- bottom"></div ></div> 
</center ></body ></html > 
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上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 .border-bottom: 2px black dashed 用 
于 设置 该 div 元 素 的 底部 边框 线 为 2px 的 黑色 虚线 .由 于 该 div 元 素 的 height 为 0px, 因 此 该 div 元 素 
(上 边框 线 ) 显 示 的 即 是 一 条 虚线 ,而 不 是 一 个 虚线 围绕 的 方 框 ,其 他 3 条 虚线 的 原理 与 之 类 似 ; top: 
0; left: 一 1400px 表示 div 元 素 ( 上 边框 线 ) 的 左上 角 和 坐标 ; setInterval( ) 函数 则 主要 用 于 在 
JavaScript 代码 中 动态 改变 4 条 边框 线 的 左上 角 坐 标 。setInterval( ) 函数 可 按照 指定 的 周期 (以 毫秒 
计 ) 来 调用 函数 或 计算 表达 式 。setInterval( ) 图 数 会 不 停 地 调用 代码 ,直到 clearInterval() 函 数 被 调用 
或 窗口 被 关闭 。 由 setInterval() 函 数 返回 的 ID 值 可 用 作 clearInterval() 函数 的 参数 。setInterval() 
函数 的 语法 如 下 。 





setInterval(code, millisec[, "lang"]) 


其 中 ,参数 code 表示 要 调用 的 函数 或 要 执行 的 代码 串 ; 参数 millisec 表示 周期 性 执行 或 调用 
code 之 间 的 时 间 间 隔 , 以 毫秒 计 。 该 函数 的 返回 值 可 传递 给 clearInterval() 函 数 ,从 而 取消 对 code 的 
周期 性 执行 。 

此 实例 的 源 文件 名 是 myHtmlB235. html。 


351 使 用 定时 器 高 仿 改变 进程 的 图 文 进 度 条 


此 实例 主要 在 定时 器 setJnterval() 函数 中 改变 元 素 (div) 的 属性 (width) ,从 而 高 仿 改变 进程 的 图 
文 进 度 条 的 动态 执行 效果 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,绿色 的 进度 条 将 从 0 逐渐 
填充 到 宽度 值 300px, 效 果 如 图 351-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<script src= "js/jquery -3.1.1.min. js"></script >< script type = "text/javascript"> 
$ (document). ready(function() { 
Var myWidth= 0; 
var timer = setInterval(function() {// 通 过 定时 器 模拟 进度 的 改变 
if (myWidth== 301) { return; } 
$ (".myBackground").css("width", myWidth+ "px"); 
$ ("p").text(" 已 完成 : "+ ((myWidth/301) x 100). toFixed(0) +"%"); 
myWidtht++; 
}, 10); }); 
</script> 
<style type= "text/css"> 
/* 设置 进 度 条 盒子 样式 */ 
.myBorder { margin: 30px auto; width: 300px; height: 20px; border— radius: 2px; 
border : 1px solid green; text - align: center; overflow: hidden; } 
/* 设置 进 度 条 填充 部 分 样式 */ 
.myBackground { width: Opx; height: 20px; 
border - radius: 2px; background— color: #00FF00; } 
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/* 设 置 进 度 指示 文字 样式 */ 
p {margin: ~ 19px; font - size: 14px; } 
</style></head> 
<body >< div class = "myBorder">< div class = "myBackground"></div> 
<p> 已 完成 : 0%</p></div></body></htnl1> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , $ (". myBackground")，css("width"， 
myWidth 十 "px") 用 于 设置 已 经 完成 部 分 的 div 块 的 宽度 ; setInterval() 函数 用 于 间隔 指定 的 毫秒 数 
不 停 地 执行 指定 的 代码 ,此 处 即 是 改变 div 块 的 宽度 。 

此 实例 的 源 文件 名 是 myHtmlB335. html。 


352 ”通过 2D 旋转 方式 模拟 走动 的 时 钟表 盘 


此 实例 主要 使 用 setInterval() 函 数 和 rotate() 方 法 不 断 改变 时 、 分 、 秒 指针 的 旋转 角度 ,从 而 实现 
动态 走动 的 时 钟表 盘 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,动态 走动 的 时 钟表 盘 如 图 352-1 
所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 352-1 


<!doctype html ><html ><head>< meta charset = "UTF - 8"> 
<script src= "js/jquery - 3.1.1.min. js"></script >< script type = "text/javascript"> 

$ (function() { 

Var clock = document. getElementById("clock"); 

function initNumXY() { //1 一 12 数字 的 位 置 设置 
var radius = 160; 
var dot_num = 360/ $ (". dot"). length; // 每 个 div 对 应 的 弧度 数 
var ahd = dot_num * Math. PI/180; // 每 个 dot 对 应 的 弧度 
$ (".dot").each(function(index, el) { 

$ (this).css({"left": 180 + Math. sin( (ahd * index)) * radius, 
"top": 180 + Math. cos( (ahd * index)) * radius }); }); 
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for (var i=0; i<60; it+) { // 刻 钟 设置 (一 小 时 四 刻 钟 ) 
clock. innerHTML += "<div class= 'clock- scale'> "十 
"< div class ='scale- hidden'></div>”+ "<div class='scale— show'></div>" +"</div>"; } 
var scale = document. getElementsByClassName("clock - scale" ); 
for (var i=0; i<scale. length; i++) { 
scale[ i]. style. transform= "rotate("+ (ix6-90)+"deg)"; } } 
initNumXY( ); // 显 示 小 时 刻度 值 
// 动 态 获取 日 期 .时间 信息 
var hour_line = document. getElementById("hour line"), 
minute_line = document. getElementById("minute_line")， 
second line = document. getElementById("second line"), 
date info= document. getElementById("date info"), 
hour time = document. getElementById("hour time"), 
minute time = document. getElementById( "minute time"), 
second_time = document. getElementById(" second_time" ); 


function setTime() { // 根 据 时 间 信 息 旋转 时 ,分 ,秒针 
var nowdate = new Date( ); 
var year = nowdate. getFullYear(), // 获 取 年 月 日. 时、 分. 秒 


month = nowdate. getMonth() +1, 
day = nowdate. getDay( ), 
hours = nowdate. getHours(), 
minutes = nowdate. getMinutes( ), 
seconds = nowdate. getSeconds( ), 
date = nowdate. getDate( ); 
var weekday = [" 星 期 日 "," 星 期 一 "," 星 期 二 ",“" 星 期 三 ", "星期四", "星期 五 "," 星 期 六 "]; 
date info. innerHTML = year + "年 "+ month+ "月 "+ date+ "日 "+weekday[day]; 
hour _time. innerHTML = hours>=10 ? hours : "0" + hours; 
minute time. innerHTML = minutes>= 10 ? minutes : "0" + minutes; 
second time. innerHTML = seconds>= 10 ? seconds : "0" + seconds; 
// 旋 转 时 、 分 ,秒针 
var hour_rotate= (hours* 30— 90) + (Math. floor(minutes/12) * 6); 
hour_line. style. transform = 'rotate('+ hour_rotate + 'deg)'; 
minute_ line. style. transform= 'rotate('+ (minutes*6— 90) +'deg)'; 
second_line. style. transform= 'rotate('+ (seconds * 6 — 90) +'deg)'; 
} 
setInterval(setTime, 1000); }); 
</script > 
<style type= "text/css"> 
body, div, p { font— family: 'Microsoft Yahei'; font- size: 14px;} 
.myBox { width: 400px; height: 400px; border: Opx solid black; 
margin - top: 30px; border— radius: 50 % ;position: relative; 
/* 设置 刻度 盘 的 外 阴影 */ 
box - shadow: Opx Opx 20px 3px #444; } 
.box { width: 400px; height: 400px; position: relative; 
border: Opx solid black; border — radius: 50%; 
/* 设 置 刻度 盘 的 内 阴影 * / 
box - shadow: 0px 0px 20px 3px #444 inset;} 
/* 中 心 点 * / 
. origin { width: 20px; height: 20px; border - radius: 50%; top: 190px; left: 190px; position: 
absolute; background: - webkit - repeating - radial - gradient(yellow, green 5px, red 7px, white 8px); } 
/* 指 针 */ 
.clock line { position: absolute; z- index: 20;} 
/* 时 针线 x*/ 
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.hour_line { width: 100px; height: 4px; top: 198px; left: 200px; background - color: black; border— 
radius: 2px; transform— origin: 0 50% ;box— shadow: lpx -3px 8px 3px #AAA; } 
/x* 分 针线 */ 
.minute line {width: 130px; height: 2px; top: 199px; left: 190px; 
background — color: black;transform— origin: 7.692% 50%; 
box - shadow: 1px — 3px 8px 1px # AAA;} 
/x* 秒针 线 */ 
. second_ line { width: 170px; height: lpx; top: 199. Spx; left: 180px; background - color: red; 
transform— origin: 11.765% 50% ;box- shadow: lpx — 3px 7px 1px # BBB; } 
-dot box { width: inherit; height: inherit; } 
/* 时 钟 数 * / 
.dot { width: 40px; height: 40px; line — height: 40px; text - align: center; font — size: 22px; 
position: absolute; font— weight: bold; } 
.Clock— scale { width: 195px; height: 2px; transform— origin: 0O% 50%; 
z- index: 7;position: absolute; top: 199px; left: 200px;} 
.scale— show { width: 12px; height: 2px; background- color: #555; float: left;} 
.scale— hidden { width: 183px; height: 2px; float: left; } 
/* 日 期 :2017 年 3 月 22 日 星期 三 * / 
.date_info { width: 160px; height: 28px;line— height: 28px; text - align: center; position: absolute; 
z- index: 11; top: 300px; left: 120px;color: black; font - weight: bold; } 
/x* 以 数字 显示 时 .分 、 秒 :大 框 09 39 12* / 
.time_info { width: 110px;height: 35px;line— height: 35px; text ~ align: center; position: absolute; 
top: 260px; left: 150px;z - index: 11; color: white; background: black; border - radius: 5px;} 
/* 以 数字 显示 时 .分 . 秒 : 小 框 09 * / 
.time { width: 35px; height: 35px;float: left; color: yellow;font — size: 22px;} 
#minute time { border — left: 1px solid white;border - right: 1px solid white; } 
</style></head> 
<body>< center >< div class = "myBox"><div class = "box" id= "clock"> 
<div class= "origin"></div>< div class = "dot_ box"> 
<divclass="dot">6 </div><div class= "dot">5</div><div class= "dot"> 4</div> 
<divclass= "dot">3</div><div class = "dot">2</div><div class= "dot"> 1</div> 
<divclass= "dot">12 </div><div class= "dot"> 11 </div><div class = "dot">10 </div> 
<divclass= "dot">9 </div><div class = "dot"> 8 </div> 
<divclass="dot">7</div></div> 
<-- 时 ,分 .秒针 --> 
<divclass="clock line hour line" id= "hour line"></div> 
<divclass= "clock line minute line" id= "minute line"></div> 
<divclass="clock line second line" id= "second line"></div> 








ek 
<div class= "date info" id= "date_info"></div> 
<L== 附则 于 = 


<divclass= "time_ info">< div class = "time" id= "hour time"></div> 
<divclass= "time” id = "minute time"></div> 
<divclass= "time” id = "second time"></div></div></div></div></center> </body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,getFullYear( ) 方 法 用 于 获取 一 个 表 
示 年 份 的 4 位 数字 ; getMonth() 方 法 用 于 获取 表示 月 份 的 数字 ; getDate() 方 法 用 于 获取 月 份 的 某 一 
天 的 数字 ; getDay 0 〇 方法 用 于 获取 表示 星期 的 某 一 天 的 数字 ; getHours() 方 法 用 于 获取 时 间 的 小 时 
字段 ; getMinutes ( ) 方 法 用 于 获取 时 间 的 分 钟 字段 ; getSeconds ( ) 方 法 用 于 获取 时 间 的 秒 数 ; 
setInterval() 函 数 可 按照 指定 的 周期 (以 毫秒 计 ) 来 调用 函数 或 计算 表达 式 。 上 述 内 容 属 于 JavaScript 
部 分 。 在 CSS3 中 ,transform 属性 负责 向 元 素 应 用 2D 或 3D 转换 ,该 属性 允许 对 元 素 进行 旋转 、 缩 
放 、 移 动 或 倾斜 。 在 此 实例 中 ,hour_line. style. transform 一 'rotate(' 十 hour_rotate 十 'deg) ' 即 是 通过 
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指定 的 小 时 数 ( 通 过 JavaScript 获取 ) 旋 转 时 针 ; setInterval(setTime， 1000) 则 用 于 每 隔 1 秒 执行 旋 


转 和 检测 时 、 分 、 秒 的 动作 。 
此 实例 的 源 文件 名 是 myHtmlB244. html。 


353 ”在 单行 菜单 中 以 下 拉 方 式 滑 出 焦点 菜单 


此 实例 主要 使 用 jQuery 的 animate() 方 法 改变 元 素 的 top 值 . 从 而 实现 在 单行 菜单 中 以 下 拉 方 式 
滑 出 焦点 菜单 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,如 果 和 鼠标 指针 甚 浮 在 “行政 审批 "菜单 


项 上 , 则 将 从 上 向 下 滑 出 蓝 色 的 焦 ‘ 








菜单 “行政 审批 ”, 如 图 353-1 所 示 。 当 然 ,如 果 鼠 标 指针 悬浮 在 其 
他 菜单 项 上 ,也 能 实现 类 似 的 效果 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 353-1 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<script src= "js/jquery -3.1.1.min.js"></script >< script type = "text/javascript"> 
$ (document). ready(function() { 
$ ("#myMenu li a").wrapInner('< span class = "out"></span>'); 
$ ("#myMenu lia").each(function() { 
$ ('<span class = "over">'+$ (this).text() +'</span>').appendTo(this); }); 
// 响 应 鼠标 指针 拔 浮 于 每 个 菜单 项 
$ ("#myMenu 1ia").hover(function() { // 鼠 标 指标 进入 时 响应 
$(".out", this). stop().animate({'top': '48px'}，300) 
$(".over"，this). stop().animate({'top': '0px'}，300); 
}, function() { // 鼠 标 指标 离开 时 响应 
$(".out", this). stop().animate({'top': '0px'}, 300); 
$(".over", this). stop().animate({'top': '— 48px'}, 300); });}); 
</script> 
< style type = "text/css"> 
.menu { height: 48px; display: block; padding: Opx; 
width: auto; margin: 5px auto 0 auto; } 
.menu ul { list - style: none; padding: 0; margin: 0; } 
.menu ul li { float: left; overflow: hidden; position: relative; 
1line - height: 48px; text— align: center; margin— right: lpx; } 
.menu ul lia { position: relative; display: block; width: 111px; height: 48px; font - size: 18px; text 
— decoration: none; cursor: pointer; line— height: 48px; font - weight: bold; } 
.menu ul lia span { position: absolute; left: 0; width: 11lpx;} 
.menu ul lia span.out { top: Opx; } 
.menu ul lia span. over, .menu ul lia span.bg { top: ~ 48px;} 
井 myMenu { background - color: red; overflow: hidden; } 
#myMenu ul lia { color: yellow; } 
#myMenu ul 1i a span. over { background — color: blue; } 
</style></head> 
<body ><div id = "myMenu" class = "menu"> 
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<ul><1i><a href ="# "> 政府 信息 </a></1i><1i><a href = "#"> 街 镇 部 门 </a></1i> 
<1i><a href =" 间 "> 行政 审批 </a></1i><1i><a href =" 井 "> 互动 交流 </a></1i> </ul></div></body> 
</html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,animate({'top': '48px')},300) 表 示 
在 300 毫秒 内 将 菜单 的 top 属性 值 由 之 前 的 数字 改变 为 48px, 即 菜单 向 下 滑 出 48px。 在 jQuery 中 ， 
animate() 方 法 执行 CSS 属性 集 的 自 定义 动画 ,该 方法 有 两 种 形式 ,实例 所 使 用 形式 的 语法 格式 如 下 。 
站 
其 中 ,参数 styles 规定 产生 动画 效果 的 CSS 样式 和 值 ; 参数 options 是 可 选 参数 ,规定 动画 的 额 
外 选项 。 
可 能 的 值 如 下 。 
(1) speed: 设置 动画 的 速度 ,可 能 的 值 为 毫秒 (比如 300) slow normal ,fast, 例 如 animate({ 'top' 
"48px')}, "slow")。 
(2) easing: 规定 要 使 用 的 easing 函数 。 
(3) callback: 规定 动画 完成 之 后 要 执行 的 函数 。 
4) step: 规定 动画 的 每 一 步 完 成 之 后 要 执行 的 函数 。 
(5) queue: 布尔 值 ,指示 是 否 在 效果 队列 中 放置 动画 ,如 果 为 false, 则 动画 将 立即 开始 。 
(6) specialEasing: 来 自 styles 参数 的 一 个 或 多 个 CSS 属性 的 映射 ,以 及 它们 的 对 应 easing 函数 。 
stop() 方 法 用 于 停止 当前 正在 运行 的 动画 ; appendTo() 方 法 用 于 在 被 选 元 素 的 结尾 (仍然 在 内 
部 ) 插 入 指定 内 容 。 
此 实例 的 源 文 件 名 是 myHtmlB248. html。 


354 在 延迟 指定 时 间 后 执行 显示 或 隐藏 元 素 


此 实例 主要 通过 设置 visibility 和 transition-delay 属性 实现 在 延迟 指定 时 间 后 执行 显示 或 隐藏 元 
素 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,根据 超 链 接 * 鼠 标 在 此 停留 5 秒 , 即 出 现 美景 ; 鼠标 
离开 此 地 3 秒 ,美景 即 消失 ”的 提示 执行 鼠标 操作 , 即 可 实现 文字 所 述 的 功能 ,如 图 354-1 所 示 。 有 关 
此 实例 的 主要 代码 如 下 。 
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<!doctype html >< html >< head >< meta charset = UIF -8> 
< style type = "text/css"> 
.trans— delay { - webkit-transition: visibility 2s linear; } 
. image — delay { margin: 5px; visibility: hidden; —webkit— transition— delay: 1s; } 
. hover — delay:hover .image— delay { visibility: visible; 
— webkit — transition- delay: 3s; } 
img{ border - radius: 10px;} 
</style></head> 
<body><center > < div class = "hover - delay"> 
<a href ="##"> 和 鼠标 在 此 停留 5 秒 , 即 出 现 美景 ; 鼠标 离开 此 地 3 秒 ,美景 即 消失 </a> 
< img src= "img/B156A. jpg" class = "trans— delay image— delay"/></div> </center ></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,transition-delay 属性 规定 过 渡 效 果 
何 时 开始 ,其 值 以 秒 或 毫秒 计 ; -webkit-transition-delay: 3s 表示 延迟 3 秒 过 渡 到 下 一 状态 。visibility 
属性 用 于 设置 或 检索 是 否 显示 对 象 (元 素 ) ,与 display 属性 不 同 , 此 属性 为 隐藏 的 对 象 保留 其 占据 的 
物理 空间 。 

visibility 属性 的 语法 格式 如 下 。 

visibility:visible | hidden | collapse 

其 中 ,visible 属性 值 用 于 设置 对 象 可 视 ; hidden 属性 值 用 于 设置 对 象 隐藏 ， collapse 属性 值 主 要 
用 来 隐藏 表格 的 行 或 列 ,隐藏 的 行 或 列 能 够 被 其 他 内 容 使 用 ,对 于 表格 外 的 其 他 对 象 , 其 作用 等 同 于 
hidden 。 


此 实例 的 源 文件 名 是 myHtmlB175. html。 


355 ”使 用 gif 格式 的 图 像 实现 边框 线 跑 马 灯 效果 


此 实例 主要 通过 使 用 gif 动画 图 像 实现 边框 线 的 跑马 灯 走 动 效 果 。 当 在 Google Chrome 浏览 器 
中 显示 该 页 面 时 ,黑白 相间 的 边框 线 像 跑马 灯 一 样 不 停 走动 ,如 图 355-1 所 示 。 有 关 此 实例 的 主要 代 
码 如 下 。 
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图 355-1 
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<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
< style type= "text/css"> 
.myBox { margin: 10px auto; overflow: hidden; 
/* 盒 子 的 宽度 和 高 度 始终 比 图 像 大 = / 
width: 408px; height: 258px; background: url( img/B359. gif); } 
.myImage { position: absolute; margin: 4px 4px; display: block; 
/x* 图 像 的 宽度 和 高 度 * / 


width: 400px; height: 250px;background: url(img/B359. jpg) no - repeat;} 
</style></head> 





<body>< div class = "myBox"> <div class = "myJImage"> </div> </div></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 此 实例 的 代码 比较 简单 .就 是 在 如 图 355-2 所 示 的 gif 
动画 图 像 上 面 大 加 一 幅 普 通 图 像 ,因为 动画 图 像 比 普通 图 像 稍 大 .多 出 的 部 分 就 像 是 普通 图 像 的 边框 
线 , 边 框 线 的 跑马 灯 走 动 效 果 则 是 由 gif 动画 图 像 自 身 的 变化 实现 的 。 

此 实例 的 源 文 件 名 是 myHtmlB359. html。 
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356 ”在 页 面 中 嵌入 播放 swf 等 格式 的 动画 文件 


此 实例 主要 通过 使 用 <embed > 标签 实现 在 页 面 中 嵌入 播放 swf 等 格式 的 动画 文件 。 当 在 浏览 器 
中 显示 该 页 面 时 将 自动 播放 动画 文件 A003. swf, 如 图 356-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 


| 








国 localhost63342/myWor x 


c localhost:63342/myWork/myHtr 放 | 三 





<!doctype html >< html ><head >< meta charset = UTF - 8></head> 


<body>< section align = "center"> < embed src = "media/A003. swf" width = "400px" height = "100px"/> 
</section> </body ></html > 





上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,<embed > 标签 用 于 定义 嵌入 的 内 容 ， 
比如 插件 ,该 标签 是 HTML5 中 的 新 标签 。< embed > 标签 的 属性 说 明 如 表 356-1 所 示 。 


表 356-1 <embed > 标签 的 属性 及 说 明 








属 性 值 描述 
height pixels 设置 嵌入 内 容 的 高 度 
src url 嵌入 内 容 的 URL 
type type 定义 嵌入 内 容 的 类 型 
width pixels 设置 店 入 内 容 的 宽度 


此 实例 的 源 文件 名 是 myHtmlA003. html。 


357 使 用 SVG 矢量 图 形 模拟 水 波 特效 文字 


此 实例 主要 通过 使 用 SVG 矢量 图 形 实现 水 波动 画 的 特效 文字 。 当 在 Google Chrome 浏览 器 中 
显示 该 页 面 时 ,青色 的 水 波 不 停 地 在 文字 上 晃动 ,如 图 357-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
< style type = "text/css"> 
/* 设 置 页 面 背景 的 基本 样式 */ 
body { text ~ align: center; background: lightgrey; 
background — size: cover; background— position: 50%; } 
</style></head> 
<body>< div align = "center"> 
<svgx="0px" y= "0px" width = "720px" height = "250px" xml:space= "preserve"> 
<defs><pattern id= "water" width= "0.25" height = "1.1" patternContentUnits = 
"objectBoundingBox"> 
<path fill= "#000" d= "M0.25, 1H0c0, 0, 0 — 0.659,0— 0.916c0. 083 - 0. 303,0.158,0. 334, 
0.25, 0C0.25, 0.327, 0.25, 1,0.25, 1z"/></pattern> 
<text id= "text" transform= "translate( - 2,200)" font - family= "微软 雅 黑 " 
font - size = "120"> 炫 酷 实例 集锦 </text > 
<mask id= "text — mask"><use x= "0" y= "0" xlink:href ="#text" opacity= "1" fill= "cyan"/></mask> 
<g id= "eff"><use x="0" y="0" xlink:href = "#text" fill = "cyan"/> 
<rect class= "water — fill" mask= "url(#text— mask)" fill= "url(#water)" x="— 300" 
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y= "150" width= "1200" height = "180" opacity = "0. 5"> 
< animate attributeType = "xml" attributeName = "x" from = "- 300" to="0" repeatCount = 
"indefinite" dur = "2s"/></rect > 
<rect class= "water — fill" mask = "url(# text — mask)" fill = "url(#water)" y= "145" width = 
"1600" height = "180" opacity = "0. 5"> 
< animate attributeType = "xml" attributeName ="x" from="— 400" to= "0" repeatCount = 
"indefinite" dur = "3s"/></rect> 
<rect class= "water - fill" mask ="url(#text— mask)" fill = "url(#water)" y= "155" width = 
"800" height = "180" opacity= "0.5"> 
< animate attributeType = " xml" attributeName = "x" from ="”- 200" to = "0" repeatCount = 
"indefinite" dur = "1.4s"/></rect > 
<rect class= "water - fill” mask = "url(# text — mask)" fill = "url(#water)" y= "155" width= 
"2000" height = "180" opacity = "0. 5"> 
< animate attributeType = " xml" attributeName = "x" from="- 500" to="0" repeatCount = 
"indefinite" dur = "2.8s"/></rect ></g></defs> 
<use xlink:href ="#eff" opacity= "0.9" style= "mix- blend- mode:color - burn"/> 
</svg></div></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,标签 < svg ></svg > 中 的 代码 是 符合 
SVG 规范 的 代码 。SVG 是 可 伸缩 矢量 图 形 (Scalable Vector Graphics) 的 缩写 , 它 使 用 XML 格式 定 
义 图 形 图 像 , 图 像 在 放大 或 改变 尺寸 的 情况 下 质量 不 会 有 所 损失 ,SVG 与 诸如 DOM 和 XSL 之 类 的 
W3C 标准 是 一 个 整体 。Internet Explorer 9、 火 狐 、Google Chrome、Opera 和 Safari 浏览 器 都 支持 
SVG。 在 Google Chrome 浏览 器 中 可 以 直接 在 HTML 代码 中 插入 SVG 代码 。 

此 实例 的 源 文件 名 是 myHtmlAl81. html。 


358 在 SVG 中 实现 文字 沿 三 角形 的 边线 跑 动 
此 实例 主要 通过 使 用 SVG 的 animateMotion 动画 实现 文字 沿 着 三 角形 的 3 条 边线 逆 时 针 跑 动 。 


当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 .文字 * 酷 ”立即 沿 着 三 角形 的 3 条 边线 逆 时 针 跑 动 ,图 
358-1 所 示 的 效果 是 酷 " 字 在 右边 线 的 情形 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 358-1 
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<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<style type= "text/css"> 
.svg - defs { position: absolute; } 
.texts { text — align: center; width:460px; height :460px; } 


/* 设 置 文字 的 基本 样式 * / 
.myText { fill: url(#p- stripes); font— size: 5px; font ~ weight: bold; } 
</style></head> 


<body >< div align = "center"> 
<svg class= "svg- defs"><g><defs> 
<! -- 设 置 路 径 是 一 个 三 角形 --> 
<path id= "MYPathl" d= "M250 20 L 70 370 L 450 370 Z" transform= "scale(1)"/> 
<! -- 设 置 文字 符号 在 三 角形 路 径 上 的 渐变 颜色 -一 > 
<1linearGradient id= "MyGradient" xl= "0" yl = "0" 
< stop offset ="0%" stop- color = "crimson"/> 
<stop offset ="10%" stop- color = "red"/> 


x2="100%" y="0%"> 








< stop offset ="20%" 
<stop offset ="30%" 
<stop offset ="40%" 
<stop offset ="50%" 
<stop offset ="60%" 
<stop offset ="70%" 
<stop offset ="80%" 
<stop offset ="90%" 


stop— colol 
stop— color 
stop— colol 
stop— color 
stop— color = "green"/> 

stop— color = "steelblue"/> 

stop— color = "mediumpurple"/> 

stop - color = "purple"/></linearGradient > 













<pattern id= "p- stripes" patternUnits = "userSpaceOnUse" width="100%" height = "100%"> 
<rect width= "460" height = "460" fill = "url(#MyGradient)"/> 
</pattern></defs> </g></svg> 
<svgclass="texts"> 
<text class = "myText" transform= "translate(0)"> 
< textPath xlink:href =" 提 MyPathl">++++ 十 十 二 十 十 二 十 十 十 二 十 十 十 二 十 十 十 十 十 十 二 十 十 十 十 十 十 十 十 十 十 十 十 十 十 二 十 十 十 十 十 十 十 十 十 十 
十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 
十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 二 + 十 </textPath ></text> 
<g transform = "translate(0, 0)"> < text id = "TextElemnent" x= "0"yY="0" style = "font - family: 
Verdana; font - size: 29px"> 酷 
< animateMotion path ="M 250 20 L 70 370 L 450 370 Z" dur ="5s" fill = 
"auto— reverse"/></text > 
</g></svg></div></body ></html > 


"freeze” rotate = 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,< animateMotion path 一 "M 250 20 工 
70 370 L 450 370 Z" dur 二 "5s" fill 一 "freeze” rotate 一 "auto-reverse"/> 用 于 实现 文字 的 跑 动 。 其 中 ， 
path 一 "M 250 20 L 70 370 L 450 370 Z" 用 于 指明 文字 的 跑 动 路 径 是 一 个 三 角形 ,此 三 角形 本 身 是 不 
可 见 的 ,为 了 便于 在 插图 中 显示 这 种 效果 ,前 面 用 专门 的 代码 绘制 了 此 三 角形 ; rotate 一 "auto- 
reverse" 用 于 使 文字 * 酷 "在 不 同 的 位 置 自动 调整 自己 的 方向 ; dur 一 示 动 画 的 持续 时 间 是 5 秒 ; 
fl 一 "freeze" 表 示 在 动画 结束 后 文字 * 酷 ”自动 停留 在 最 后 的 位 置 。 

此 实例 的 源 文件 名 是 myHtmlA217. html。 


359 在 SVG 中 实现 文字 沿 螺旋 线 跑 动 消失 


此 实例 主要 通过 使 用 SVG 的 animate 动画 实现 文字 沿 着 展开 的 螺旋 线 跑 动 消失 。 当 在 Google 
Chrome 浏览 器 中 显示 该 页 面 时 .文字 “ 关 关 有 歇 鸠 …” 立 即 沿 着 螺旋 线 轨 迹 跑 动 (设置 stroke 一 "red" 即 
可 看 到 红色 的 螺旋 线 ) ,如 图 359-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 


5s 
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<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<style type = "text/css"> 
.mySVG { text -align: center; 
width: 460px; height: 460px; } 
#myTextPath {font - family: Verdana;font - size: 28px;} 
</style></head> 
<body>< div align = "center"> 
<svg class= "mySVG"> 
<path id= "myPath" d= "M153 334 C153 334 151 334 151 334 
C151 339 153 344 156 344 C164 344 171 339 171 334 C171 322 164 314 156 314 
C142 314 131 322 131 334 C131 350 142 364 156 364 C175 364 191 350 191 334 
C191 311 175 294 156 294 C131 294 111 311 111 334 C111 361 131 384 156 384 
C186 384 211 361 211 334 C211 300 186 274 156 274" 
stroke = "white" fill = "none"” transform = "scale(3),translate( - 90,— 270)"/> 
<text > <textPath id = "myTextPath" xlink:href ="#myPath"> 
关 关 有 瞧 鸠 ,在 河 之 洲 。 穷 罕 淑 女 , 君 子 好 述 。 参 差 荐 菜 ,左右 流 之 。 窃 穹 淑女 , 窒 襟 求 之 。 求 之 不 得 , 鹤 麻 思 
服 。 悠 哉 悠哉 , 辑 转 反 侧 。 参 差 基 菜 , 左右 采 之 。 窃 究 淑女 ,琴瑟 友之 。 参 差 荐 菜 ,左右 苇 之 。 窃 究 淑 女 , 钟 鼓乐 
之 。</textPath></text > 
<animate xlink:href = "# myTextPath" attributeName = " startOffset" from="0%" to="100%" begin= 
"0s"” dur= "25s" repeatCount = "indefinite" keyTimes = "0;1" calcMode = "spline" keySplines = "0.1 0.2 
0.22 1"/></svg> 
</div></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,< path id 二 "myPath" d 二 "M153 
334 C153 334 151 334 151 334 C15]1 339 153 344 156 344 C164 344 171 339 171 334 C171 322 
164 314 156 314 C142 314 131 322 131 334 Cl131 350 142 364 156 364 C175 364 191 350 191 
334 C191 311 175 294 156 294 Cl131 294 111 311 111 334 Cl1l1l1 361 131 384 156 384 C186 384 
211 361 211 334 C211 300 186 274 156 274” stroke="white” fil="none” transform="scale(3), 
translate( 一 90, 一 270)"/> 用 于 以 路 径 的 方式 创建 螺旋 线 ,d 属性 值 创建 的 螺旋 线 其 实 非常 小 ,因此 使 
用 了 transform 一 "scale(3) .translate( 一 90 .一 270) "进行 放大 平移 处 理 ; stroke 一 "white" 用 于 设置 
螺旋 线 的 颜色 ,此 处 设置 为 与 背景 相同 的 白色 ,实际 上 就 是 不 显示 。 
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< animate xlink: href="# myTextPath" attributeName 一 "startOffset” from="0%" to= 
"100%" begin="0s" dur="25s" repeatCount= "indefinite"keyTimes="0;1" calcMode= "spline" 
keySplines 一 "0. 1 0.2 0. 22 1"/> 用 于 配置 动画 参 数 ,from 属性 规定 动画 起 始 值 ,如果 起 始 值 和 默认 值 
相同 ,from 可 以 省 略 ; to 属性 规定 动画 的 终止 值 ; dur 属性 表示 持续 时 间 ; calcMode 属性 表示 动画 在 
持续 时 间 中 的 工作 模式 ; attributeName 属性 规定 元 素 的 哪个 属性 会 产生 动画 效果 .此 实例 即 是 字符 
串 的 开始 位 置 。 

此 实例 的 源 文件 名 是 myHtmlA218. html。 


360 ”使 用 SVG 的 animateTransform 旋转 图 像 


此 实例 主要 在 SVG 的 <image > 标签 中 嵌入 <animateTransform > 标签 ,从 而 实现 <image> 标 签 代 
表 的 图 像 根 据 < animateTransform > 标签 指定 的 属性 值 进行 旋转 的 效果 。 当 在 Google Chrome 浏览 
器 中 显示 该 页 面 时 , 单 击 图 像 , 图 像 则 自动 围绕 中 心 旋转 一 周 , 如 图 360-1 所 示 。 有 关 此 实例 的 主要 
代码 如 下 。 
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<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
< script src= "js/jquery - 3.1.1.min. js"></script>< script type= "text/javascript"> 
$ (function() { 
$ ("image").click(function() {  ”// 单 击 图 像 即 可 旋转 图 像 
var myAnimate = document. getElementsByTagName( "animateTransform")[0]; 
myAnimate. beginElement( ); 
D7}); 
</script> 
<style type= "text/css"> 
.mySVG { width: 410px;height: 410px;} 
</style></head> 
<body>< div align = "center">< svg class = "mySVG"> 
< image width = "200" height ="200" x= "103" y="50" xlink:href ="img/A222. jpg"> 
<animateTransform dur = "2s" attributeName = "transform" type = "rotate" from= "0,203,150" to = "360, 
203, 150"/></image></svg></div></body></html > 
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上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,< animateTransform dur 一 "2s" 
attributeName= "transform" type 二 "rotate" from 二 "0,203,150” to 二 "360,203, 150"/> 表 示 在 2 秒 
的 时 间 内 以 (203, 150) 点 为 中 心 旋 转 360"。 如 果 需 要 让 旋转 动画 永 不 停歇 , 则 应 该 设置 repeatCount 
属性 值 为 indefinite, 即 < animateTransform dur 一 "2s”attributeName 一 "transform”repeatCount 一 
"indefinite” type= "rotate" from="0,203, 150" to 一"360,203.150"/>。 

此 实例 的 源 文件 名 是 myHtmlA222. html。 


361 使 用 SVG 的 animate 组 合 多 种 动画 特效 


此 实例 主要 在 SVG 的 < image > 标签 中 嵌入 多 个 < animate > 标签 ,从 而 实现 < image > 标签 代表 的 
足球 根据 < animate > 标签 指定 的 属性 值 改变 位 置 和 透明 度 。 当 在 Google Chrome 浏览 器 中 显示 该 页 
面 时 ,足球 将 从 左下 角 向 右上 和 角 飞 去 ,在 飞 去 的 过 程 中 透明 度 将 逐渐 减 小 ,直到 消失 , 当 足 球 接近 右上 
角 的 时 候 效 果 如 图 361-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 361-1 


<!doctype html ><html ><head>< meta charset = "UTF - 8"> 
< style type = "text/css"> 
.mySVG { width: 400px;height: 250px; 
background: url( img/B340. jpg) ;background — size: auto;} 
</style></head> 
<body>< div align = "center"> 
<svg class= "mySVG"> 
< image width = "35" height = "35" x="30" y= "150" xlink:href = "img/B255. png"> 
<animate attributeName = "x" from= "30" to= "330" begin= "0s" dur = "5s" repeatCount = "indef inite"/> 
<animate attributeName = "y" from= "150" to= "0" begin= "0s" dur = "5s" repeatCount = "indefinite"/> 
< animate attributeName = " opacity" from = "1" to="0" begin ="0s" dur ="5s" repeatCount = 


"indefinite"/></image > </svg> </div> 
</body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 .< animate attributeName 王 "x" from 一 
"30" to 二 "330" begin 一 "0s" dur 一 "5s" repeatCount 一 "indefinite" /> 表示 在 5 秒 的 时 间 内 在 水 平方 向 
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上 足球 从 30px 移 到 330px; < animate attributeName 一 "y"” from 一 "150” to 二 "0" begin 二 "0s" dur 
"5s" repeatCount 一 "indefinite"/> 表 示 在 5 秒 的 时 间 内 在 垂直 方向 上 足球 从 150px 移 到 0px; 
< animate attributeName 一 "opacity”from 一 "1" to= "0" begin="0s" dur="5s" repeatCount= 
"indefinite" /> 表示 在 5 秒 的 时 间 内 足球 的 透明 度 从 1 渐变 为 0。 

此 实例 的 源 文件 名 是 myHtmlA224. html。 


362 ”使 用 SVG 的 animateMotion 模拟 过 山 车 


此 实例 主要 在 SVG 的 < image > 标签 中 散人 < animateMotion > 标签 ,从 而 实现 <image > 标签 代表 
的 小 车 沿 着 < animateMotion > 标签 的 属性 值 指定 的 过 山 车 线路 前 进 的 效果 。 当 在 Google Chrome 浏 
览 器 中 显示 该 页 面 时 ,小 车 将 沿 着 绿色 的 过 山 车 线路 前 进 , 如 图 362-1 所 示 。 有 关 此 实例 的 主要 代码 
如 下 。 
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图 362-1 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
< style type = "text/css"> 
.mySVG { width: 400px; height: 350px; } 
div{ margin— top: 10px; margin— left: 20px;} 
</style></head> 
<body>< div>< svg class = "mySVG" > 
<path fill = "none" stroke = "green” stroke - width = "25px" d= "M7.4,15.3c17,20.4, 48.8,38,91.6, 
27.8c79.5— 18.9,107.4,48.2,69.4,48.2c— 33.9,0— 15.2— 58:1,65.4—41.7c26.2,5.3,63.2—19.1,79.1— 
3343 
< image width = "55" height= "55” x= "一 35" yY=" 一 30" xlink:href = "img/A225.png"> 
<animateMotion dur = "15s" path = "M7. 4, 15. 3c17, 20. 4, 48. 8, 38, 91. 6, 27. 8c79. 5 - 18.9, 107.4,48.2, 
69.4,48.2c-33.9,0- 15.2-58.1,65.4- 41.7c26.2,5.3,63.2— 19.1,79.1-34.3" repeatCount = 
"indefinite" rotate= "auto" /></image></svg></div></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,< animateMotion dur 一 "15s”path 一 
"M7.4,15. 3c17,20.4,48.8,38,91. 6,27. 8c79. 5-18. 9,107. 4,48. 2,69. 4,48. 2c-33. 9, 0-15. 2-58. 1 ， 
65. 4-41. 7c26. 2,5.3,63. 2-19. 1,79. 1-34. 3”repeatCount 一 "indefinite” rotate 一 "auto"/> 中 的 dur 用 
于 定义 动画 播放 的 总 时 间 ; path 用 于 定义 动画 的 工作 路 径 ,小 车 的 位 置 以 path 的 起 点 M 开始 计算 ， 
也 就 是 会 把 M 当 作 小 车 的 (0,0) 坐标 ; repeatCount 用 于 定义 重复 播放 次 数 ,indefinite 表示 无 限 重 
播 ; rotate 表示 小 车 在 前 进 的 过 程 中 是 否 根据 路 径 自 动 翻转 。 

此 实例 的 源 文 件 名 是 myHtmlA225. html。 
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363 ”使 用 SVG 的 animateMotion 模拟 老鼠 逃跑 


此 实例 主要 在 SVG 的 < image > 标签 中 嵌入 < animateMotion > 标签 ,从 而 实现 <image > 标签 代表 
的 老鼠 沿 着 < animateMotion > 标签 的 path 属性 值 指定 的 线路 逃跑 的 效果 。 当 在 Google Chrome 浏 
览 器 中 显示 该 页 面 时 ,老鼠 将 沿 着 封闭 的 曲线 逃跑 ,如 图 363-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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<! doctype html >< html ><head >< meta charset = "UTF - 8"> 
< style type = "text/css"> 
.mYSVG { width: 800px; height: 600px;} 
div { margin— top: 2px; margin— left: 2px;} 
</style></head> 
<body>< div>< svg class = "mySVG"> 
<path fill = "white" stroke= "black" stroke 一 width = "2px" 
d="M215,100.3c97.8— 32.6,90.5—31.9,336— 37.6c92.4— 2.1,98.1,81.6,121.8,116.4 
C101.7,149.9,53.5,155.9,14.7,178c ~ 96. 4, 54.9,5.4,269 ~ 257,115.1¢ ~ 57 ~ 33.5~ 203, 46.3 ~ 263.7， 
20°16=33.5214.5=1325 45 95 11 1C125.9;246.6798:6,13951,2157100; 930 /> 
< image width = "45" height = "45" x="— 35" y="—35" xlink:href ="img/A130. png"> 
<animateMotion dur = "15s" path= "M215, 100. 3c97.8 - 32. 6,90.5 - 31.9,336— 37.6 c92.4 -2.1,98.1， 
81. 6,121.8,116. 4c101.7,149.9,53.5,155.9,14.7,178c— 96.4,54.9,5.4,269 - 257,115.1c—57- 33.5- 203, 
0- 3— 2597 010 995 1 5 1325 5 A455 = 05 Lil CLI25 9, 2A6 07 996 LI L215 L0032. 
repeatCount = "indefinite" rotate= "auto"/> 
</image ></svg></div></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,< animateMotion > 标签 中 的 dur 用 
于 定义 动画 (老鼠 逃跑 ) 执 行 一 次 (一 周 ) 的 时 间 ; path 用 于 定义 老鼠 逃跑 的 线路 ; repeatCount 用 于 定 
义 重复 播放 次 数 ,indefinite 表示 无 限 重播 ; rotate 表示 老鼠 在 逃跑 的 过 程 中 是 否 根据 线路 自动 翻转 
(自身 的 姿势 ) 。 

此 实例 的 源 文件 名 是 myHtmlA230. html。 
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364 ”为 超 链 接 提 示 框 实现 爆炸 式 的 关闭 风格 


此 实例 主要 在 jquery-ui. min. js 和 jquery-ui. min. css 的 tooltip() 方 法 中 设置 特效 参数 explode， 
从 而 实现 为 超 链接 提示 框 添加 爆炸 式 的 关闭 风格 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,如 
果 将 鼠标 指针 悬浮 在 “量子 力学 ” 超 链接 上 , 则 将 显示 工具 提示 框 ; 当 鼠 标 指 针 离 开 超 链接 500 毫秒 之 
后 , 则 将 以 爆炸 式 风 格 关闭 该 工具 提示 框 ,效果 如 图 364-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 


百 = 口 x 
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图 364-1 


<! doctype html >< html >< head >< meta charset = "UTF - 8"> 
< script src= "js/jquery -3.1.1.min. js"></script> 
< script src= "js/jquery - ui.min. js"></script>< script type = "text/javascript"> 
$ (function() { 
$("#myExplodel”). tooltip({// 以 爆炸 的 风格 关闭 $ ("#myExplodel”) 的 提示 杠 
hide: { effect: "explode”, delay:500 } }); 
$("#myExplode2”). tooltip({ // 以 爆炸 的 风格 关闭 $ (“"#myExplode2”) 的 提示 框 
hide: { effect: "explode", delay: 500 } });}); 
</script> 
<link rel = "stylesheet" href = "css/jquery ~ ui.min.css">< style type = "text/css"> 

/* 设 置 提示 框 的 基本 样式 */ 

.ui~ tooltip { padding: 10px 20px; border - radius: 20px; font: bold 14px "Helvetica Neue", Sans— 
Serif; box- shadow: 0 0 7px black; background:cyan; } 

/* 设 置 盒 子 的 基本 样式 * / 

.myBox{ display: inline - block; width: 450px; padding: 15px; margin: 10px; background - color: #FFF; 
border: 1px solid # EEE; box— shadow: 5px 5px 5px 1px #999, 0 0 40px rgba(0, 0, 0, 0.06) inset; position: 
relative; border — radius: 5px; } 

body { background - color: lightgray;} 

</style></head> 

<body>< div class = "myBox"><p> 有 关 现 实 存在 的 真正 意义 ,长 期 以 来 是 一 个 热烈 讨论 的 问题 。 直 到 <a id = 
"myExplodel" href = "http://baike. so. com/doc/2737738 - 2889635. html" title = "量子 力学 是 研究 微观 粒子 
的 运动 规律 的 物理 学 分 支 学 科 , 它 提供 粒子 " 似 - 粒 "、" 似 - 波 "双重 性 ( 即 " 波 粒 二 象 性 ") 及 能 量 与 物质 相互 作 
用 的 数学 描述 "> 量子 力学 </a >, 以 及 海 森 堡 的 <a id= "myExplode2”href = "http://baike. so. com/doc/ 
6631264 - 7603760.html”title= "粒子 的 位 置 与 动量 不 可 同时 被 确定 "> 测 不 准 原理 </a> 的 出 现 ,争议 才 在 于 
是 否 我 们 所 观察 到 的 事物 存在 于 我 们 的 心智 之 外 ,或 是 如 同 理想 主义 者 所 认为 的 是 我 们 心智 感知 之 物 。 根 据 这 
个 宇宙 的 概念 ,近来 的 实验 皆 显 示 出 ,现实 境况 除非 是 在 观测 之 下 ,否则 实际 上 可 能 并 不 存在 。 一 项 由 澳洲 国立 
大 学 研究 人 员 所 进行 的 波 粒 二 象 性 研究 中 指出 ,粒子 或 波 在 它们 被 观测 之 后 呈现 存在 的 状态 。 换 句 话 说 ,观测 
就 是 一 切 ,而 现实 的 境况 只 有 在 观测 发 生 时 才 会 存在 。</p></div></body ></html> 
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上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , $ ("# myExplodel"). tooltip({ hide: 
{ effect: "explode" ,delay:500 } )) 表 示 在 鼠标 指针 离开 工具 提示 框 500 毫秒 之 后 以 爆炸 的 风格 关闭 
该 工具 提示 框 。 需 要 说 明 的 是 ,tooltip() 方 法 是 工具 提示 框 部 件 (Tooltip Widget) 的 方法 ,因此 在 使 
用 tooltip() 方 法 时 必须 添加 jquery-ui. min. js 和 jquery-ui. min. css 两 个 文件 。 

此 实例 的 源 文件 名 是 myHtmlA148. html。 


365 ”以 卷 帘 式 风格 关闭 和 显示 超 链 接 提示 框 


此 实例 主要 在 jquery-ui. min. js 和 jquery-ui. min. css 的 tooltip() 方 法 中 设置 特效 参数 slideUp 
和 slideDown, 从 而 实现 以 卷 帘 方 式 显示 和 关闭 超 链接 的 工具 提示 框 。 当 在 Google Chrome 浏览 器 中 
显示 该 页 面 时 ,如 果 将 鼠标 指针 悬浮 在 "量子 力学 ? 超 链接 上 , 则 将 以 卷 帘 方 式 在 两 秒 内 从 上 向 下 展开 
工具 提示 框 , 效 果 如 图 365-1 所 示 ; 当 鼠 标 指针 离开 超 链接 500 毫秒 之 后 , 则 将 以 卷 帘 方 式 在 两 秒 内 
从 下 向 上 折 释 该 工具 提示 框 , 效 果 如 图 365-2 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 365-2 


<!doctype html ><html ><head >< meta charset = "UTF - 8"> 
<script src= "js/jquery-3.1.1.min. js"></script> 
< script src= "js/jquery - ui.min. js"></script >< script type = "text/javascript"> 
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$ (function() { 
$$ ("mySlidel, # 井 mySlide2 "). tooltip({// 以 卷 帘 式 的 风格 关闭 超 链接 的 提示 框 
hide: { effect: "slideUp", delay:500, duration:2000 } }); 
$$ ("mySlidel, #mySlide2").tooltip({ // 以 卷 帘 式 的 风格 显示 超 链 接 的 提示 框 
show: { effect: "slideDown", delay:500, duration:2000 } }); }); 

</script > 

<link rel = "stylesheet" href = "css/jquery — ui.min.css"><style type = "text/css"> 

/* 设 置 提示 框 的 基本 样式 * / 

.ui- tooltip { padding: 10px 20px; border - radius: 20px; font: bold 14px " Helvetica Neue", Sans— 

Serif ;box - shadow: 0 0 7px black; background:lightgreen; } 

/* 设 置 盒子 的 基本 样式 * / 

.myBox{ display: inline- block; width: 450px; padding: 15px; margin: 10px; 

background - color: #FFF; border: lpx solid #EEE; box— shadow: 5px 5px 5px 1px #999, 0 0 40px rgba(0, 
0, 0, 0.06) inset; position: relative; border - radius: 5px; } 

body { background— color: lightgray; } 

</style></head> 
<body>< div class = "myBox"><p> 有 关 现 实 存在 的 真正 意义 ,长 期 以 来 是 一 个 热烈 讨论 的 问题 。 直 到 <a id = 
"mySlidel" href = "http://baike. so. com/doc/2737738 - 2889635. html”title = "量子 力学 是 研究 微观 粒子 的 
运动 规律 的 物理 学 分 支 学 科 , 它 提供 粒子 " 似 - 粒 "、" 似 - 波 "双重 性 ( 即 " 波 粒 二 象 性 ") 及 能 量 与 物质 相互 作用 
的 数学 描述 "> 量子 力学 </a>, 以 及 海 森 堡 的 <a id= "mySlide2" href = "http://baike. so. com/doc/6631264 一 
7603760. html" title = "粒子 的 位 置 与 动量 不 可 同时 被 确定 "> 测 不 准 原理 </a> 的 出 现 , 争 议 才 在 于 是 否 我 们 所 
观察 到 的 事物 存在 于 我 们 的 心智 之 外 ,或 是 如 同 理想 主义 者 所 认为 的 是 我 们 心智 感知 之 物 。 根 据 这 个 宇宙 的 概 
念 , 近 来 的 实验 皆 显 示 出 ,现实 境况 除非 是 在 观测 之 下 ,否则 实际 上 可 能 并 不 存在 。 一 项 由 澳洲 国立 大 学 研究 人 
员 所 进行 的 波 粒 二 象 性 研究 中 指出 ,粒子 或 波 在 它们 被 观测 之 后 呈现 存在 的 状态 。 换 句 话说 ,观测 就 是 一 切 ,而 
现实 的 境况 只 有 在 观测 发 生 时 才 会 存在 。</p></div></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , $ ("# mySlidel, # mySlide2 ")， 
tooltip({ hide: { effect: "slideUp" ,delay: 500,duration: 2000 )}) 表 示 鼠 标 指 针 离 开工 具 提 示 框 500 
毫秒 之 后 在 两 秒 内 以 卷 帘 方 式 从 下 向 上 折合 该 工具 提示 框 , 其 中 ,hide 表示 该 特效 在 关闭 工具 提示 框 
的 时 候 产 生 作 用 ; effect: "slideUp" 表 示 特 效 是 向 上 折 释 ; delay: 500 表示 延迟 时 间 是 500 毫秒 ; 
duration: 2000 表示 特效 的 持续 时 间 是 2000 毫秒 。 需 要 说 明 的 是 ,tooltip() 方 法 是 工具 提示 框 部 件 
(Tooltip Widget) 的 方法 ,因此 在 使 用 tooltip() 方 法 时 必须 添加 jquery-ui. min. js 和 jquery-ui. min。 
css 两 个 文件 。 

此 实例 的 源 文 件 名 是 myHtmlAl149. html。 


366 ”以 滑 和 人、 滑 出 效果 显示 和 关闭 超 链接 提示 框 


此 实例 主要 在 jquery-ui. min. js 和 jquery-ui. min. css 的 tooltip() 方 法 中 设置 特效 参数 drop, 从 
而 实现 以 滑 入 、 滑 出 方式 显示 和 关闭 超 链接 提示 框 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,如 
果 将 鼠标 指针 悬浮 在 “量子 力学 ” 超 链 接 上 ,. 则 将 从 左 向 右 滑 入 工具 提示 框 ,如 图 366-1 所 示 ; 当 和 鼠标 
指针 离开 超 链接 250 毫秒 之 后 , 则 将 从 右 向 左 在 2500 毫秒 内 滑 出 工具 提示 框 ,如 图 366-2 所 示 。 注 
意 ,在 动画 未 执行 完 之 前 工具 提示 框 是 半 透 明 的 。 有 关 此 实例 的 主要 代码 如 下 。 





<!doctype html >< htm]l ><head ><meta charset = "UTF - 8"> 
<script src= "js/jquery- 3.1.1.min. js"></script> 
<script src= "js/jquery - ui.min. js"></script>< script type = "text/javascript"> 
$ (function() { 
$ ("mySlidel, #mySlide2 ").tooltip({// 以 滑 和 方式 显示 超 链接 的 提示 框 


HTML5+CSS3 炫 酷 应 用 实例 集锦 


show: { effect: "drop", delay: 250, duration:2500 } }); 
$$("##mySlidel, #mySlide2 ").tooltip({// 以 请 出 方式 关闭 超 链接 的 提示 框 
hide: { effect: "drop",delay: 250, duration:2500 } });}); 





</script > 
<link rel = "stylesheet" href = "css/jquery - ui.min.css"><style type = "text/css"> 
/* 设 置 提示 框 的 基本 样式 * / 
.ui- tooltip { padding: 10px 20px; border - radius: 20px; font: bold 14px " Helvetica Neue", Sans— 
Serif; box- shadow: 0 0 7px black; background: lightseagreen; } 
/* 设 置 盒子 的 基本 样式 * / 
.myBox { display: inline— block; width: 450px; padding: 15px; margin: 10px; 
background - color: #FFF; border: 1px solid # EEE; box— shadow: 5px 5px 5px 1px #999, 0 0 40px rgba(0, 
0, 0, 0.06) inset; position: relative; border - radius: 5px; } 
body { background ~ color: lightgray;} 
</style></head> 
<body >< div class = "myBox"><p> 有 关 现实 存在 的 真正 意义 ,长 期 以 来 是 一 个 热烈 讨论 的 问题 。 直 到 <a id = 
"mySlidel" href = "http://baike. so. com/doc/2737738 - 2889635. html”title = "量子 力学 是 研究 微观 粒子 的 
运动 规律 的 物理 学 分 支 学 科 , 它 提供 粒子 " 似 - 粒 "、" 似 - 波 " 双 重 性 ( 即 " 波 粒 二 象 性 ") 及 能 量 与 物质 相互 作用 
的 数学 描述 "> 量子 力学 </a >, 以 及 海 森 堡 的 <a id = "mySlide2" href = "http://baike. so. com/doc/6631264 一 
7603760. html” title = "粒子 的 位 置 与 动量 不 可 同时 被 确定 "> 测 不 准 原理 </a> 的 出 现 ,争议 才 在 于 是 否 我 们 所 
观察 到 的 事物 存在 于 我 们 的 心智 之 外 ,或 是 如 同 理想 主义 者 所 认为 的 是 我 们 心智 感知 之 物 。 根 据 这 个 宇宙 的 概 
念 , 近 来 的 实验 皆 显 示 出 ,现实 境况 除非 是 在 观测 之 下 ,否则 实际 上 可 能 并 不 存在 。 一 项 由 澳洲 国立 大 学 研究 人 
员 所 进行 的 波 粒 二 象 性 研究 中 指出 ,粒子 或 波 在 它们 被 观测 之 后 呈现 存在 的 状态 。 换 句 话 说 ,观测 就 是 一 切 ,而 
现实 的 境况 只 有 在 观测 发 生 时 才 会 存在 。</p></div></body ></html > 
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图 366-1 
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上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , $ (" # mySlidel, # mySlide2 "). 
tooltip({ show: { effect: "drop" ,delay: 250,duration:2500 } )) 表 示 和 鼠标 指针 悬浮 于 超 链接 250 毫 
秒 之 后 在 2500 毫秒 内 从 左 向 右 滑 入 工具 提示 框 ,其 中 .show 表示 该 特效 在 显示 工具 提示 框 的 时 候 产 
生 作用 ; effect: "drop" 表 示 特 效 是 抽 层 风格 ; delay: 250 表示 延迟 时 间 是 250 毫秒 ; duration: 2500 
表示 特效 的 持续 时 间 是 2500 毫秒 。 需 要 说 明 的 是 ,tooltip() 方 法 是 工具 提示 框 部 件 (Tooltip 
Widget) 的 方法 ,因此 在 使 用 tooltip() 方 法 时 必须 添加 jquery-ui. min. js 和 jquery-ui. min. css 两 个 
文件 。 

此 实例 的 源 文件 名 是 myHtmlA150. html。 


367 以 扩张 的 效果 显示 和 关闭 超 链 接 提示 框 


此 实例 主要 在 jquery-ui. min. js 和 jquery-ui. min. css 的 tooltip() 方 法 中 设置 特效 参数 clip, 从 而 
实现 以 从 中 间 向 上 、 下 两 端 扩张 的 方式 来 显示 超 链接 的 提示 框 ,或 者 实现 以 从 上 .下 两 端 向 中 间 折 三 
的 方式 来 关闭 超 链 接 的 提示 框 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,如 果 将 鼠标 指针 悬浮 
在 “量子 力学 ” 超 链接 上 , 则 将 从 中 间 向 上 、 下 两 端 扩 张 以 显示 超 链接 的 提示 框 ,如 图 367-1 所 示 ; 当 鼠 
标 指 针 离开 超 链接 250 毫秒 之 后 , 则 将 从 上 、 下 两 端 向 中 间 折 释 以 关闭 超 链 接 的 提示 框 ,如 图 367-2 所 
示 。 有 关 此 实例 的 主要 代码 如 下 。 
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<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<script src= "js/jquery - 3.1.1.min. js"></script> 
< script src= "js/jquery - ui.min. js"></script>< script type= "text/javascript"> 
$ (function() { 
$$ (" 提 myClipl, 间 myClip2").tooltip({// 从 中 间 向 上 、 下 两 端 扩 张 从 而 显示 超 链接 的 提示 框 
show: { effect: "clip", delay: 250, duration:2500 } }); 
$ ("站 myClipl, # 井 myClip2 ").tooltip({// 从 上 、 下 两 端 向 中 间 折 县 从 而 关闭 超 链接 的 提示 框 
hide: { effect: "clip", delay: 250, duration:2500 } }); }); 
</script> 
<link rel = "stylesheet" href = "css/jquery - ui. min.css"> 
< style type= "text/css"> 
/* 设置 提示 框 的 基本 样式 * / 
.ui- tooltip { padding: 10px 20px; border - radius: 20px; font: bold 14px "Helvetica Neue"，Sans 
Serif; box - shadow: 0 0 7px black; background: lightskyblue; } 
/* 设 置 金子 的 基本 样式 */ 
.myBox { display: inline - block; width: 450px; padding: 15px; margin: 10px; background - color: 
# FFF; border: 1px solid # EEE; box - shadow: 5px 5px 5px 1px #999, 0 0 40px rgba(0, 0, 0, 0.06) inset; 
position: relative; border- radius: 5px; } 
body { background - color: lightgray; } 
</style></head> 
<body>< div class = "myBox"><p> 有 关 现 实 存在 的 真正 意义 ,长 期 以 来 是 一 个 热烈 讨论 的 问题 。 直 到 <a id = 
"myClipl" href = "http://baike. so.com/doc/2737738 - 2889635. html" title= "量子 力学 是 研究 微观 粒子 的 运 
动 规律 的 物理 学 分 支 学 科 , 它 提 供 粒子 " 似 - 粒 "、" 似 - 波 " 双 重 性 ( 即 " 波 粒 二 象 性 ") 及 能 量 与 物质 相互 作用 的 
数学 描述 ,"> 量 子 力学 </a >, 以 及 海 森 堡 的 <a id = "myClip2" href = "http://baike. so. com/doc/6631264 - 
7603760. html” title = "粒子 的 位 置 与 动量 不 可 同时 被 确定 "> 测 不 准 原理 </a> 的 出 现 ,争议 才 在 于 是 否 我 们 所 
观察 到 的 事物 存在 于 我 们 的 心智 之 外 ,或 是 如 同 理想 主义 者 所 认为 的 是 我 们 心智 感知 之 物 。 根 据 这 个 宇宙 的 概 
念 ,近来 的 实验 皆 显 示 出 ,现实 境况 除非 是 在 观测 之 下 ,否则 实际 上 可 能 并 不 存在 。 一 项 由 澳洲 国立 大 学 研究 人 
员 所 进行 的 波 粒 二 象 性 研究 中 指出 ,粒子 或 波 在 它们 被 观测 之 后 呈现 存在 的 状态 。 换 句 话 说 ,观测 就 是 一 切 ,而 
现实 的 境况 只 有 在 观测 发 生 时 才 会 存在 。</p></div></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , $ ("# myClipl, #myClip2 "). 
tooltip({ show: { effect: "clip" ,delay: 250, duration:2500 } )) 表 示 和 鼠标 指针 悬浮 于 超 链接 250 毫 
秒 之 后 在 2500 毫秒 内 从 中 间 向 上 、 下 两 端 扩 张 以 显示 超 链接 的 提示 框 ,其 中 ,show 表示 该 特效 在 显 
示 工 具 提 示 框 的 时 候 产 生 作用 ; effect: ”clip" 表 示 特 效 是 扩张 (或 为 hide 时 折 伙 ) 风 格 ; delay: 250 
表示 延迟 时 间 是 250 毫秒 ; duration: 2500 表示 特效 的 持续 时 间 是 2500 毫秒 。 需 要 说 明 的 是 ,tooltip() 
方法 是 工具 提示 框 部 件 (Tooltip Widget) 的 方法 ,因此 在 使 用 tooltip() 方 法 时 必须 添加 jquery-ui. 
min. js 和 jquery-ui. min. css 两 个 文件 。 

此 实例 的 源 文件 名 是 myHtmlA151. html。 


368 ”以 淡 人 淡出 效果 显示 和 关闭 超 链 接 提 示 框 


此 实例 主要 在 jquery-ui. min. js 和 jquery-ui. min. css 的 tooltip() 方 法 中 设置 特效 参数 fade, 从 而 
实现 以 淡 入 的 效果 显示 超 链 接 的 提示 框 ,或 者 以 淡出 的 效果 关闭 超 链接 的 提示 框 。 当 在 Google 
Chrome 浏览 器 中 显示 该 页 面 时 ,如 果 将 鼠标 指针 悬浮 在 “量子 力学 ? 超 链接 上 , 则 将 以 淡 入 的 效果 显 
示 超 链接 的 提示 框 ,如 图 368-1 所 示 ; 当 鼠 标 指针 离开 超 链 接 250 毫秒 之 后 , 则 将 以 淡出 的 效果 关闭 
超 链接 的 提示 框 , 如 图 368-2 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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有 关 现实 存在 的 真正 意义 ， 长 期 以 来 是 一 个 热烈 计 论 的 问题 , 直 
到 合子 力 学 ， 以 及 淖 寺 全 的 消 不 准 丰 于 的 员 现 ， 全 议 才 在 于 是 和 


我 们 遍 








J D myHemlA152html x 
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有 关 现实 存在 的 真正 意义， 长 期 以 来 是 一 个 执 列 
到 便于 力学 ， 以 及 海 村 各 的 消 不 淮 丰 理 的 出 现 ， 争 议 才 在 于 是 天 


我 们 所 


: 人 性 请 
中 指出 壮 粒 对 种 该 在 它们 被 观测 之 后 呈现 存在 的 状态 。 换 句 话 
说 ， 是 一 切 ， 而 现实 的 境况 只 有 在 观 码 发 生 时 才 会 存在 . 





<! doctype html >< html >< head >< meta charset = "UTF - 8"> 
< script src= "js/jquery -3.1.1.min. js"></script > 
<script src= "js/jquery - ui. min. js"></script >< script type = "text/javascript"> 
$ (function() { 
$ ("myFadel, #myFade2 ").tooltip({// 以 淡 入 的 效果 显示 超 链接 的 提示 框 
show: { effect: "fade",delay: 250, duration:2500 } }); 
$$ ("myFadel, #myFade2 ").tooltip({// 以 淡出 的 效果 关闭 超 链接 的 提示 框 
hide: { effect: "fade", delay: 250, duration:2500 } }); }); 
</script > 
<link rel = "stylesheet" href = "css/jquery— ui.min.css"> 
<style type= "text/css"> 
/* 设 置 提示 框 的 基本 样式 */ 
.ui- tooltip { padding: 10px 20px; border - radius: 20px; font: bold 14px "Helvetica Neue", Sans— 
Serif; box- shadow: 0 0 7px black; background: lightgoldenrodyellow; } 
/* 设置 盒子 的 基本 样式 * / 
.myBox { display: inline— block; width: 450px; padding: 15px; margin: 10px; 
background - color: #FEFF; border: lpx solid #EEE; box— shadow: 5px 5px 5px 1px #999, 0 0 40px rgba(0, 
0, 0, 0.06) inset; position: relative; border - radius: 5px; } 
body { background - color: lightgray; } 
</style></head> 
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<body ><div class = "myBox"><p> 有 关 现 实 存在 的 真正 意义 ,长 期 以 来 是 一 个 热烈 讨论 的 问题 。 直 到 <a id = 
"myFadel" href = "http://baike. so.com/doc/2737738 - 2889635. html" title= "量子 力学 是 研究 微观 粒子 的 运 
动 规律 的 物理 学 分 支 学 科 , 它 提供 粒子 " 似 - 粒 "、" 似 - 波 "双重 性 ( 即 " 波 粒 二 象 性 ") 及 能 量 与 物质 相互 作用 的 
数学 描述 ."> 量 子 力学 </a >, 以 及 海 森 堡 的 <a id = "myFade2" href = "http://baike. so. com/doc/6631264 - 
7603760. html" title = "粒子 的 位 置 与 动量 不 可 同时 被 确定 "> 测 不 准 原 理 </a> 的 出 现 ,争议 才 在 于 是 否 我 们 所 
观察 到 的 事物 存在 于 我 们 的 心智 之 外 ,或 是 如 同 理想 主义 者 所 认为 的 是 我 们 心智 感知 之 物 。 根 据 这 个 宇宙 的 概 
念 ,近来 的 实验 皆 显 示 出 ,现实 境况 除非 是 在 观测 之 下 , 否则 实际 上 可 能 并 不 存在 。 一 项 由 澳洲 国立 大 学 研究 人 
员 所 进行 的 波 粒 二 象 性 研究 中 指出 ,粒子 或 波 在 它们 被 观测 之 后 呈现 存在 的 状态 。 换 句 话 说 ,观测 就 是 一 切 ,而 
现实 的 境况 只 有 在 观测 发 生 时 才 会 存在 。</p></div></body ></html > 





上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , $ ("# myFadel, #myFade2 "). 
tooltip( {show: {effect: "fade" ,delay: 250,duration:2500 }) 表 示 鼠 标 指 针 悬 浮 于 超 链接 250 毫秒 
之 后 在 2500 毫秒 内 以 淡 入 的 效果 显示 超 链 接 的 提示 框 , 其 中 ,show 表示 该 特效 在 显示 工具 提示 框 的 
时 候 产 生 作 用 ; effect: "fade" 表 示 特 效 是 淡 入 (或 为 hide 时 淡出 ) 风 格 ; delay:250 表示 延迟 时 间 是 
250 毫秒 ; duration:2500 表示 特效 的 持续 时 间 是 2500 毫秒 。 需 要 说 明 的 是 ,tooltip() 方 法 是 工具 提 
示 框 部 件 (Tooltip Widget) 的 方法 ,因此 在 使 用 tooltip() 方 法 时 必须 添加 jquery-ui. min. js 和 jquery- 
ui, min, css 两 个 文件 。 

此 实例 的 源 文 件 名 是 myHtmlA152. html。 


369 ”以 膨胀 的 效果 显示 和 关闭 超 链 接 提 示 框 


此 实例 主要 在 jquery-ui. min. js 和 jquery-ui. min. css 的 tooltip() 方 法 中 设置 特效 参数 puff, 从 而 
实现 以 膨胀 的 效果 显示 和 关闭 超 链接 的 提示 框 。 当 在 Google Chrome 浏览 嚣 中 显示 该 页 面 时 ,如 果 
将 鼠标 指针 悬浮 在 “量子 力学 ? 超 链 接 上 , 则 将 以 膨胀 的 效果 显示 超 链 接 的 提示 框 , 如 图 369-1 所 示 ; 
当 鼠 标 指针 离开 超 链 接 250 毫秒 之 后 , 则 将 以 与 膨胀 相反 的 效果 关闭 超 链 接 的 提示 框 ,如 图 369-2 所 
示 。 有 关 此 实例 的 主要 代码 如 下 。 








<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
< script src= "js/jquery -3.1.1.min. js"></script > 
< script src= "js/jquery - ui. min. js"></script>< script type = "text/javascript"> 
$ (function() { 
$$ (" 提 myPuff1l, #myPuff2"). tooltip({// 以 膨胀 的 效果 显示 超 链接 的 提示 框 
show: { effect: "puff",delay: 250, duration:2500 } }); 
$("#myPuffl, ##myPuff2").tooltip({// 以 与 膨胀 相反 的 效果 关闭 超 链接 的 提示 框 
hide: { effect: "puff", delay: 250, duration:2500 } });}); 
</script> 
<link rel = "stylesheet" href = "css/jquery — ui.min.css"> 
< style type = "text/css"> 
/* 设 置 提示 框 的 基本 样式 */ 
.ui- tooltip { padding: 10px 20px; border - radius: 20px; font: bold 14px "Helvetica Neue", Sans— 
Serif; box - shadow: 0 0 7px black; background: lightgoldenrodyellow; } 
/* 设 置 盒子 的 基本 样式 * / 
.myBox { display: inline- block; width: 450px;padding: 15px;margin: 10px; 
background - color: #7FFF;border: 1px solid # EEE; box— shadow: 5px 5px 5px 1px #999, 0 0 40px rgba(0, 0, 
0, 0.06) inset; position: relative; border - radius: 5px;} 
body { background— color: lightgray; } 
</style></head> 
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<body >< div class = "myBox"><p> 有 关 现 实 存在 的 真正 意义 ,长 期 以 来 是 一 个 热烈 讨论 的 问题 。 直 到 <a id= 
"myPuffl" href = "http://baike. so.com/doc/2737738 - 2889635. html" title= "量子 力学 是 研究 微观 粒子 的 运 
动 规律 的 物理 学 分 支 学 科 , 它 提供 粒子 " 似 - 粒 "、" 似 - 波 "双重 性 ( 即 " 波 粒 二 象 性 ") 及 能 量 与 物质 相互 作用 的 
数学 描述 ."> 量 子 力学 </a >, 以 及 海 森 堡 的 <a id = "myPuff2" href = "http://baike. so. com/doc/6631264 一 
7603760. html" title = "粒子 的 位 置 与 动量 不 可 同时 被 确定 "> 测 不 准 原理 </a> 的 出 现 , 争 议 才 在 于 是 否 我 们 所 
观察 到 的 事物 存在 于 我 们 的 心智 之 外 ,或 是 如 同 理想 主义 者 所 认为 的 是 我 们 心智 感知 之 物 。 根 据 这 个 宇宙 的 概 
念 ,近来 的 实验 皆 显 示 出 ,现实 境况 除非 是 在 观测 之 下 , 否则 实际 上 可 能 并 不 存在 。 一 项 由 澳洲 国立 大 学 研究 人 
员 所 进行 的 波 粒 二 象 性 研究 中 指出 ,粒子 或 波 在 它们 被 观测 之 后 呈现 存在 的 状态 。 换 句 话说 ,观测 就 是 一 切 ,而 
现实 的 境况 只 有 在 观测 发 生 时 才 会 存在 。</p></div></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , $ (" # myPuffl, #myPuff2"). 
tooltip({ show: { effect: "puff" ,delay: 250,duration:2500 ))) 表 示 鼠 标 指针 悬浮 于 超 链 接 250 毫秒 
之 后 在 2500 上 毫秒 内 以 膨胀 的 效果 显示 超 链接 的 提示 框 ,其 中 ,show 表示 该 特效 在 显示 工具 提示 框 的 
时 候 产 生 作用 ; effect:"puff" 表 示 特 效 是 膨胀 (或 为 hide 时 与 膨胀 相反 ) 风 格 ; delay :250 表示 延迟 时 
间 是 250 毫秒 ,duration:2500 表示 特效 的 持续 时 间 是 2500 毫秒 。 需 要 说 明 的 是 ,tooltip() 方 法 是 工 
具 提 示 框 部 件 (Tooltip Widget) 的 方法 ,因此 在 使 用 tooltip() 方 法 时 必须 添加 jquery-ui. min. js 和 
jquery-ui. min. css 两 个 文件 。 

此 实例 的 源 文件 名 是 myHtmlA153. html。 
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有关 现实 存在 的 于 
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有 关 现实 存在 的 走 正 意义， 长 期 以 来 是 一个 热 列 计 论 的 问题 直 
学 ， 以 及 海 亲 汪 的 测 不 准 刘 近 的 出 现 ， 争 议 才 在 于 是 否 
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370 以 闪烁 的 效果 显示 和 关闭 超 链 接 提示 框 
此 实例 主要 在 jquery-ui. min. js 和 jquery-ui. min. css 的 tooltip() 方 法 中 设置 特效 参数 pulsate， 
从 而 实现 以 闪烁 的 效果 显示 和 关闭 超 链接 的 提示 框 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ， 
如 果 将 鼠标 指针 悬浮 在 “量子 力学 ” 超 链 接 上 , 则 将 以 办 烁 的 效果 显示 超 链接 的 提示 框 ,如 图 370-1 所 


示 ; 当 鼠 标 指针 离开 超 链 接 250 毫秒 之 后 ,将 以 闪烁 的 效果 关闭 超 链接 的 提示 框 ,如 图 370-2 所 示 。 
有 关 此 实例 的 主要 代码 如 下 。 
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有 关 现 实 存 在 的 真正 意义 ， Ne 直 
和 以 及 湾 森 堡 的 测 不 准 原 理 的 出 现 ， 争 议 才 在 于 是 否 





图 370-2 


<!doctype html >< html><head><meta charset = "UTF - 8"> 
< script src= "js/jquery - 3.1.1.min. js"></script> 
< script src= "js/jquery - ui.min. js"></script>< script type = "text/javascript"> 
$ (function() { 
$ ("myPulsatel, #myPulsate2").tooltip({// 以 闪烁 (脉动 ) 的 效果 显示 超 链 接 的 提示 框 
show: { effect: "pulsate", delay: 250, duration:2500 } }); 
$$ ("#myPulsatel, ##myPulsate2").tooltip({// 以 闪烁 (脉动 ) 的 效果 关闭 超 链接 的 提示 框 


hide: { effect: "pulsate", delay: 250, duration:2500 } }); }); 
</script> 


<link rel = "stylesheet" href = "css/jquery — ui.min. css"> 
<style type= "text/css"> 
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/ * 设 置 提示 框 的 基本 样式 */ 
.ui~ tooltip { padding: 10px 20px; border - radius: 20px; font: bold 14px "Helvetica Neue", Sans— 
Serif; box- shadow: 0 0 7px black; background: lightgoldenrodyellow; } 
/* 设 置 盒子 的 基本 样式 * / 
myBox { display: inline - block; width: 450px; padding: 15px; margin: 10px; 
background - color: #FFF; border: 1px solid # EEE; box— shadow: 5px 5px 5px 1px #999, 0 0 40px rgba(0, 
0, 0, 0.06) inset; position: relative; border- radius: 5px; } 
body { background— color: lightgray; } 
</style></head> 
<body ><div class = "myBox"><p> 有 关 现实 存在 的 真正 意义 ,长 期 以 来 是 一 个 热烈 讨论 的 问题 。 直 到 <a id = 
"myPul satel” href = "http://baike. so. com/doc/2737738 - 2889635. html" title = "量子 力学 是 研究 微观 粒子 
的 运动 规律 的 物理 学 分 支 学 科 , 它 提供 粒子 " 似 - 粒 "、" 似 - 波 " 双 重 性 ( 即 " 波 粒 二 象 性 ") 及 能 量 与 物质 相互 作 
用 的 数学 描述 ."> 量 子 力学 </a>, 以 及 海 森 堡 的 <a id = "myPulsate2" href = "http://baike. so. com/doc/6631264 
一 7603760.html”title= "粒子 的 位 置 与 动量 不 可 同时 被 确定 "> 测 不 准 原理 </a> 的 出 现 ,争议 才 在 于 是 否 我 们 
所 观察 到 的 事物 存在 于 我 们 的 心智 之 外 ,或 是 如 同 理想 主义 者 所 认为 的 是 我 们 心智 感知 之 物 。 根 据 这 个 宇宙 的 
概念 ,近来 的 实验 皆 显 示 出 ,现实 境况 除非 是 在 观测 之 下 ,否则 实际 上 可 能 并 不 存在 。 一 项 由 澳洲 国立 大 学 研究 
人 员 所 进行 的 波 粒 二 象 性 研究 中 指出 ,粒子 或 波 在 它们 被 观测 之 后 呈现 存在 的 状态 。 换 句 话说 , 观测 就 是 一 切 ， 
而 现实 的 境况 只 有 在 观测 发 生 时 才 会 存在 。</p></div></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , $ ("#myPulsatel，# myPulsate2"), 
tooltip({ show: { effect:"pulsate" ,delay: 250,duration:2500 }) 表 示 鼠 标 指针 悬浮 于 超 链接 250 
毫秒 之 后 在 2500 毫秒 内 以 闪烁 的 效果 显示 超 链 接 的 提示 框 , 其 中 ,show 表示 该 特效 在 显示 工具 提示 
框 的 时 候 产生 作用 ;， effect: "pulsate" 表 示 特 效 是 闪烁 (为 hide 时 相同 ) 风 格 ; delay:250 表示 延迟 时 
间 是 250 毫秒 ; duration:2500 表示 特效 的 持续 时 间 是 2500 毫秒 。 需 要 说 明 的 是 ,tooltip() 方 法 是 工 
具 提 示 框 部 件 (Tooltip Widget) 的 方法 ,因此 在 使 用 tooltip() 方 法 时 必须 添加 jquery-ui, min, js 和 
jquery-ui. min. css 两 个 文件 。 

此 实例 的 源 文 件 名 是 myHtmlA154. html。 


371 ”以 缩放 的 效果 显示 和 关闭 超 链 接 提 示 框 


此 实例 主要 在 jquery-ui. min. js 和 jquery-ui. min. css 的 tooltip() 方 法 中 设置 特效 参数 scale, 从 
而 实现 以 从 中 心 向 四 周 扩展 的 效果 来 显示 超 链接 的 提示 框 ,和 以 从 四 周 向 中 心 收缩 的 效果 来 关闭 超 
链接 的 提示 框 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,如 果 将 鼠标 指针 悬浮 在 “量子 力学 " 超 
链接 上 , 则 将 以 从 中 心 向 四 周 扩展 的 效果 来 显示 超 链接 的 提示 框 ,如 图 371-1 所 示 ; 当 鼠 标 指针 离开 
超 链接 250 毫秒 之 后 , 则 以 从 四 周 向 中 心 收 缩 的 效果 来 关闭 超 链接 的 提示 框 ,如 图 371-2 所 示 。 有 关 
此 实例 的 主要 代码 如 下 。 
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图 371-2 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<script src= "js/jquery - 3.1.1.min. js"></script> 
< script src= "js/jquery - ui.min. js"></script >< script type= "text/javascript"> 
$ (function() { 
$(" 井 myScalel, #myScale2") .tooltip({// 以 从 中 心 向 四 周 扩展 来 显示 超 链 接 的 提示 杠 
show: { effect: "scale",delay: 250, duration:2500 } }); 
$(" 间 myScalel, #myScale2").tooltip({// 以 从 四 周 向 中 心 收缩 来 关闭 超 链接 的 提示 框 
hide: { effect: "scale",delay: 250，duration:2500 } }); }); 
</script> 
<link rel = "stylesheet" href = "css/jquery— ui.min.css"><style type = "text/css"> 
/* 设 置 提示 框 的 基本 样式 */ 
.ui- tooltip { padding: 10px 20px; border - radius: 20px; font: bold 14px "Helvetica Neue", Sans— 
Serif;box - shadow: 0 0 7px black; background: lightgoldenrodyellow; } 
/* 设 置 盒子 的 基本 样式 * / 
.myBox { display: inline- block; width: 450px; padding: 15px; margin: 10px; 
background - color: #FFF; border: lpx solid #EEE; box— shadow: 5px 5px 5px 1px #999, 0 0 40px rgba(0, 
0, 0, 0.06) inset; position: relative;border - radius: 5px; } 
body { background ~ color: lightgray;} 
</style></head> 
<body >< div class = "myBox"><p> 有 关 现实 存在 的 真正 意义 ,长 期 以 来 是 一 个 热烈 讨论 的 问题 。 直 到 <a id = 
"myScalel" href = "http://baike.so. com/doc/2737738 - 2889635. html"” title = "量子 力学 是 研究 微观 粒子 的 
运动 规律 的 物理 学 分 支 学 科 , 它 提供 粒子 " 似 - 粒 "" 似 - 波 " 双 重 性 ( 即 " 波 粒 二 象 性 ") 及 能 量 与 物质 相互 作用 
的 数学 描述 ."> 量 子 力学 </a >, 以 及 海 森 堡 的 <a id = "myScale2" href = "http://baike. so. com/doc/6631264 一 
7603760. html”title = "粒子 的 位 置 与 动量 不 可 同时 被 确定 "> 测 不 准 原理 </a> 的 出 现 ,争议 才 在 于 是 否 我 们 所 
观察 到 的 事物 存在 于 我 们 的 心智 之 外 ,或 是 如 同 理想 主义 者 所 认为 的 是 我 们 心智 感知 之 物 。 根 据 这 个 宇宙 的 概 
念 , 近 来 的 实验 皆 显 示 出 ,现实 境况 除非 是 在 观测 之 下 ,否则 实际 上 可 能 并 不 存在 。 一 项 由 澳洲 国立 大 学 研究 人 
员 所 进行 的 波 粒 二 象 性 研究 中 指出 ,粒子 或 波 在 它们 被 观测 之 后 呈现 存在 的 状态 。 换 句 话说 ,观测 就 是 一 切 ,而 
现实 的 境况 只 有 在 观测 发 生 时 才 会 存在 。</p></div></body ></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , $ (" # myScalel, #myScale2"). 
tooltip({ show: { effect: "scale" ,delay: 250, duration:2500 } ) 表 示 鼠 标 指针 悬浮 于 超 链接 250 毫 
秒 之 后 在 2500 毫秒 内 以 从 中 心 向 四 周 扩展 的 效果 来 显示 超 链接 的 提示 框 ,其 中 ,show 表示 该 特效 在 
显示 工具 提示 框 的 时 候 产 生 作用 ; effect: "scale "表示 特效 是 缩放 (为 hide 时 方向 相反 ) 风 格 ; delay: 
250 表示 延迟 时 间 是 250 毫秒 ; duration:2500 表示 特效 的 持续 时 间 是 2500 毫秒 。 需 要 说 明 的 是 ， 
tooltip() 方 法 是 工具 提示 框 部 件 (Tooltip Widget) 的 方法 ,因此 在 使 用 tooltip() 方 法 时 必须 添加 
jquery-ui. min. js 和 jquery-ui. min. css 两 个 文件 。 

此 实例 的 源 文件 名 是 myHtmlA155. html。 
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372 ”以 弹跳 的 效果 显示 和 关闭 超 链 接 提示 框 


此 实例 主要 在 jquery-ui. min. js 和 jquery-ui. min. css 的 tooltip( ) 方 法 中 设置 特效 参数 bounce， 
从 而 实现 以 弹跳 的 效果 显示 和 关闭 超 链接 的 提示 框 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ， 
如 果 将 鼠标 指针 悬浮 在 “量子 力学 ” 超 链接 上 , 则 将 以 篮球 落地 的 弹跳 效果 显示 超 链接 的 提示 框 ,如 
图 372-1 所 示 ; 当 鼠 标 指针 离开 超 链接 250 毫秒 之 后 , 则 将 以 反 向 的 篮球 落地 的 弹跳 效果 关闭 超 链接 
的 提示 框 ,如 图 372-2 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 372-2 


<!doctype html >< html ><head >< meta charset = "UTF - 8"> 
<script src= "js/jquery - 3.1.1.min. js"></script> 
< script src= "js/jquery - ui.min. js"></script>< script type = "text/javascript"> 
$ (function() { 
$$(" 间 myBouncel, ##myBounce2").tooltip({// 以 弹跳 的 效果 显示 超 链 接 的 提示 框 
show: { effect: "bounce", delay: 250, duration:2500 } }); 
$(" 间 myBouncel, #myBounce2").tooltip({// 以 反 向 的 弹跳 效果 关闭 超 链接 的 提示 框 
hide: { effect: "bounce", delay: 250, duration:2500 } });}); 
</script> 
<link rel = "stylesheet" href = "css/jquery— ui.min.css">< style type = "text/css"> 
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/=* 设 置 提示 框 的 基本 样式 * / 

.ui- tooltip { padding: 10px 20px; border - radius: 20px; font: bold 14px " Helvetica Neue"，Sans 一 
Serif; box- shadow: 0 0 7px black; background: lightgoldenrodyellow; } 

/* 设 置 盒子 的 基本 样式 * / 

.myBox { 。 display: inline - block; width: 450px; padding: 15px; margin: 10px; 
background - color: #FFF; border: 1px solid # EEE; box— shadow: 5px 5px 5px 1px #999, 0 0 40px rgba(0, 
0, 0, 0.06) inset; position: relative; border - radius: 5px; } 

body { background- color: lightgray; } 
</style></head> 
<body >< div class = "myBox"><p> 有 关 现 实 存在 的 真正 意义 ,长 期 以 来 是 一 个 热烈 讨论 的 问题 。 直 到 <a id = 
"myBouncel” href = "http://baike. so. com/doc/2737738 - 2889635. html" title = "量子 力学 是 研究 微观 粒子 的 
运动 规律 的 物理 学 分 支 学 科 , 它 提供 粒子 " 似 - 粒 "、 " 似 - 波 "双重 性 ( 即 " 波 粒 二 象 性 ") 及 能 量 与 物质 相互 作用 
的 数学 描述 ."> 量 子 力学 </a>, 以 及 海 森 堡 的 <a id = "myBounce2" href = "http://baike. so. com/doc/6631264 - 
7603760. html" title = "粒子 的 位 置 与 动量 不 可 同时 被 确定 "> 测 不 准 原理 </a> 的 出 现 , 争 议 才 在 于 是 否 我 们 所 
观察 到 的 事物 存在 于 我 们 的 心智 之 外 ,或 是 如 同 理想 主义 者 所 认为 的 是 我 们 心智 感知 之 物 。 根 据 这 个 宇宙 的 概 
念 ,近来 的 实验 皆 显 示 出 ,现实 境况 除非 是 在 观测 之 下 ,否则 实际 上 可 能 并 不 存在 。 一 项 由 澳洲 国立 大 学 研究 人 
员 所 进行 的 波 粒 二 象 性 研究 中 指出 ,粒子 或 波 在 它们 被 观测 之 后 呈现 存在 的 状态 。 换 句 话 说 ,观测 就 是 一 切 ,而 
现实 的 境况 只 有 在 观测 发 生 时 才 会 存在 。</p></div></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , $ (" # myBouncel,# myBounce2")， 
tooltip( {show: {effect: "bounce" ,delay: 250, duration:2500 } )) 表 示 鼠 标 指针 悬浮 于 超 链接 250 
毫秒 之 后 在 2500 毫秒 内 以 篮球 落地 的 弹跳 效果 来 显示 超 链接 的 提示 框 ,其 中 ,show 表示 该 特效 在 显 
示 工 具 提 示 框 的 时 候 产 生 作 用 ; effect: "bounce" 表 示 特 效 是 弹跳 (为 hide 时 方向 相反 ) 风 格 ; delay: 
250 表示 延迟 时 间 是 250 毫秒 ; duration:2500 表示 特效 的 持续 时 间 是 2500 毫秒 。 需 要 说 明 的 是 ， 
tooltip() 方 法 是 工具 提示 框 部 件 (Tooltip Widget) 的 方法 ,因此 在 使 用 tooltip() 方 法 时 必须 添加 
jquery-ui, min. js 和 jdquery-ui. min. css 两 个 文件 。 

此 实例 的 源 文件 名 是 myHtmlA156. html。 


373 ”以 高 亮 的 效果 显示 和 关闭 超 链接 提示 杠 


此 实例 主要 在 jquery-ui. min. js 和 jquery-ui. min. css 的 tooltip() 方 法 中 设置 特效 参数 highlight , 
从 而 实现 以 高 亮 的 效果 显示 和 关闭 超 链 接 的 提示 框 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ， 
如 果 将 鼠标 指针 悬浮 在 “量子 力学 " 超 链 接 上 , 则 将 以 高 亮 效 果 显示 超 链接 的 提示 框 ,如 图 373-1 所 示 ; 
当 鼠 标 指针 离开 超 链接 250 毫秒 之 后 , 则 将 以 反 向 的 高 亮 效 果 关 闭 超 链 接 的 提示 框 , 如 图 373-2 所 示 。 
有 关 此 实例 的 主要 代码 如 下 。 
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<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<script src= "js/jquery- 3.1.1.min. js"></script > 
<script src= "js/jquery - ui.min. js"></script >< script type = "text/javascript"> 
$ (function() { 
$ (" 间 myHighlight1, myHighlight2"). tooltip({// 以 高 亮 的 效果 来 显示 超 链接 的 提示 框 
show: { effect: "highlight", delay: 250,duration:2500 } }); 
$ ("myHighlight1, 间 myHighlight2"). tooltip({// 以 高 亮 的 反 向 效果 关闭 超 链接 的 提示 框 
hide: { effect: "highlight", delay: 250, duration:2500 } }); }); 
</script > 
<link rel = "stylesheet" href = "css/jquery ~ ui.min.css">< style type = "text/css"> 
/* 设 置 提示 框 的 基本 样式 */ 
.ui~ tooltip { padding: 10px 20px; border - radius: 20px; font: bold 14px "Helvetica Neue", Sans— 
Serif; box - shadow: 0 0 7px black; background: green; } 
/* 设 置 盒子 的 基本 样式 * / 
.myBox { display: inline- block; width: 450px; padding: 15px; margin: 10px; 
background - color: #FFF; border: lpx solid # EEE; box - shadow: 5px 5px 5px lpx #999, 0 0 
40px rgba(0, 0, 0, 0.06) inset; position: relative; border - radius: 5px;} 
body { background— color: lightgray; } 
</style></head> 
<body >< div class = "myBox"><p> 有 关 现实 存在 的 真正 意义 ,长 期 以 来 是 一 个 热烈 讨论 的 问题 。 直 到 <a id = 
"myHighlight1l”href = "http://baike. so. com/doc/2737738 - 2889635. html" title = "量子 力学 是 研究 微观 粒 
子 的 运动 规律 的 物理 学 分 支 学 科 , 它 提 供 粒 子 " 似 - 粒 "、" 似 - 波 " 双 重 性 ( 即 " 波 粒 二 象 性 ") 及 能 量 与 物质 相互 
作用 的 数学 描述 "> 量子 力学 </a>, 以 及 海 森 保 的 <a id = "myHighlight2" href = "http://baike. so. com/doc/ 
6631264 - 7603760.html" title= "粒子 的 位 置 与 动量 不 可 同时 被 确定 "> 测 不 准 原理 </a> 的 出 现 ,争议 才 在 于 
是 否 我 们 所 观察 到 的 事物 存在 于 我 们 的 心智 之 外 ,或 是 如 同 理想 主义 者 所 认为 的 是 我 们 心智 感知 之 物 。 根 据 这 
个 宇宙 的 概念 ,近来 的 实验 皆 显 示 出 ,现实 境况 除非 是 在 观测 之 下 ,否则 实际 上 可 能 并 不 存在 。 一 项 由 澳洲 国立 
大 学 研究 人 员 所 进行 的 波 粒 二 象 性 研究 中 指出 ,粒子 或 波 在 它们 被 观测 之 后 呈现 存在 的 状态 。 换 句 话说 ,观测 
就 是 一 切 ,而 现实 的 境况 只 有 在 观测 发 生 时 才 会 存在 。</p></div></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 . 在 该 部 分 代码 中 , $ ("# myHighlightl， 
# myHighlight2"). tooltip({show:{ effect: "highlight" ,delay: 250,duration:2500 } )) 表 示 鼠 标 指针 
悬浮 于 超 链 接 250 毫秒 之 后 在 2500 毫秒 内 以 高 亮 效果 显示 超 链 接 的 提示 框 , 其 中 ,show 表示 该 特效 
在 显示 工具 提示 框 的 时 候 产 生 作用 ;effect: “highlight" 表 示 特 效 是 高 亮 (为 hide 时 方向 相反 ) 风格; 
delay:250 表示 延迟 时 间 是 250 毫秒 ; duration:2500 表示 特效 的 持续 时 间 是 2500 毫秒 。 需 要 说 明 的 
是 ,tooltip() 方 法 是 工具 提示 框 部 件 (Tooltip Widget) 的 方法 ,因此 在 使 用 tooltip() 方 法 时 必须 添加 
jquery-ui. min. js 和 jquery-ui. min. css 两 个 文件 。 

此 实例 的 源 文件 名 是 myHtmlA157. html。 


HTML5+CSS3 炫 酷 应 用 实例 集锦 


374 ”以 震动 的 效果 显示 和 关闭 超 链 接 提示 框 


此 实例 主要 在 jquery-ui. min. js 和 jquery-ui. min. css 的 tooltip() 方 法 中 设置 特效 参数 shake, 从 
而 实现 以 震动 的 效果 显示 和 关闭 超 链 接 的 提示 框 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,如 
果 将 鼠标 指针 悬浮 在 “量子 力学 " 超 链 接 上 . 则 将 在 水 平方 向 上 以 左右 来 回 震 动 的 效果 显示 超 链接 的 
提示 框 ,如 图 374-1 所 示 ; 当 鼠 标 指针 离开 超 链接 250 毫秒 之 后 , 则 将 以 反 向 的 震动 效果 关闭 超 链接 
的 提示 框 , 如 图 374-2 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 374-1 
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图 374-2 


<! doctype html >< html >< head >< meta charset = "UTF - 8"> 
< script src= "js/jquery - 3.1.1.min. js"></script> 
< script src= "js/jquery — ui.min. js"></script>< script type = "text/javascript"> 
$ (function() { 
$(" 间 myShakel, ##myShake2").tooltip({// 以 震动 的 效果 显示 超 链接 的 提示 框 
show: { effect: "shake", delay: 250, duration:2500 } }); 
$("#myShakel, #myShake2").tooltip({// 以 震动 的 反 向 效果 关闭 超 链接 的 提示 框 
hide: { effect: "shake", delay: 250, duration:2500 } }); }); 
</script> 
<link rel = "stylesheet" href = "css/jquery ~ ui.min.css"><style type = "text/css"> 
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/* 设 置 提示 框 的 基本 样式 */ 
.ui- tooltip { padding: 10px 20px; border - radius: 20px; font: bold 14px "Helvetica Neue", Sans— 
Serif; box — shadow: 0 0 7px black; background: green; } 

/* 设 置 盒子 的 基本 样式 * / 

.myBox { display: inline— block; width: 450px;padding: 15px; margin: 10px; background — color: #FFF; 
border: 1px solid # EEE; box — shadow: 5px 5px 5px 1px #999, 0 0 40px rgba(0, 0, 0, 0.06) 
inset; position: relative; border - radius: 5px; } 

body { background- color: lightgray;} 

</style></head> 

<body ><div class = "myBox"><p> 有 关 现 实 存在 的 真正 意义 ,长 期 以 来 是 一 个 热烈 讨论 的 问题 。 直 到 <a id= 
"myShakel" href = "http://baike. so. com/doc/2737738 - 2889635. html" title = "量子 力学 是 研究 微观 粒子 的 
运动 规律 的 物理 学 分 支 学 科 , 它 提 供 粒子 " 似 - 粒 "、" 似 - 波 " 双 重 性 ( 即 " 波 粒 二 象 性 ") 及 能 量 与 物质 相互 作用 
的 数学 描述 ."> 量 子 力学 </a >, 以 及 海 森 堡 的 <a id = "myShake2" href = "http://baike. so. com/doc/6631264 - 
7603760. html" title = "粒子 的 位 置 与 动量 不 可 同时 被 确定 "> 测 不 准 原理 </a> 的 出 现 , 争 议 才 在 于 是 否 我 们 所 
观察 到 的 事物 存在 于 我 们 的 心智 之 外 ,或 是 如 同 理想 主义 者 所 认为 的 是 我 们 心智 感知 之 物 。 根 据 这 个 宇宙 的 概 
念 ,近来 的 实验 皆 显 示 出 ,现实 境况 除非 是 在 观测 之 下 ,否则 实际 上 可 能 并 不 存在 。 一 项 由 澳洲 国立 大 学 研究 人 
员 所 进行 的 波 粒 二 象 性 研究 中 指出 ,粒子 或 波 在 它们 被 观测 之 后 呈现 存在 的 状态 。 换 句 话说 ,观测 就 是 一 切 ,而 
现实 的 境况 只 有 在 观测 发 生 时 才 会 存在 。</p></div></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , $ (" #myShakel,#myShake2"). 
tooltip( {show: {effect: "shake" ,delay:250, duration:2500 ) )) 表 示 鼠 标 指针 悬浮 于 超 链接 250 毫秒 
之 后 在 2500 毫秒 内 在 水 平方 向 上 以 左右 来 回 震 动 的 效果 显示 超 链 接 的 提示 框 ,其 中 ,show 表示 该 特 
效 在 显示 工具 提示 框 的 时 候 产 生 作 用 ; effect:"shake" 表 示 特 效 是 震动 (为 hide 时 方向 相反 ) 风 格 ; 
delay:250 表示 延迟 时 间 是 250 毫秒 ; duration:2500 表示 特效 的 持续 时 间 是 2500 毫秒 。 需 要 说 明 的 
是 ,tooltipO 〇 方法 是 工具 提示 框 部 件 (Tooltip Widget) 的 方法 ,因此 在 使 用 tooltip() 方 法 时 必须 添加 
jquery-ui, min, js 和 jquery-ui, min. css 两 个 文件 。 

此 实例 的 源 文件 名 是 myHtmlA158. html。 


375 ”以 抽 展 滑动 的 效果 显示 和 关闭 超 链接 提示 框 


此 实例 主要 在 jquery-ui. min. js 和 jquery-ui. min. css 的 tooltip() 方 法 中 设置 特效 参数 slide, 从 
而 实现 以 抽 层 滑动 的 效果 显示 和 关闭 超 链接 的 提示 框 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 
时 ,如 果 将 鼠标 指针 悬浮 在 “量子 力学 " 超 链接 上 , 则 将 在 水 平方 向 上 从 左 至 右 滑 出 超 链 接 的 提示 框 ， 
如 图 375-1 所 示 ; 当 鼠 标 指针 离开 超 链接 250 毫秒 之 后 , 则 将 反 向 滑动 关闭 超 链 接 的 提示 框 ,如 
图 375-2 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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有 关 现 实 存在 的 真 下 意义， 长 期 以 来 是 一 个 热烈 讨论 的 问题 。 直 
到 全 子 力学 ， 以 及 流标 堡 的 测 不 准 折 于 的 册 现 ， 争 议 才 在 于 是 
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<!doctype html ><html >< head >< meta charset = "UTF - 8"> 
<script src= "js/jquery - 3.1.1.min. js"></script > 
<script src= "js/jquery - ui.min. js"></script >< script type = "text/javascript"> 
$ (function() { 
$$ ("##mySlidel, #mySlide2") .tooltip({// 以 抽 居 滑动 的 效果 来 显示 超 链接 的 提示 框 
show: { effect: "slide", delay: 250, duration:2500 } }); 
$ ("mySlidel, #mySlide2").tooltip({// 以 抽 层 滑动 的 反 向 效果 来 关闭 超 链接 的 提示 框 
hide: { effect: "slide",delay: 250, duration:2500 } });}); 
</script> 
<link rel = "stylesheet" href = "css/jquery — ui.min.css">< style type = "text/css"> 
/* 设 置 提示 框 的 基本 样式 * / 
.ui- tooltip { padding: 10px 20px; border - radius: 20px; font: bold 14px " Helvetica Neue", Sans— 
Serif; box- shadow: 0 0 7px black; background: cyan;} 

/* 设 置 盒子 的 基本 样式 * / 

.myBox { display: inline - block; width: 450px; padding: 15px;margin: 10px; background - color: # FFF; 
border: 1px solid # EEE; box - shadow: 5px 5px 5px 1px #999, 0 0 40px rgba(0, 0, 0, 0.06) 
inset; position: relative;border - radius: 5px;} 

body { background - color: lightgray;} 

</style></head> 

<body >< div class = "myBox"><p> 有 关 现 实 存在 的 真正 意义 ,长 期 以 来 是 一 个 热烈 讨论 的 问题 。 直 到 <a id = 
"mySlidel”href = "http://baike. so. com/doc/2737738 - 2889635. html”title = "量子 力学 是 研究 微观 粒子 的 
运动 规律 的 物理 学 分 支 学 科 , 它 提 供 粒子 " 似 - 粒 "、" 似 - 波 " 双 重 性 ( 即 " 波 粒 二 象 性 ") 及 能 量 与 物质 相互 作用 
的 数学 描述 "> 量子 力学 </a >, 以 及 海 森 堡 的 <a id = "mySlide2”href = "http://baike. so. com/doc/6631264 - 
7603760. html” title = "粒子 的 位 置 与 动量 不 可 同时 被 确定 "> 测 不 准 原理 </a> 的 出 现 ,争议 才 在 于 是 否 我 们 所 
观察 到 的 事物 存在 于 我 们 的 心智 之 外 ,或 是 如 同 理想 主义 者 所 认为 的 是 我 们 心智 感知 之 物 。 根 据 这 个 宇宙 的 概 
念 , 近 来 的 实验 皆 显 示 出 ,现实 境况 除非 是 在 观测 之 下 , 否则 实际 上 可 能 并 不 存在 。 一 项 由 澳洲 国立 大 学 研究 人 
员 所 进行 的 波 粒 二 象 性 研究 中 指出 ,粒子 或 波 在 它们 被 观测 之 后 呈现 存在 的 状态 。 换 句 话说 ,观测 就 是 一 切 ,而 
现实 的 境况 只 有 在 观测 发 生 时 才 会 存在 。</p></div></body ></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , $ (" # mySlidel, #mySlide2"). 
tooltip({show: { effect: "slide" ,delay: 250,duration:2500))) 表 示 鼠 标 指针 悬浮 于 超 链 接 250 毫秒 
之 后 在 2500 毫秒 内 在 水 平方 向 上 从 左 至 右 滑 出 超 链接 的 提示 框 ,其 中 ,show 表示 该 特效 在 显示 工具 
提示 框 的 时 候 产生 作用 ; effect: "slide" 表 示 特 效 是 滑动 (为 hide 时 方向 相反 ) 风 格 ; delay :250 表示 
延迟 时 间 是 250 毫秒 ; duration:2500 表示 特效 的 持续 时 间 是 2500 毫秒 。 需 要 说 明 的 是 ,tooltip() 方 
法 是 工具 提示 框 部 件 (Tooltip Widget) 的 方法 ,因此 在 使 用 tooltip() 方 法 时 必须 添加 jquery-ui. min. 
js 和 jquery-ui. min. css 两 个 文件 。 

此 实例 的 源 文件 名 是 myHtmlA159. html。 
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376 ”在 显示 日 期 选择 器 时 附加 弹跳 动画 效果 


此 实例 主要 在 jquery-ui. min. js 和 jquery-ui. min. css 的 datepicker () 方 法 中 设置 动画 参数 
datepicker("option","showAnim", "bounce") ,从 而 实现 在 显示 日 期 选择 器 时 附加 弹跳 动画 效果 。 
当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 , 单 击 “ 出 生日 期 :" 输 入 框 , 即 可 用 弹跳 的 效果 显示 日 期 
选择 器 ,如 图 376-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 376-1 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<script src= "js/jquery — 3.1.1.min.js"></script> 
<script src= "js/jquery - ui. min. js"></script >< script type = "text/javascript"> 
$ (function() { 
$ ("#myDatepicker"). datepicker( ); // 显 示 默 认 的 日 期 选择 器 
// 显 示 带 弹跳 效果 的 日 期 选择 器 
$ ("#myDatepicker").datepicker("option", "showAnim","bounce"” ); 
1D); 
</script> 
<link rel = "stylesheet" href = "css/jquery ~ ui.min.css">< style type = "text/css"> 
/* 注意 需要 默认 图 标 文件 : images\ui - icons_777777_256x240.pngx / 
/* 注意 需要 默认 图 标 文件 : imagesNui - icons 444444_256x240. png x / 
/* 设 置 日 期 选择 器 的 宽度 * / 
#myDatepicker{ width: 275px;} 
</style></head> 
<body><p align = "center"> 出 生日 期 : < input type = "text" id= "myDatepicker"></p> 
</body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , $("#myDatepicker")，datepicker 
("option"，"showAnim", "bounce") 中 的 bounce 表示 弹跳 效果 的 动画 ,此 方法 支持 的 其 他 动画 有 
slideDown \fadeIn blind ,clip drop ,fold .slide 等 。 需要 说 明 的 是 ,datepicker() 方 法 是 日 期 选择 器 部 
件 (Datepicker Widget) 的 方法 ,因此 在 使 用 datepicker () 方 法 时 必须 添加 jquery-ui. min. js 和 jquery- 
ui, min. css 两 个 文件 。 此 外 ,由 于 相关 的 图 标 源 自 默 认 图 标 文 件 ui-icons_777777_256x240. png 和 ui- 
icons_444444_256x240. png(images 文件 夹 下 ) ,因此 需要 添加 这 些 文件 才能 正确 显示 ,和 否则 在 图 标 位 
置 会 显示 空白 。 

此 实例 的 源 文件 名 是 myHtmlA167. html。 
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377 ”通过 拖 动 滑 块 方式 改变 视频 的 播放 进度 


视频 


要 设置 < input > 标签 的 type 属性 为 range, 从 而 创建 一 个 滑 块 ,并 实现 以 拖 动 滑 块 的 方 


式 来 改变 视频 的 播放 进度 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,如 果 使 用 鼠标 向 右 拖 动 滑 
块 , 则 视频 的 播放 进度 前 进 ; 如 果 使 用 鼠标 向 左 拖 动 滑 块 , 则 视频 的 播放 进度 后 退 ,如 图 377-1 所 示 。 
有 关 此 实例 的 主要 代码 如 下 。 
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图 377-1 


<!doctype html >< html >< head >< meta charset = "UTF — 8"> 


<script src= "js/jquery - 3.1.1.min. js"></script > 
< script type = "text/javascript"> 


$ (function() { 


var myTotalMinute, myTotalSecond, myCurrentMinute, myCurrentSecond = 0; 
$ ("#myProgress").css("width", $ ("video")[0]. offsetWidth); 
// 加 载 视频 时 获取 视频 的 时 间 长 度 信 息 


$ ("video")[0].addEventListener("loadedmetadata", function(){ 
myTotalMinute = parseInt (this. duration/60); 


myTotalSecond = parseInt (this. duration% 60); 


myCurrentMinute = 0; myCurrentSecond = 0; 
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$("#myStatus"). text(" 时 间 : ”+ myCurrentMinute + ":" + myCurrentSecond + "/" + myTotalMinute + 
":"+myTotalSecond); 
$ ("#myProgress"). prop("min" ,0); 
$ ("#myProgress").prop("max", (this. duration). toF ixed(0)); 
Ds; 
// 定 时 同步 进度 条 的 滑 块 位 置 和 视频 的 当前 播放 位 置 
var timer = setInterval(function(){ 
$("#myProgress").val( $ ("video")[0]. currentTime); 
myCurrentMinute = parseInt( $ ("#myProgress").val()/60); 
myCurrentSecond = parseInt( $ ("#myProgress").val() %60); 
$ ("#myStatus"). text(" 时 间 : " +myCurrentMinute + ":" + myCurrentSecond + "/" +myTotalMinute+":"+ 
myTotalSecond); 
},10); 
// 在 进度 条 滑 块 被 拖 动 时 改变 视频 的 当前 播放 位 置 
$ ("#myProgress").on("input propertychange", function(){ 
myCurrentMinute = parseInt( $ (this).val()/60); 
myCurrentSecond = parseInt( $ (this).val() % 60); 
$ ("#myStatus").text(" 时 间 : "+ myCurrentMinute + ":" + myCurrentSecond + "/"+myTotalMinute+":" 
+ myTotalSecond); 
$ ("video")[0].currentTime = parseInt( $ ("#myProgress").val()); 
$ ("video")[0]. play(); 
1);}); 
</script> 
<style type= "text/css"> 
body{ background - color: lightgrey; } 
video{ width:400px; height:250px; } 
input{ width:400px;} 
</style></head> 
<body>< div align = "center"> 
<video src= "media/a073myVideo. webm" autoplay= "autoplay"></video > 
<p>< input type = "range" id = "myProgress" value = "0"/></p> 
<p id= "myStatus"> 时 间 : </p></div></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,range 属性 值 是 HTMIL5 中 的 < input > 
标签 的 type 属性 的 新 届 性 值 .该 属性 值 指定 范围 值 的 输入 字段 .在 HTML 页 面 中 显示 为 滑 块 。 
$("#myProgress"). prop("min",0) 用 于 设置 进度 条 ( 滑 块 ) 的 最 小 值 , $ ("# myProgress"). prop 
("max", (this. duration). toFixed(0)) 用 于 根据 视频 的 播放 时 间 设 置 进度 条 ( 滑 块 ) 的 最 大 值 。prop() 
方法 是 jQuery 的 属性 操作 方法 ,用 于 设置 或 返回 当前 jQuery 对 象 所 匹配 的 元 素 的 属性 值 , 该 方法 的 
语法 格式 如 下 。 


jQueryObject. prop( propertyName [，value ] ) 


如 果 指 定 了 value 参数 , 则 表示 设置 属性 propertyName 的 值 为 value; 如 果 没有 指定 value 参数 ， 
则 表示 返回 属性 propertyName 的 值 。 

$("video")[L0]. currentTime 表示 视频 的 当前 播放 时 间 位 置 , $ ("video")[L0j. play() 表 示 播 放 
视频 。 

此 实例 的 源 文 件 名 是 myHtmlA176. html。 
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378 在 播放 视频 .音频 时 同步 显示 关联 字幕 


此 实例 主要 通过 使 用 < track > 标签 实现 在 页 面 上 播放 视频 或 音频 时 同步 显示 字幕 。 当 在 浏览 器 
中 显示 该 页 面 时 , 单 击 视频 工具 栏 上 的 “播放 "按钮 则 立即 播放 视频 ,并 在 屏幕 上 同步 显示 字幕 ,如 
图 378-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 378-1 


<!doctype html >< html >< head >< meta charset = UTF - 8></head> 
<body >< video src = "media/a073myVideo. webm" controls width= "400px" height = "300px"> 
<track kind = "subtitles" src= "media/a073myText. vtt" default /></video> 
</body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,< video > 标签 用 于 定义 视频 ,比如 电 
影片 段 或 其 他 视频 流 ; < track > 标签 则 用 于 为 video 元 素 之 类 的 媒介 规定 外 部 文本 轨道 , 即 人 们 通常 
所 说 的 字幕 。< track > 标签 常用 的 属性 及 说 明 如 表 378-1 所 示 。 


表 378-1 < track > 标签 常用 的 属性 及 说 明 
































属 性 值 描 述 
default default 规定 该 轨道 是 默认 的 ,假如 没有 选择 任何 轨道 
captions 
chapters 
kind descriptions 表示 轨道 属于 什么 文本 类 型 
metadata 
subtitles 
label label 轨道 的 标签 或 标题 
src url 轨道 的 URL 
srclang language_code 轨道 的 语言 , 若 kind 属性 值 是 "subtitles", 则 该 属性 是 必需 的 











下 面 是 此 实例 所 采用 的 字幕 文件 a073myText. vtt 的 部 分 内 容 。 


WEBVTT FILE 
Cue-1 
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00:00:00.500 --> 00:00:02.000 D:vertical A:start 
The Web is always changing 
2 
00:00:02.500 --> 00:00:04.300 
and the way we access it is changing 
3 
00:00:05.000 --> 00:00:07.000 
The source of that change is <c.highlight > you </c> 
4 


从 上 面 的 内 容 可 以 得 知 ,track 元 素 是 沿 着 video 元 素 所 使 用 的 时 间 轴 指定 的 时 间 来 同步 显示 字 
幕 的 。track 元 素 所 使 用 的 字幕 文件 通常 采用 如 上 所 示 的 WebVTT 标记 文件 ,可 以 在 此 文件 中 通过 
设置 标记 来 自 定义 显示 内 容 文字 的 下 夯 线 等 显示 风格 。 

此 实例 的 源 文件 名 是 myHtmlA073. html。 


379 ”以 一 定 的 角度 旋转 正在 播放 的 视频 窗口 


此 实例 主要 使 用 jQuery 的 css() 方 法 设置 video 元 素 的 transform 属性 ,从 而 实现 以 一 定 的 角度 
旋转 正在 播放 的 视频 窗口 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 , 单 击 " 以 一 定 的 角度 旋转 正 
在 播放 的 视频 窗口 ”按钮 , 则 视频 播放 窗口 旋转 30" 之 后 的 效果 如 图 379-1 所 示 。 有 关 此 实例 的 主要 
代码 如 下 。 
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以 一 定 的 租 度 族 恩 正在 短 放 的 视频 而 口 








图 379-1 


<!doctype html ><html >< head ><meta charset = UIF - 8> 
<script src= "js/jquery -3.1.1.min.js"></script >< script language = "javascript"> 
function rotateVideo( ){ // 以 一 定 的 角度 旋转 正在 播放 的 视频 窗口 
$ ("#myVideo").css("position", "relative"); 
$ ("myVideo").css("top", "55px"); ”// 设 置 窗口 左上 角 的 top 坐标 
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$("#myVideo").css("left","35px" ); // 设 置 窗口 左上 角 的 left 坐标 
$ ("#myVideo"). css("transform", "rotate(30deg)"); 
} 
</script ></head> 


<body><p>< input type = "button" value= "以 一 定 的 角度 旋转 正在 播放 的 视频 窗口 " 
onclick = "rotateVideo()" style= "width:400px"></p> 

<video id= "myVideo" src = "media/myMovie.ogg”controls = "controls" width = "330px"> 
</video ></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,css() 方 法 是 一 个 jQuery 方法 ,用 于 
设置 或 返回 被 选 元 素 的 一 个 或 多 个 样式 属性 。jQuery 代码 css("transform","rotate(30deg)") 等 效 


于 CSS 代码 style 二 "transform: rotate(30deg)", 即 把 video 元 素 旋转 30 。 
此 实例 的 源 文件 名 是 myHtmlA101. html。 


380 ”在 垂直 方向 上 翻转 正在 播放 的 视频 图 像 


此 实例 主要 使 用 jQuery 的 css() 方 法 设置 video 元 素 的 transform 属性 ,从 而 实现 在 垂直 方向 上 
翻转 正在 播放 的 视频 图 像 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 , 单 击 * 垂 直 翻 转 视频 图 像 ” 
按钮 , 则 正在 播放 的 视频 画面 在 垂直 方向 上 翻转 之 后 的 效果 如 图 380-1 所 示 。 有 关 此 实例 的 主要 代码 
如 下 。 
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图 380-1 


<!doctype html ><html ><head><meta charset = UIF -8> 
<script src= "js/jquery - 3.1.1.min. js"></script >< script language = "javascript"> 
function flipVideo( ){// 垂 直 翻 转 视频 图 像 
$ ("#myVideo").css("transform", "scaleY¥( —1)"); 
} 
</script ></head> 
<body ><p>< input type = "button" value = "垂直 翻转 视频 图 像 ” onclick = "flipVideo()" 
style = "width:350px"></p> 
<video id= "myVideo" src = "media/myMovie.ogg”controls = "controls" width= "350px" > 
当前 浏览 器 不 支持 此 视频 播放 功能 </video></body ></html > 
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上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,css() 方 法 是 一 个 jQuery 方法 ,用 于 
设置 或 返回 被 选 元 素 的 一 个 或 多 个 样式 属性 ,该 方法 的 语法 声明 如 下 。 


$ (selector).css(name, value) 


其 中 ,参数 name 用 于 规定 CSS 属性 的 名 称 .该 参数 可 包含 任何 CSS 属性 ,例如 "color"; 参数 
value 是 可 选 参数 ,用 于 规定 CSS 属性 的 值 ,该 参数 可 包含 任何 CSS 属性 值 ,例如 "red"。 如 果 设 置 了 
空 字符 串 值 , 则 从 元 素 中 删除 指定 属性 。 

jQuery 代码 css("transform", "scaleY( 一 1)") 等 效 于 CSS 代码 style 二 "transform:scaleY( 一 1)", 即 在 
垂直 方向 上 翻转 选择 的 元 素 。 

此 实例 的 源 文件 名 是 myHtmlA089. html。 


381 在 水 平方 向 上 镜像 正在 播放 的 视频 图 像 


此 实例 主要 使 用 jQuery 的 css() 方 法 设置 video 元 素 的 transform 属性 ,从 而 实现 在 水 平方 向 上 
镜像 正在 播放 的 视频 图 像 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 , 单 击 “ 水 平 镜像 视频 图 像 ” 
按钮 , 则 正在 播放 的 视频 画面 在 水 平方 向 上 镜像 之 后 的 效果 如 图 381-1 所 示 。 有 关 此 实例 的 主要 代码 
如 下 。 
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水 平 沪 多 视频 图 像 











图 381-1 


<!doctype html ><html >< head >< meta charset = UIF -8> 
< script src= "js/jquery -3.1.1.min. js"></script>< script language = "javascript"> 
function mirrorVideo( ){// 水 平 镜像 视频 图 像 
$ ("#myVideo").css("transform", "scaleX( 一 1)")7 
} 
</script ></head> 
<body><p>< input type = "button" value = "水 平 镜像 视频 图 像 ” onclick = "mirrorVideo()" style = "width: 
350px"></p> 
<video id= "myVideo" src = "media/myMovie.ogg" controls = "controls" width= "350px" > 
当前 浏览 器 不 支持 此 视频 播放 功能 </video></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,css() 方 法 是 一 个 jQuery 方法 ,用 于 
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设置 或 返回 被 选 元 素 的 一 个 或 多 个 样式 属性 。jQuery 代码 css("transform"。"scaleX( 一 1)") 等 效 于 
CSS 代码 style 王 "transform:scaleX( 一 1)", 即 在 水 平方 向 上 镜像 选择 的 元 素 。 
此 实例 的 源 文件 名 是 myHtmlA090. html。 


382 ”在 垂直 方向 上 压缩 视频 产生 宽屏 幕 效果 


此 实例 主要 使 用 jQuery 的 css() 方 法 设置 video 元 素 的 transform 属性 ,从 而 实现 在 垂直 方向 上 
压缩 视频 图 像 产 生 宽 屏幕 效果 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 , 单 击 * 在 垂直 方向 上 压 
缩 视频 图 像 产 生 宽屏 幕 效果 ”按钮 , 则 正在 播放 的 视频 图 像 在 垂直 方向 上 压缩 之 后 的 宽屏 幕 效 果 如 
图 382-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 





tH 
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图 382-1 


<!doctype html >< html >< head >< meta charset = UIF -8> 
< script src= "js/jquery- 3.1.1.min. js"></script >< script language = "javascript"> 
function wideVideo( ){// 在 垂直 方向 上 压缩 视频 图 像 产生 宽屏 幕 效 果 
$("#myVideo").css("transform", "scaleY(0.75)"); 
// 在 水 平方 向 上 压缩 视频 图 像 
//S ("#myVideo").css("transform","scaleX(0.75)"); 
// 在 水 平和 垂直 方向 上 同时 压缩 视频 图 像 
//S ("#myVideo").css("transform","scale(0.75)"); 
} 
</script ></head> 
<body ><p>< input type = "button" value = "在 垂直 方向 上 压缩 视频 图 像 产生 宽屏 幕 效果 " 
onclick = "wideVideo()" style= "width:350px"></p> 
<video id= "myVideo" src = "media/myMovie.ogg" controls= "controls" width = "350px" > 
当前 浏览 器 不 支持 此 视频 播放 功能 </video></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,css() 方 法 是 一 个 jQuery 方法 ,用 于 
设置 或 返回 被 选 元 素 的 一 个 或 多 个 样式 属性 。jQuery 代码 css("transform"，"scaleY(0.75)") 等 效 
于 CSS 代码 style 一 "transform:scaleY(0. 75)". 即 在 垂直 方向 上 压缩 选择 的 元 素 。 

此 实例 的 源 文件 名 是 myHtmlA091. html。 





383 ”访问 摄像 头 并 单 击 蕉 取 视 频 中 的 图 像 
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此 实例 主要 通过 使 用 navigator. getUserMedia() 方 法 和 drawlmage() 方 法 实现 访问 本 地 视频 摄 
像 头 并 单 击 截取 图 像 。 在 测试 实例 程序 时 首先 打开 本 地 视频 摄像 头 设备 .然后 在 Google Chrome 浏 
览 器 中 显示 该 页 面 , 此 时 将 自动 同步 显示 本 地 视频 摄像 头 设备 录制 的 视频 ,如 图 383-1 的 上 半 部 分 所 
示 , 单 击 视 频 画 面 , 将 截取 该 视频 画面 ,如 图 383-1 的 下 半 部 分 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 383-1 


<!doctype html >< html >< head >< meta charset = UIF -8> 
<script src= "js/jquery - 3.1.1.min. js"></script >< script language = "javascript"> 
$ (document). ready(function() { 
navigator. getUserMedia = navigator. getUserMedia || 
navigator. webkitGetUserMedia || window. navigator. mozGetUserMedia; 
window. URL = window. URL | | window. webkitURL; 
var myVideo = document. getElementById( 'myVideo'); 
var myCanvas = document. getElementById( 'myCanvas' ); 
var myContext = myCanvas. getContext( '2d'); 
var myMedia = null; 
// 访 问 本 地 摄像 头 
navigator. getUserMedia( {video:true, audio:false}, 
function(stream) { 
myVideo. src = window. URL. createObjectURL( stream); 
myMedia = stream; 
},function(err) { 
alert(err); 
D; 
$ ("#myVideo").click(function() {// 单 击 视频 画面 截取 图 像 
if (myMedia) { 
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myContext. drawImage(myVideo, 0, 0); 
document. getElementById( 'myImage' ) . src = myCanvas. toDataURL( ' image/png'); 
} 0)21); 
</script ></head> 
<body ><video id= "myVideo" width= "400" height = "300" autoplay ></video> 
<ing src="" id= "myImage" /> 
<canvas width= "400" height = "300" style= "display:none;" id= "myCanvas" > 
</canvas ></body ></html > 





上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,navigator. getUserMedia() 方 法 用 于 
访问 客户 端 摄像 头 或 麦克 风 等 视频 /音频 输入 设备 ,该 方法 使 用 3 个 参数 。 第 1 个 参数 值 为 一 个 约束 
(constraints) 对 象 , 该 对 象 具有 一 个 video 属性 及 一 个 audio 属性 ,属性 值 均 为 布尔 类 型 , 当 video 属性 
值 为 true 时 代表 捕捉 视频 信息 , 当 video 属性 值 为 false 时 代表 不 捕捉 视频 信息 ; 当 audio 属性 值 为 
true 时 代表 捕捉 音频 信息 , 当 audio 属性 值 为 false 时 代表 不 捕捉 音频 信息 。 第 2 个 参数 值 是 开发 者 
自行 定义 的 当 访 问 用 户 设 备 成 功 时 所 执行 的 回调 函数 ,该 回调 函数 具有 一 个 参数 ,参数 值 是 一 个 
MediaStream 对 象 ,在 浏览 器 执行 getUserMedia( ) 方 法 时 将 自动 创建 该 对 象 ,该 对 象 代表 同步 媒体 数 
据 流 。 第 3 个 参数 值 是 开发 者 自行 定义 的 当 访 问 用 户 本 地 设备 失败 时 所 执行 的 回调 函数 ,该 回调 函 
数 具 有 一 个 参数 ,参数 值 是 一 个 error 对 象 , 代 表 浏 览 器 抛 出 的 错误 对 象 。drawImage() 方 法 用 于 将 
video 元 素 的 某 一 帧 画面 输出 到 canvas 元 素 。 

此 实例 的 源 文件 名 是 myHtmlA088. html。 


384 ”使 用 article 元 素 嵌 人 文件 来 播放 视频 


此 实例 主要 通过 使 用 article 元 素 实 现 以 插件 的 形式 来 播放 视频 等 媒体 文件 。 当 在 浏览 器 中 显示 
该 页 面 时 将 自动 播放 预 置 的 视频 文件 ,如 图 384-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 384-1 


<!doctype html >< html >< head >< meta charset = UTF - 8></head> 
<body><article><object> 
<param name = "allowFullScreen" value= "true"> 
< embed src = "media/myMovie. ogg" width = "350" height = "200"></embed> 
</param></object ></article> 
</body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,< article > 标签 是 HTML5 新 增 的 标 
签 。< article > 标签 定义 外 部 的 内 容 ,外 部 内 容 可 以 是 来 自 一 个 外 部 的 新 闻 提 供 者 的 一 篇 新 的 文章 ,或 
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者 来 自 blog 的 文本 ,或 者 是 来 自 论坛 的 文本 , 亦 或 是 来 自 其 他 外 部 源 内 容 。 除 此 之 外 ,也 可 以 像 实例 
这 样 在 其 中 嵌入 视频 文件 播放 视频 。 
此 实例 的 源 文件 名 是 myHtmlA020. html。 


385 ”在 页 面 中 播放 mp4 等 格式 的 多 媒体 文件 


此 实例 主要 通过 使 用 < video > 标签 实现 在 页 面 中 播放 mp4 等 格式 的 多 媒体 文件 。 当 在 浏览 器 中 
显示 该 页 面 时 预 置 的 视频 处 于 等 待 状 态 , 单 击 控制 栏 上 的 “播放 ”按钮 , 则 将 播放 视频 ,如 图 385-1 所 
示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 385-1 


<!doctype html >< html >< head >< meta charset = UTF - 8></head> 

<body>< video src = "media/myMovie. ogg" controls = "controls" width="350px" > 
当前 浏览 器 不 支持 此 视频 播放 功能 </video> 

</body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,< video > 标签 是 HTML5 新 增 的 用 
于 播放 多 媒体 文件 的 标签 ,该 标签 对 应 的 video 元 素 支持 Ogg、MPEG4、WebM 等 3 种 视频 格式 ,其 中 
Ogg 是 带 有 Theora 视频 编码 和 Vorbis 音频 编码 的 Ogg 文件 ,MPEG4 是 带 有 H. 264 视频 编码 和 
AAC 音频 编码 的 MPEG4 文件 , WebM 是 带 有 VP8 视频 编码 和 Vorbis 音频 编码 的 WebM 文件 。 
video 元 素 的 control 属性 提供 用 于 控制 媒体 的 播放 、 和 暂停 和 音量 等 按钮 ,src 属性 指定 多 媒体 文件 的 
URL。video 元 素 常用 的 属性 及 说 明 如 表 385-1 所 示 。 


表 385-1 video 元 素 常 用 的 属性 








属 性 值 描 述 

autoplay autoplay 如 果 出 现 该 属性 , 则 视频 在 就 绪 后 马上 播放 

controls controls 如 果 出 现 该 属性 , 则 向 用 户 显示 控件 ,比如 “播放 ”按钮 

height pixels 设置 视频 播放 器 的 高 度 

loop loop 如 果 出 现 该 属性 , 则 当 媒 介 文 件 完成 播放 后 再 次 开始 播放 

preload preload 如 果 出 现 该 属性 , 则 视频 在 页 面 加 载 时 进行 加 载 并 预备 播放 ; 如 果 使 用 
"autoplay" , 则 忽略 该 属性 

sre url 要 播放 的 视频 的 URI 


width pixels 设置 视频 播放 器 的 宽度 
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注意 : < video > 与 </video > 之 间 插 入 的 内 容 是 供 不 支 持 video 元 素 的 浏览 器 显示 的 。 
此 实例 的 源 文件 名 是 myHtmlA017. html。 


386 ”使 用 滤 镜 改变 视频 图 像 的 颜色 透明 度 


此 实例 主要 通过 在 jQuery 的 css( ) 方 法 中 采用 滤 镜 来 实现 以 滤 镜 的 方式 改变 视频 图 像 的 颜色 透 
明度 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 , 单 击 " 使 用 滤 镜 改变 视频 图 像 的 颜色 透明 度 ” 按 
钮 , 则 正在 播放 的 视频 图 像 的 颜色 透明 度 将 发 生 改 变 , 如 图 386-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 386-1 


<! doctype html >< html >< head >< meta charset = UIF - 8> 
< script src= "js/jquery - 3.1.1.min. js"></script>< script language = "javascript"> 
function opacityVideo( ){// 使 用 滤 镜 改变 视频 图 像 的 颜色 透明 度 
$("#myVideo").css(" — webkit — filter","opacity(0.3)"); } 
</script ></head> 
<body ><p>< input type = "button" value= "使 用 滤 镜 改变 视频 图 像 的 颜色 透明 度 " 
‘onclick = "opacityVideo()" style= "width:350px"></p> 
<video id= "myVideo" src = "media/myMovie. ogg" controls = "controls" width= "350px"> 当 前 浏览 器 不 支持 此 
视频 播放 功能 </video> 
</body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,css() 方 法 是 一 个 jQuery 方法 ,用 于 
设置 或 返回 被 选 元 素 的 属性 。jQuery 代码 css("-webkit-filter","opacity (0. 3)") 等 效 于 CSS 代码 
style 一 "-webkit-filter: opacity(0. 3)" 。opacity(0. 3) 的 参数 值 在 0 到 1 之 间 ,0 表示 完全 透明 ,1 表示 
完全 不 透明 。 

此 实例 的 源 文件 名 是 myHtmlA100. html。 


387 ”通过 滤 镜 使 视频 图 像 产 生 怀 旧 的 风格 


此 实例 主要 使 用 jQuery 的 css() 方 法 进行 颜色 过 滤 ,从 而 使 视频 图 像 产生 怀旧 风格 的 特效 。 当 
在 Google Chrome 浏览 器 中 显示 该 页 面 时 , 单 击 * 采 用 滤 镜 使 视频 图 像 产生 怀旧 风格 的 特效 "按钮 , 则 
正在 播放 的 视频 图 像 产生 的 怀旧 风格 的 效果 如 图 387-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 387-1 


<! doctype html >< html >< head>< meta charset = UTF -8> 

< script src= "js/jquery -3.1.1.min. js"></script>< script language = "javascript"> 

function sepiaVideo( ){// 采 用 滤 镜 使 视频 图 像 产 生 怀旧 风格 的 特效 
$("#myVideo").css("— webkit— filter","sepia(80 % )"); 

} 

</script ></head> 
<body ><p>< input type = "button" value = "采用 滤 镜 使 视频 图 像 产 生 怀旧 风格 的 特效 " 
onclick = "sepiaVideo( )" style = "width:350px"></p> 

<video id = "myVideo" src= "media/myMovie. ogg" controls = "controls" width= "350px"> 当前 浏览 器 不 支 
持 此 视频 播放 功能 </video> 
</body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,css() 方 法 是 一 个 jQuery 方法 ,用 于 
设置 或 返回 被 选 元 素 的 属性 。jQuery 代码 css("-webkit-filter"," sepia(80%)") 等 效 于 CSS 代码 
style 二 "-webkit-filter: sepia(80%)",sepia(80%) 方 法 中 的 百分比 值 越 大 效果 越 明显 。 

此 实例 的 源 文件 名 是 myHtmlA092. html。 


388 ”通过 色相 旋转 使 视频 图 像 显示 重组 色彩 


此 实例 主要 使 用 jQuery 的 css() 方 法 改变 图 像 的 色相 ,从 而 使 视频 图 像 呈现 改变 色相 之 后 的 重 
组 色彩 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 , 单 击 * 通 过 色相 旋转 使 视频 图 像 显示 重组 色 


By 


彩 "按钮 , 则 正在 播放 的 视频 图 像 将 呈现 重组 色彩 之 后 的 特殊 效果 ,如 图 388-1 所 示 。 有 关 此 实例 的 
主要 代码 如 下 。 


<!doctype html ><html >< head ><meta charset = UTF -8> 
<script src= "js/jquery -3.1.1.min.js"></script >< script language = "javascript"> 
function rotateVideo( ){// 通 过 色相 旋转 使 视频 图 像 显 示 重 组 色彩 
$("#myVideo").css("— webkit— filter","hue— rotate(120deg)"); 
} 
</script ></head> 
<body><p> 
< input type = "button" value= "通过 色相 旋转 使 视频 图 像 显 示 重 组 色彩 ” 
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onclick = "rotateVideo()" style= "width:350px"></p> 

<video id= "myVideo" src = "media/myMovie. ogg" controls = "controls" width = "350px"> 当 前 浏览 器 不 支持 
此 视频 播放 功能 </video> 
</body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,css() 方 法 是 一 个 jQuery 方法 ,用 于 
设置 或 返回 被 选 元 素 的 样式 属性 。jQuery 代码 css("-webkit-filter"，"hue-rotate(120deg)") 等 效 于 
CSS 代码 style 二 "-webkit-filter: hue-rotate(120deg)"。 

此 实例 的 源 文件 名 是 myHtmlA099. html。 





| 
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图 388-1 


389 ”通过 设置 饱和 度 改 变 ( 淡 化 ) 视 频 图 像 的 颜色 


此 实例 主要 使 用 jQuery 的 css() 方 法 设置 饱和 度 , 从 而 淡化 视频 图 像 的 颜色 。 当 在 Google 
Chrome 浏览 器 中 显示 该 页 面 时 , 单 击 “ 设 置 饱和 度 淡化 视频 图 像 的 颜色 "按钮 , 则 正在 播放 的 视频 图 
像 的 颜色 淡化 之 后 的 效果 如 图 389-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 





<!doctype html >< html >< head >< meta charset = UIF -8> 
<script src= "js/jquery -3.1.1.min.js"></script >< script language = "javascript"> 
function saturateVideo( ){ // 设 置 饱 和 度 淡化 视频 图 像 的 颜色 
$ ("#myVideo").css("— webkit — filter","saturate(50%)"); } 
</script ></head> 


<body><p>< input type= "button” value= "设置 饱和 度 淡化 视频 图 像 的 颜色 " 
onclick = "saturateVideo()" style = "width:350px"></p> 


<video id= "myVideo" src = "media/myMovie. ogg" controls = "controls" width = "350px"> 当 前 浏览 器 不 支持 
此 视频 播放 功能 </video ></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,css() 方 法 是 一 个 jQuery 方法 ,用 于 
设置 或 返回 被 选 元 素 的 样式 属性 。jQuery 代码 css("-webkit-filter","saturate(50%)") 等 效 于 CSS 
代码 style 一 "-webkitrfilter: saturate(502% )",saturate(50%% ) 方 法 中 的 百分比 值 越 小 淡化 效果 越 明 
显 ,saturate(0%) 是 黑白 效果 ,saturate(700%) 表 示 颜 色 超 浓 。 











此 实例 的 源 文件 名 是 myHtmlA093. html。 
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390 反 转 颜色 使 视频 图 像 产 生 底片 的 特效 
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此 实例 主要 使 用 jQuery 的 css() 方 法 反 转 颜色 ,从 而 使 视频 图 像 产 生 底片 的 特效 。 当 在 Google 
Chrome 浏览 器 中 显示 该 页 面 时 , 单 击 * 通 过 反 转 颜色 使 视频 图 像 产生 底片 的 特效 "按钮 , 则 正在 播放 
的 视频 图 像 的 颜色 将 以 底片 的 效果 显示 ,如 图 390-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 390-1 


<!doctype html ><html >< head >< meta charset = UIF -8> 


< script src= "js/jquery- 3.1.1.min. js"></script>< script language = "javascript"> 
i 


function invertVideo( ){// 通 过 反 转 颜色 使 视频 图 像 产生 底片 的 特效 
$ ("#myVideo"). css(" - webkit- filter","invert(100%)"); 
} 
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</script ></head> 
<body ><p>< input type = "button" value = "通过 反 转 颜色 使 视频 图 像 产生 底片 的 特效 " 
onclick = "invertVideo()" style= "width:350px"></p> 


<video id = "myVideo" src = "media/myMovie. ogg" controls = "controls” width = "350px"> 当前 浏览 器 不 支 
持 此 视频 播放 功能 </video ></body></html> 





| 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,ess() 方 法 是 一 个 jQuery 方法 ,用 了 
设置 或 返回 被 选 元 素 的 样式 属性 。jQuery 代码 css("-webkit-filter"。"invert(100%)") 等 效 于 CSS 
代码 style 一 "webkit-filter:invert(100%)"。invert(100%) 用 于 反 转 当前 的 颜色 。 

此 实例 的 源 文件 名 是 myHtmlA094. html。 


391 改变 对 比 度 突出 显示 视频 图 像 的 颜色 


此 实例 主要 使 用 jQuery 的 ess() 方 法 改变 对 比 度 , 从 而 突出 显示 视频 图 像 的 颜色 。 当 在 Google 
Chrome 浏览 器 中 显示 该 页 面 时 , 单 击 * 改 变 对 比 度 突 出 显示 视频 图 像 的 颜色 "按钮 , 则 正在 播放 的 视 
频 图 像 的 颜色 对 比 度 将 增强 ,效果 如 图 391-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 391-1 


<! doctype html >< html >< head>< meta charset = UTF -8> 
< script src= "js/jquery - 3.1.1.min. js"></script >< script language = "javascript"> 
function contrastVideo( ){// 改 变 对 比 度 突出 显示 视频 图 像 的 颜色 
$ ("#myVideo").css("— webkit — filter","contrast(200 % )"); 
} 
</script ></head> 


<body ><p>< input type = "button" value = "改变 对 比 度 突 出 显示 视频 图 像 的 颜色 " 
onclick = "contrastVideo()" style = "width:350px"></p> 

<video id = "myVideo" src= "media/myMovie.ogg" controls = "controls" 
width = "350px"> 当前 浏览 器 不 支持 此 视频 播放 功能 </video ></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,css() 方 法 是 一 个 jQuery 方法 ,用 于 
设置 或 返回 被 选 元 素 的 样式 属性 。jQuery 代码 css("-webkit-filter"。"contrast(200%)") 等 效 于 CSS 
代码 style 二 "-webkit-filter: contrast(200%)" ,contrast(200% ) 方 法 中 的 百分比 值 越 大 颜色 对 比 效果 
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越 强烈 。 
此 实例 的 源 文件 名 是 myHtmlA095. html。 


392 ”改变 明亮 度 提 高 视频 图 像 的 呈现 颜色 


此 实例 主要 使 用 jQuery 的 css() 方 法 改变 明亮 度 , 从 而 提高 视频 图 像 的 呈现 颜色 。 当 在 Google 
Chrome 浏览 器 中 显示 该 页 面 时 , 单 击 "改变 明亮 度 提 高 视频 图 像 的 呈现 颜色 ”按钮 , 则 正在 播放 的 视 
频 图 像 的 颜色 明亮 度 将 提高 ,效果 如 图 392-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 392-1 


<! doctype html >< html >< head >< meta charset = UTF -8> 
< script src= "js/jquery -3.1.1.min. js"></script>< script language = "javascript"> 
function brightnessVideo( ){// 改 变 明亮 度 提高 视频 图 像 的 呈现 颜色 
$("#myVideo").css(" - webkit — filter","brightness(200% )"); 
} 
</script ></head> 
<body ><p>< input type = "button" value= "改变 明亮 度 提高 视频 图 像 的 呈现 颜色 " 
onclick = "brightnessVideo()" style = "width:350px"></p> 
<video id = "myVideo" src = "media/myMovie. ogg”controls = "controls" 
width = "350px"> 当 前 浏览 器 不 支持 此 视频 播放 功能 </video></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,css() 方 法 是 一 个 jQuery 方法 ,用 于 
设置 或 返回 被 选 元 素 的 样式 属性 。jQuery 代码 css("-webkit-filter","brightness (200%)") 等 效 于 
CSS 代码 style 二 "-webkit-filter: brightness(200% )" ,brightness(200% ) 方 法 中 的 百分比 值 越 大 颜色 
明亮 度 越 高 。 

此 实例 的 源 文件 名 是 myHtmlA096. html。 


393 ”改变 模糊 度 使 视频 图 像 呈 现 虚 化 特效 


此 实例 主要 使 用 jQuery 的 css() 方 法 改变 模糊 度 , 从 而 使 视频 图 像 呈现 虚 化 特效 。 当 在 Google 
Chrome 浏览 器 中 显示 该 页 面 时 , 单 击 * 改 变 模 糊 度 使 视频 图 像 呈 现 虚 化 特效 ?按钮 , 则 正在 播放 的 视 
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频 图 像 将 呈现 虚 化 特效 ,效果 如 图 393-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 393-1 


<!doctype html >< html >< head >< meta charset = UTF -8> 
< script src= "js/jquery- 3.1.1.min. js"></script >< script language = "javascript"> 
function blurVideo( ){// 改 变 模糊 度 使 视频 图 像 呈 现 虚 化 特效 
$("#myVideo").css(" - webkit — filter", "blur(2px)"); 
} 
</script ></head> 
<body ><p>< input type = "button" value = "改变 模糊 度 使 视频 图 像 皇 现 虚 化 特效 " 
onclick = "blurVideo()" style= "width:350px"></p> 
<video id = "myVideo" src = "media/myMovie. ogg”controls = "controls" 
width= "350px"> 当 前 浏览 器 不 支持 此 视频 播放 功能 </video></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,css() 方 法 是 一 个 jQuery 方法 ,用 于 
设置 或 返回 被 选 元 素 的 样式 属性 。jQuery 代码 css("-webkitrfilter"，"blur(2px)") 等 效 于 CSS 代码 
style 一 "-webkit-filter:blur(2px)",blur(2px) 方 法 中 的 参数 值 越 大 虚 化 程度 越 高 。 

此 实例 的 源 文件 名 是 myHtmlA097. html。 


394 改变 灰 度 使 视频 图 像 呈 现 黑白 效果 


此 实例 主要 使 用 jQuery 的 css() 方 法 改变 灰 度 等 级 ,从 而 使 视频 图 像 呈 现 黑白 效果 。 当 在 
Google Chrome 浏览 器 中 显示 该 页 面 时 , 单 击 “ 改 变 灰 度 等 级 使 视频 图 像 呈 现 黑白 效果 ”按钮 , 则 正在 
播放 的 视频 图 像 将 呈现 黑白 效果 ,如 图 394-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 





<!doctype html ><html ><head><meta charset = UTF -8> 
<script src= "js/jquery — 3.1.1.min. js"></script>< script language = "javascript"> 
function grayscaleVideo( ){// 改 变 灰 度 等 级 使 视频 图 像 呈 现 黑白 效果 
$("#myVideo").css("— webkit— filter","grayscale(100% )"); 
上 
</script ></head> 
<body ><p>< input type = "button" value = "改变 灰 度 等 级 使 视频 图 像 呈 现 黑白 效果 " 
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onclick = "grayscaleVideo( )" style= "width:350px"></p> 
<video id = "myVideo" src = "media/myMovie. ogg”controls = "controls" 
width = "350px"> 当 前 浏览 器 不 支持 此 视频 播放 功能 </video></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,css() 方 法 是 一 个 jQuery 方法 ,用 于 
设置 或 返回 被 选 元 素 的 样式 属性 。jQuery 代码 css("-webkit-filter", "grayscale(100%)") 等 效 于 
CSS 代码 style 一 "-webkit-filter: grayscale (100%)", grayscale (100%) 方 法 中 的 参数 值 在 0% 到 
100% 之 间 , 参 数值 越 大 灰 度 等 级 越 高 。 

此 实例 的 源 文件 名 是 myHtmlA098. html。 
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图 394-1 


395 ”全 屏 播 放 视 频 或 退出 全 屏 正常 播放 视频 


此 实例 主要 通过 使 用 webkitRequestFullscreen() 方 法 实现 全 屏 播放 视频 或 退出 全 屏 模式 正常 播 
放 视 频 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 将 以 正常 模式 播放 视频 ,如 图 395-1 所 示 ; 单 击 
“全 屏 播放 视频 ”按钮 将 以 全 屏 模 式 播放 视频 .在 全 屏 模 式 中 自动 添加 了 “关闭 ”和 * 退 出 全 屏 模式 ” 按 
钮 ,如 图 395-2 所 示 ; 单 击 * 退 出 全 屏 模式 ”按钮 . 则 将 返回 正常 播放 模式 ,如 图 395-1 所 示 。 有 关 此 实 
例 的 主要 代码 如 下 。 
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HTML5+CSS3 炫 酷 应 用 实例 集锦 





<! doctype html >< html >< head >< meta charset = "UTF - 8"> 
<script src= "js/jquery -3.1.1.min. js"></script >< script type = "text/javascript"> 


$ (function() { 
$ ("并 myBtnFullscreen") .click(function() {// 全 屏 播放 视频 
if ($ ("video")[0].webkitRequestFullscreen) { 
$ ("video")[0].webkitRequestFullscreen( ); 
} D2)); 
</script > 
<style type= "text/css"> 
video { width: 400px; height: 250px; } 
button { width: 400px;} 
</style></head> 


<body>< div align = "center"> 
<video src= "media/a073myVideo. webm" autoplay = autoplay" controls = "controls"> </video ><br> 


<button id= "myBtnFullscreen"> 全 屏 播放 视频 </button></div></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,webkitRequestFullscreen() 方 法 用 于 
请 求全 屏 模式 ,此 方法 是 Chrome 浏览 器 专用 的 方法 ; 当前 在 Firefox、Safari 等 浏览 器 中 也 支持 全 屏 
请 求 ,但 它们 均 使 用 自己 专用 的 方法 ,因此 如 果 需 要 网 页 支持 更 多 的 浏览 器 ,可 以 采用 下 面 这 段 代码 。 


$("#myBtnFullscreen").click(function () { 
if ($ ("video")[0]. requestFullscreen) { 
$ ("video")[0]. requestFullscreen( ); 


} 
else if ($ ("video")[0].mozRequestFullScreen) { 


$ ("video")[0].mozRequestFullScreen( ); 


} 
else if ($ ("video")[0]. webkitRequestFullScreen) { 


$ ("video")[0].webkitRequestFullScreen( ); 
pay 
在 全 屏 模式 中 会 自动 添加 “关闭 "和 * 退 出 全 屏 模式 "按钮 .不 需要 使 用 任何 额外 的 代码 即 自动 实 
现 。 实 际 上 , 按 下 键盘 上 的 Esc 键 也 会 照样 退出 全 屏 模式 。exitFullsereen() 方 法 可 以 使 浏览 器 退出 
全 屏 , 但 是 在 一 般 情况 下 不 会 直接 使 用 。 
此 实例 的 源 文件 名 是 myHtmlA177. html。 
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396 ”以 折合 或 展开 风格 显示 标题 或 者 详细 内 容 


此 实例 主要 通过 使 用 < details > 标签 实现 单 击 标题 即 可 展开 或 折合 对 应 的 详细 内 容 的 功能 。 当 
在 浏览 器 中 显示 该 页 面 时 将 显示 朱德 元 帅 的 详细 内 容 ,隐藏 其 他 3 位 元 帅 的 详细 内 容 , 如 图 396-1 所 
示 ; 单 击 “ 朱 德 元 帅 ” 标 题 , 则 将 隐藏 朱德 元 帅 的 详细 内 容 , 单 击 * 刘 伯 和 承 元 是 "标题 , 则 将 显示 刘伯承 元 
帅 的 详细 内 容 , 如 图 396-2 所 示 , 即 通过 单 击 标题 能 够 在 隐藏 详细 内 容 或 显示 详细 内 容 的 两 种 状态 之 
间 自 动 切 换 。 有 关 此 实例 的 主要 代码 如 下 。 














西 - Do x 
酝 口 x localhost63342 fo 
国 localhost63342/myWor x 一 ee 
ee “ 3 CD localhost63342/myWork/myHtmlA006 安 三 
所 3 © DIocalhost63342/myWork/myHtmlA006 它 三 
* 朱德 元 币 (1886-1976) 
v 朱德 元 帅 (1886-1976) 刘伯承 7 种 (1892-1986) 


1886 年 12 月 1 日 生 ， 字 玉 阶 ， 四 川 仪 院 人 。1909 年 考 入 云南 陆军 讲 
武 堂 ， 同 年 加 入 中 国 同盟 会 ， 参 加 了 考 刻 革命 。1913 年 后 在 汗 军 任 
营 长 、 副 团 长 、 团 长 、 旅 长 。 曾 参加 护 国运 动 、 护 法 运动 


> 刘伯承 元 帅 (1892-1986) 


1892 年 生 ， 四 川 开县 赵 家 镇 人 ， 无 产 阶级 革命 家 、 军 事 战略 家 、 战 
术 家 、 马 克 思 主义 军事 理论 家 


军事 教育 家 ， 被 着 为 “ 军 神 ” 
3 证 才 人 重 庆祝。 1914 年 加 入 孙中山 领导 的 中 华 革 


> 陈毅 元 帅 (1901-1972) 
* 罗荣桓 (1902-1963) 


> 阵 坑 元 帅 (1901-1972) 
> 罗荣桓 (1902-1963) 





图 396-1 图 396-2 


<!doctype html >< html >< head >< meta charset = UTF - 8></head> 
<body > < details open = " open"> < summary style = " outline: none">< b> 朱德 元 帅 (1886 - 1976) </b > 
</summary><p>1886 年 12 月 1 日 生 , 字 玉 阶 ,四 川 仪 陀 人 。1909 年 考 人 云南 陆军 讲 武 堂 , 同年 加 入 中 国 同盟 
会 ,参加 了 辛亥 革命 。1913 年 后 在 滇 军 任 营 长 . 副 团 长 . 团 长 . 旅 长 。 曾 参加 护 国 运动 、 护 法 运动 .…. </p> 
</details> 
<details>< summary style = "outline: none"><b> 刘 伯 承 元 帅 (1892 - 1986)</b></summary> 

<p> 1892 年 生 , 四 川 开县 赵 家 镇 人 ,无 产 阶级 革命 家 、 军 事 战略 家 、 战 术 家 、 马 克 思 主 义军 事理 论 家 、 军 事 教育 
家 ,被 誉 为 " 军 神 "。1912 年 考 入 重庆 军政 府 将 校 学 堂 。1914 年 加 入 孙中山 领导 的 中 华 革命 党 ... </p > 
</details> 
<details >< summary style = "outline: none”">< b> 陈毅 元 帅 (1901 - 1972)</b></summary> 

<p>1901 年 生 , 字 仲 弘 , 四 川 省 乐 至 县 人 。1919 年 赴 法 国 勤工俭学 , 1921 年 回国 。1922 年 加 入 中 国 社会 主义 
青年 团 。1923 年 加 入 中 国共 产 党 。1927 年 在 武汉 中 央 军 校 担任 政治 工作 .. .</p></details> 
<details ><summary style = "outline: none"><b> 风 荣 桓 (1902 - 1963)</b></summary><p> 1902 年 后 ,湖南 省 
衡山 ( 今 衡 东 ) 县 人 。1927 年 加 入 中 国共 产 主义 青年 团 , 同年 转 入 中 国共 产 党 ... </p></details></body > 
</html > 


HTML5+CSS3 炫 酷 应 用 实例 集锦 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 .< details > 标签 用 于 描述 文档 或 文档 
某 个 部 分 的 详细 内 容 , 该 标签 有 一 个 重要 属性 一 一 open.open 属性 规定 了 在 HTML 页 面 上 的 详细 内 
容 是 否 可 见 ,如果 没有 设置 该 属性 , 则 隐藏 详细 内 容 ; 如 果 设 置 该 属性 为 open 一 "open", 则 显示 详细 
内 容 。 

此 实例 的 源 文件 名 是 myHtmlA006. html。 


397 ”以 分 组 形式 显示 下 拉 列 表 框 中 的 选项 


此 实例 主要 通过 使 用 < optgroup > 标签 实现 对 下 拉 列 表 框 内 部 的 选项 进行 分 组 显示 。 当 在 
Google Chrome 浏览 器 中 显示 该 页 面 时 ,在 下 拉 列 表 框 中 的 地 级 市 选项 将 按照 省 级 行政 区 进行 分 组 ， 
如 图 397-1 所 示 ; 选择 其 中 的 “成 都 市 ”选项 , 则 选择 结果 如 图 397-2 所 示 。 注 意 组 名 省 级 行政 区 是 不 
可 选择 的 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 397-2 


<! doctype html >< html >< head><meta charset = UTF - 8></head> 
<body >< div > 请 选择 送 达 目的 地 : 
<select ><optgroup label = "重庆 市 "> 
<option value = " 渝 北 区 "> 渝 北 区 </option><option value = "江北 区 "> 江北 区 </option> 
<option value = "渝中 区 "> 渝中 区 </option></optgroup> 
<optgroup label = "四 川 省 "> 
<option value = "成 都 市 "> 成 都 市 </option><option value = "广元 市 "> 广元 市 </option> 
<option value = "绵阳 市 "> 绵阳 市 </option></optgroup> 
<optgroup label = "河北 省 "> 
<option value = "石家庄 市 "> 石家庄 市 </option > 
<option value = "承德 市 "> 承德 市 </option> 
<option value = "张家口 市 "> 张家口 市 </option ></optgroup></select></div> 
</body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,< optgroup > 标签 用 于 定义 选项 组 ， 
当 使 用 一 个 较 长 的 选项 列表 时 对 相关 的 选项 进行 组 合 会 使 处 理 更 加 容易 。< optgroup > 标签 是 
HTML5 的 新 增 标签 。 

此 实例 的 源 文件 名 是 myHtmlA112. html。 
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398 ”为 下 拉 列 表 框 中 的 选项 添加 关联 辅助 信息 


此 实例 主要 在 下 拉 列 表 框 的 选项 标签 < option > 中 设置 label 属性 值 , 从 而 实现 为 下 拉 列 表 框 的 列 
表 选 项 添加 辅助 信息 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 , 单 击 下 拉 列 表 框 右 端的 下 拉 箭 
头 , 则 将 弹出 该 下 拉 列 表 框 的 选项 列表 ,如 图 398-1 所 示 。 每 个 选项 除了 前 面 的 选项 数据 外 ,后 面 还 有 
该 选项 的 辅助 信息 。 在 下 拉 列 表 框 的 选项 列表 中 任意 选择 一 个 选项 ,例如 *http://www. baidu. com 
百度 搜索 ”, 则 将 在 下 拉 列 表 框 中 仅 显 示 *http://www。 baidu. com”, 隐 藏 了 该 选项 的 辅助 信息 “百度 
搜索 ”, 如 图 398-2 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 











百 - 6 x 
D myHemlA125 html 多 D myHtmlA125 html x 
所 3 © Dfie///D/myWork/myHtm 字 三 5 3 CC DfileV/DVmyWorwmyHtm 它 三 
友情 链接 : "| [ET 友情 链接 : [http Jwww baidu com| ] [去 看 一 下 | 




















t+ 





图 398-2 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<script src= "js/jquery -3.1.1.min. js"></script >< script type = "text/javascript"> 
$ (function(){ 
$ ("input[ type= submit]").click(function(e){// 响 应 鼠标 单 击 "去 看 一 下 "按钮 
€. PreventDefault(); 
// 跳 转 到 当前 选择 的 URL 对 应 的 页 面 
location. href =$ ("input[type= url1]").val(); 
D2}); 
</script ></head> 
<body>< div align = "center"> 
友情 链接 : < input type= "url" list = "myWebsite" /> 
<datalist id = "myWebsite"> 
<option label = "京东 商城 ”value = "http://www. jd. com" /> 
<option label = "百度 搜索 " value = "http://www.baidu. com" /> 
<option label = "微软 中 国 " value = "http://www. microsoft. com" /> 
</datalist >< input type = "submit" value = "去 看 一 下 "/></div></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,< option label 二 "百度 搜索 "value= 
"http://www. baidu. com" /> 中 的 label 属性 用 于 为 选项 规定 描述 ,< option > 用 于 定义 下 拉 选 项 列表 
中 的 一 个 选项 。< datalist > 标签 定义 选项 列表 . 它 通常 与 input 元 素 配 合 使 用 定义 input 可 能 的 值 ， 
datalist 及 其 选项 不 会 被 显示 出 来 , 它 仅仅 是 合法 的 输入 值 列表 。< input > 标签 中 的 list 属性 引用 
< datalist > 元 素 ,其 中 包含 < input > 元 素 的 预定 义 选项 。 

此 实例 的 源 文件 名 是 myHtmlA125. html。 


399 使 用 png 图 像 自 定义 下 拉 列 表 框 的 向 下 箭头 


此 实例 主要 通过 设置 -webkitrappearance 属性 值 为 none 来 取消 下 拉 列 表 框 默认 的 实心 向 下 箭 
头 ,然后 在 background 属性 中 使 用 png 图 像 ,从 而 实现 自 定义 下 拉 列 表 框 的 向 下 稍 头 。 当 在 Google 

















HTML5+CSS3 炫 酷 应 用 实例 集锦 


Chrome 浏览 器 中 显示 该 页 面 时 ,下 拉 列 表 框 右上 角 显 示 的 即 是 自 定义 箭头 ,如 图 399-1 所 示 。 有 关 
此 实例 的 主要 代码 如 下 。 
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图 399-1 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<style type= "text/css"> 
/* 自 定义 箭头 样式 * / 
. myArrow{ width:320px; height :25px; - webkit - appearance:none; 
margin ~ top:15px;padding ~ right: 20px; padding - left: 10px; 
/* 设置 箭头 图 像 及 位 置 * / 
background: cyan url("img/B362. png") no— repeat 298px; 
/* 设置 箭头 图 像 的 大 小 * / 
background - size:14px 9px; } 
</style></head> 
<body>< div align = "center">< select class = "myArrow"> 
<option selected > 华海 电子 商务 有 限 公 司 </option> 
<option> 嘉 利 房地产 (集团 ) 股 份 有 限 公司 </option> 
<option> 大 华 建材 股份 有 限 公司 </option > 
<option> 渝 能 国际 电力 股份 有 限 公 司 </option > 
< option > 西部 铜 业 发 展 有 限 公 司 </option> 
<option > 北岸 联合 网 络 投资 有 限 公司 </option ></select></div></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,-webkit-appearance: none 用 于 取消 
下 拉 列 表 框 的 默认 实心 向 下 箭头 ,-webkitrappearance 与 CSS3 标准 制定 的 appearance 属性 不 同 ， 
appearance 属性 允许 使 元 素 看 上 去 像 标 准 的 用 户 界面 元 素 ,该 属性 据说 是 所 有 的 主流 浏览 器 都 不 支 
持 。 如 果 将 -webkit-appearance:none 改 为 appearance:none. 默 认 的 实心 箭头 仍然 会 出 现 。 

此 实例 的 源 文件 名 是 myHtmlB362. html。 


400 模拟 下 拉 列 表 框 的 风格 创建 下 拉 式 菜单 


此 实例 主要 使 用 jQuery 的 slideToggle() 方 法 控制 元 素 的 折 倒 和 展开 ,从 而 使 下 拉 式 菜单 实现 类 
似 于 下 拉 列 表 框 的 选择 风格 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 , 单 击 菜单 栏 右 端的 选项 
图 标 , 则 将 向 下 展开 菜单 选项 ; 当 鼠 标 指针 在 各 个 菜单 选项 之 间 移 动 时 ,当前 悬浮 的 菜单 选项 的 文本 
将 以 大 字号 显示 ,如 图 400-1 所 示 ; 单 击 需要 的 菜单 选项 , 则 该 菜单 选项 的 文本 将 显示 在 菜单 栏 中 ,并 
且 整 个 菜单 选项 折 生 隐藏 ,如 图 400-2 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 400-1 图 400-2 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<script src= "js/jquery - 3.1.1.min. js"></script >< script type = "text/javascript"> 
$ (function() { 
$ ('nav'). click( function( ){ // 展 开 或 折 双 下拉 菜 单 
$('.myItems').slideToggle("slow"); 
D); 
$ ("ul. myItems 1i").click(function(){ // 显 示 选 中 的 菜单 项 文本 
$ ("#mySelected"). text( $ (this). find("a"). text()); 
1);}); 
</script > 
<style type= "text/css"> 

body { background— color: #313233;font - family: arial, san- serif; } 

/* 设 置 导航 菜单 栏 的 样式 */ 

nav { width: 350px; margin:0 auto; margin - top:50px; } 

/* 设 置 菜 单 栏 盒子 的 样式 */ 

. myBox { background - color: green; border - radius: 10px; color: # FFF; display: block; position: 
relative; font - size: 20px; padding:20px; - webkit- transition: 0.3s ease; border - bottom: 
3px solid 间 CC6025; } 

/* 设 置 右 端 菜单 图 标 盒子 的 样式 * / 

.myIcon { display: block; width:24px; margin - top:2px; float:right; } 

/* 设 置 右 端 菜单 图 标 每 条 横 线 的 样式 * / 

.myIcon span { width:24px; height:4px;border - radius:3px; color:# FFF; 

display:block; background: white; margin:2px } 

/x* 设 置 鼠标 指针 悬浮 菜单 栏 时 的 样式 */ 

nav:hover .myBox{ cursor:pointer; background: lightgreen; } 

/* 设 置 下 拉 莱 单项 盒子 的 基本 样式 */ 

.myItems{background: 1ightpink; border - radius: 10px;text — align: center; margin: 0; padding:0; list 
— style:none; position: relative;margin— top:20px; display:none;} 


/* 设 置 下 拉 菜 单项 盒子 的 三 角形 箭头 * / 
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.myItems:before { content: ""; position:absolute; border: 15px solid lightpink; 
border ~ top: 0 solid transparent! important;border - right: 15px solid transparent! 
important; border - left:15px solid transparent! important; right:10px;top: ~ 15px } 
/* 设 置 菜单 项 的 基本 样式 */ 
.myItems a { text — decoration: none; display:block; 
padding:20px 0; font - weight:700; font - size:16px } 
/* 设 置 偶数 行 菜单 项 的 背景 颜色 * / 
.myItems 1i:nth- child(even) a { background:cyan; } 
/* 设 置 在 鼠标 指针 悬浮 时 的 菜单 项 样式 */ 
.myItems 1i:hover a { font — size: 24px; color:red; } 
</style></head> 
<body><nav>< div class = "myBox"> 
<span id= "mySelected"> 选 择 您 最 喜欢 的 书籍 . ..</span> 
<div class= "myIcon">< span></span>< span></span>< span></span></div></div> 
<ul class = "myItems"><li><a href =" 提 "> HTML5 从 人 门 到 精通 </a></1i> 
<1i><a href =" 间 "> HTML5 经 典 实例 </a></1i> 
<1i><ahref="#">HTML5 移动 Neb 开发 指南 </a></1i> 
<1i><a href ="#">HTML5 + CSS3 从 入 门 到 精通 </a></1i> 
<1i><a href ="#"> HTML5 人 门 经 典 </a></1i></ul ></nav></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , $ ('. myltems'). slideToggle ("slow") 用 
于 折 琶 和 展开 菜单 选项 盒子 。slideToggle( ) 方 法 是 一 个 jQuery 方法 , 它 通过 使 用 滑动 效果 来 切换 元 
素 的 可 见 状 态 , 如 果 被 选 元 素 是 可 见 的 , 则 隐藏 这 些 元 素 , 如 果 被 选 元 素 是 隐藏 的 , 则 显示 这 些 元 素 。 
slideToggle() 方 法 的 语法 格式 如 下 。 


$ (selector). slideToggle( speed, callback) 


其 中 ,参数 speed 是 可 选 参数 , 它 规定 元 素 从 隐藏 到 可 见 的 速度 (或 者 相反 ) ,默认 为 normal, 可 能 
的 值 有 毫秒 (比如 1500) slow normal fast ,在 设置 速度 的 情况 下 ,元 素 在 切换 的 过 程 中 会 逐渐 地 改变 
高 度 ; 参数 callback 也 是 可 选 参数 , 它 表示 在 slideToggle() 方 法 执行 之 后 将 要 执行 的 函数 ,除非 设置 
了 speed 参数 ,否则 不 能 设置 该 参数 。 

此 实例 的 源 文件 名 是 myHtmlB375. html。 


401 以 拖 遇 方式 将 菜单 项 插 人 新 的 位 置 


此 实例 主要 通过 使 用 jquery-ui. min. js 和 jquery-ui. min. css 中 的 sortable( ) 方 法 实现 以 拖 电 的 
方式 将 菜单 项 插入 新 的 位 置 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,默认 的 菜单 项 顺序 如 
图 401-1 所 示 。 使 用 鼠标 拖 动 “约翰 埠 普 金 斯 大 学 "菜单 项 到 “ 圣 安 德 鲁 斯 大 学 "菜单 项 和 “加 州 理工 
学 院 ” 菜 单项 之 间 , 如 图 401-2 所 示 ; 然后 松 开 鼠 标 . 则 “约翰 霍 普 金 斯 大 学 ”菜单 项 就 会 被 插入 “ 圣 安 
德 鲁 斯 大 学 ”菜单 项 和 “加 州 理工 学 院 ” 菜 单项 之 间 . 如 图 401-3 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<script src= "js/jquery -3.1.1.min.js"></script > 
< script src= "js/jquery - ui.min. js"></script > < script type = "text/javascript"> 
$ (function() { 
$ ("#sortable"). sortable( { // 以 拖 映 的 方式 将 菜单 栏 的 菜单 项 持 入 新 位 置 
revert :true} ); 
$("#sortable" ). disableSelection(); // 禁 用 选择 匹配 的 元 素 集合 内 的 文本 内 容 
D); 
</script > 
<link rel = "stylesheet" href = "css/jquery - ui.min.css">< style type = "text/css"> 
.myContainer { width: 100% ; height: 1500px; } /x 设置 盒子 的 基本 样式 x*/ 
/x* 设置 无 序列 表 的 基本 样式 */ 
ul { list- style -type: none; margin: 0; padding: 0; margin - bottom: 10px;} 
li { margin: 5px 0 00;} /x* 设 置 列表 项 的 基本 样式 */ 
/x* 设置 列表 项 超 链接 的 基本 样式 * / 
lia{ -webk 让 -transition: 0.3s ease- out; background: lightgreen; color: black; 





padding: 7px 15px 7px 10px; border - radius: 5px; width: 220px; display: block; text - decoration: none; 


font - size: 14px; — webkit ~ box— shadow: 2px 2px 4px #888; } 
</style></head> 

<body>< div class = "myContainer" align= "center"><ul id = "sortable"> 
<1i><ahref="javascript:void(0)"> 密 欧 根 大 学 </a></1i> 
<1i><ahref="javascript:void(0)"> 约 翰 堆 普 金 斯 大 学 </a></1i> 
<1i><ahref="javascript:void(0)"> 宾 夕 法 尼 亚 大 学 </a></1i> 
<1i><ahref="javascript:void(0)"> 圣 安德鲁 斯 大 学 </a></1i> 

<1i><a href="javascript:void(0)"> 加 州 理工 学 院 </a></1i></ul></div></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,$ ("# sortable"). sortable( {revert: 


此 实例 的 源 文件 名 是 myHtmlA131. html。 


402 以 拖 电 方式 增加 和 移 除 两 个 列表 的 选项 


true}) 用 于 实现 以 拖 电 的 方式 将 菜单 栏 的 菜单 项 插入 新 位 置 。sortable( ) 方 法 是 jQuery UI 的 可 排序 
小 部 件 (Sortable Widget) 的 方法 ,在 任意 的 DOM 元 素 上 启用 sortable 功能 ,通过 鼠标 单 击 并 拖 电 元 
素 到 列表 中 的 一 个 新 的 位 置 , 其 他 条 目 会 自动 调整 。 在 默认 情况 下 .sortable 的 各 个 条 目 共 享 
draggable 属性 。 需 要 注意 的 是 ,在 使 用 sortable() 方 法 实现 拖 电 排序 前 必须 添加 jquery-ui. min. js 和 
jquery-ui. min. css 两 个 文件 。 


此 实例 主要 通过 使 用 jquery-ui. min. js 和 jquery-ui. min. css 中 的 sortable() 方 法 实现 以 拖 电 的 





方式 增加 和 移 除 两 个 列表 的 选项 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,默认 的 两 个 教材 列 
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表 的 列表 项 顺序 如 图 402-1 所 示 。 使 用 鼠标 拖 动 “数学 基础 教材 ”列表 中 的 “ 常 微分 方程 "列表 项 到 “ 计 
算 机 专业 教材 "列表 中 的 “操作 系统 设计 与 实现 ”和 “离散 数学 "之 间 , 如 图 402-2 所 示 ; 然后 松 开 和 鼠标， 
则 “ 常 微分 方程 "列表 项 就 会 被 插入 “操作 系统 设计 与 实现 ”和 “离散 数学 ”之 间 , 如 图 402-3 所 示 。 反 之 
亦 然 。 有 关 此 实例 的 主要 代码 如 下 。 
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5 部 分 元素》 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<script src= "js/jquery — 3.1.1.min. js"></script > 
<script src= "js/jquery - ui. min. js"></script >< script type= "text/javascript"> 
$ (function() { 
// 向 connectWith 选项 传递 一 个 选择 器 ,把 一 个 列表 中 的 元 素 排序 到 另 一 个 列表 中 
$ ("sortablel，##sortable2"). sortable({ 
connectWith: ". connectedSortablen 
}).disableSelection(); }); 
</script> 
<link rel = "stylesheet" href = "css/jquery — ui.min.css">< style type = "text/css"> 
.myContainer { width:580px; flow: left; }/ * 设置 盒子 的 基本 样式 * / 
/* 设置 无 序列 表 的 基本 样式 * / 
#sortablel, #sortable2 { list- style— type: none; margin: 0; padding: 0.5em 0 ; float: left; margin 
一 right: 50px; text — align: center; font ~ size: 24px; color: yellow; font 
— weight: bold; background - color: darkgreen; border - radius: 5px;} 
/* 设置 列表 项 的 基本 样式 * / 
##sortablel 1i，# sortable2 li { margin: 0 5px 1px 5px; 
padding: 5px; font— size: 1.2em; width: 220px; } 
/* 设置 列 表 项 超 链接 的 基本 样式 */ 
lia{ -webk 让 -transition: 0.3s ease- out; background: lightgreen;color: black; 
padding: 7px 15px 7px 10px; border — radius: 5px; width: 220px;display: block; 
text - decoration: none;font - size: 14px; — webkit — box— shadow: 2px 2px 4px #888; } 
</style></head> 
<body>< div class = "myContainer"> 
<ul id= "sortablel" class = "connectedSortable"> 数 学 基础 教材 
<1i><ahref="javascript:void(0)"> 数 学 分 析 </a></1i> 
<1i><ahref="javascript:void(0)"> 高 等 代数 </a></1i> 
<1i><ahref="javascript:void(0)"> 常 微分 方程 </a></1i> 
<1i><a href = "javascript:void(0)"> 复 变 函 数 </a></1i> 
<1i><a href = "javascript:void(0)"> 抽 象 代 数 </a></1i></ul> 
<ul id = "sortable2" class = "connectedSortable"> 计 算 机 专业 教材 
<1i><ahref="javascript:void(0)"> 数 据 结构 </a></1i> 
<1i><ahref="javascript:void(0)"> 数 据 库 系统 概论 </a></1i> 
<1i><ahref="javascript:void(0)"> 汇 编 语言 </a></1i> 
<1i><ahref="javascript:void(0)"> 操 作 系统 设计 与 实现 </a></1i> 
<1i><a href = "javascript:void(0)"> 离 散 数 学 </a></1i></ul></div></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , $ (" # sortablel，# sortable2"). 
sortable( {connect With: ". connectedSortable") ). disableSelection() 用 于 向 connectWith 选项 传递 一 
个 选择 器 ,从 而 实现 以 拖 中 的 方式 把 一 个 列表 中 的 元 素 排 序 到 男 一 个 列表 中 ,反之 亦 然 。sortable() 
方法 是 jQuery UI 的 可 排序 小 部 件 (Sortable Widget) 的 方法 ,在 任意 的 DOM 元 素 上 启用 sortable 功 
能 ,通过 鼠标 单 击 并 拖 忠 元 素 到 列表 中 的 一 个 新 的 位 置 ,其 他 条 目 就 会 自动 调整 。 在 默认 情况 下 。 
sortable 的 各 个 条 目 共享 draggable 属性 。 注意, 在 使 用 sortable() 方 法 实现 拖 动 排 序 前 必须 添加 
jquery-ui. min. js 和 jquery-ui. min. css 两 个 文件 。 

此 实例 的 源 文 件 名 是 myHtmlA133. html。 


403 ”禁止 或 允许 拖 哆 选项 插入 空 列表 中 


此 实例 主要 在 jquery-ui. min. js 和 jquery-ui. min. css 的 sortable( ) 方 法 中 设置 参数 
“connectWith: "ul", dropOnEmpty: false”, 从 而 实现 禁止 或 允许 以 拖 电 方 式 将 选项 插入 空 列表 。 当 
在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,如 果 使 用 鼠标 拖 动 “计算 机 专业 教材 "列表 中 的 “数据 库 系 
统 概论 ”列表 项 到 空 列表 “新 的 专业 教材 ”, 如 图 403-1 所 示 ,然后 松 开 鼠 标 , 则 “数据 库 系 统 概论 ”列表 
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项 将 不 会 被 插入 空 列表 “新 的 专业 教材 ”中 。 如 果 使 用 鼠标 拖 动 “数学 基础 教材 ”列表 中 的 “ 常 微分 方 
程 "列表 项 到 空 列表 “新 的 专业 教材 ”, 如 图 403-2 所 示 . 然 后 松 开 鼠标 , 则 “ 常 微分 方程 "列表 项 将 会 被 
插入 空 列表 “新 的 专业 教材 ”中 。 当 “新 的 专业 教材 ”列表 中 有 了 列表 项 “ 常 微分 方程 之 后 ,再 使 用 鼠 
标 拖 动 “计算 机 专业 教材 "列表 中 的 “数据 库 系统 概论 ?列表 项 到 “新 的 专业 教材 ?列表 中 ,如 图 403-3 所 
示 , 然 后 松 开 鼠 标 , 则 “数据 库 系 统 概论 "列表 项 将 会 被 插入 “新 的 专业 教材 ”列表 中 ,如 图 403-4 所 示 。 
有 关 此 实例 的 主要 代码 如 下 。 
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图 403-2 
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图 403-4 


<! doctype html >< html >< head >< meta charset = "UTF - 8"> 
< script src= "js/jquery - 3.1.1.min. js"></script > 
< script src= "js/jquery - ui.min. js"></script>< script type= "text/javascript"> 
$ (function() { 


$( "ul.droptrue" ). sortable({ // 人 允许 此 列表 项 插入 空 列表 
connectWith: "ul" }); 
$ ( "ul.dropfalse" ). sortable({ // 禁 止 此 列表 项 插入 空 列表 


connectWith: "ul"， dropOnEmpty: false }); 
$("#sortablel, #sortable2, #sortable3" ) .disableSelection( ); 
1D); 


</script > 

<link rel ="stylesheet" href = "css/jquery — ui.min.css"><style type = "text/css"> 
.myContainer { width:620px; flow: left; } /* 设置 盒子 的 基本 样式 * / 
/* 设置 无 序列 表 的 基本 样式 * / 


间 sortablel， 打 sortable2, #sortable3 { list — style tyl 
left; margin - right: 10px; text - align: center; font - size: 
color: darkgreen; color: yellow; border - radius:5px;} 

/* 设置 列表 项 的 基本 样式 */ 

并 sortablel 1i，# sortable2 li, # sortable3 li { margin: 0 5px lpx 5px; padding: 5px; font - size: 
1. 2em; width: 175px;} 

/* 设置 列表 项 超 链接 的 基本 样式 * / 

liat{ -webk 让 -transition: 0.3s ease- out; background: lightgreen; color: black; 
padding: 7px 15px 7px 10px; border - radius: 5px; width: 150px; display: block; text - decoration: none; 
font - size: 14px; - webkit- box— shadow: 2px 2px 4px #888; } 

</style></head> 

<body>< div class = "myContainer"> 

<ul id = "sortablel" class = "droptrue"> 数 学 基础 教材 
<1i><ahref="javascript:void(0)"> 数 学 分 析 </a></1i> 
<1i><ahref="javascript:void(0)"> 高 等 代数 </a></1i> 
<1i><a href = "javascript:void(0)"> 常 微分 方程 </a></1i> 
<1i><a href = "javascript:void(0)"> 复 变 函 数 </a></li> 
<1i><a href = "javascript:void(0)"> 抽 象 代数 </a></1i></ul> 

<ul id="sortable2” class = "dropfalse"> 计 算 机 专业 教材 
<1i><ahref="javascript:void(0)"> 数 据 结构 </a></1i> 
<1i><a href = "javascript:void(0)"> 数 据 库 系 统 概论 </a></1i> 
<1i><a href = "javascript:void(0)"> 汇 编 语言 </a></1i> 
<1i><a href = "javascript:void(0)"> 操 作 系 统 设计 与 实现 </a></1i> 
<1i><a href = "javascript:void(0)"> 离 散 数学 </a></1i></ul> 

<ul id="sortable3" class = "droptrue"> 新 的 专业 教材 </ul ></div></body></html > 


: none; margin: 0; padding: 0.5em 0; float: 
24px; font ~ weight: bold; background — 
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上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , $ ("ul. dropfalse" ). sortable 
({ connectWith: "ul", dropOnEmpty: false)) 表示 禁止 将 $( "ul dropfalse”) 选 项 插入 空 列表 。 
sortable() 方 法 是 jQuery UI 的 可 排序 小 部 件 (Sortable Widget) 的 方法 ,在 任意 的 DOM 元 素 上 启用 
sortable 功能 ,通过 鼠标 单 击 并 拖 忠 元 素 到 列表 中 的 一 个 新 的 位 置 , 其 他 条 目 就 会 自动 调整 。 注 意 ,在 
使 用 sortable() 方 法 实现 拖 电 排序 前 必须 添加 jquery-ui. min. js 和 jquery-ui. min. css 两 个 文件 。 

此 实例 的 源 文件 名 是 myHtmlA134. html。 


404 ”以 拖 放 风格 实现 在 元 素 之 间 传 递 数 据 


此 实例 主要 使 用 dataTransfer 对 象 实现 在 两 个 元 素 之 间 通 过 拖 放 操 作 传递 数据 。 当 在 Google 
Chrome 浏览 器 中 显示 该 页 面 时 ,在 把 文本 拖 放 到 文本 框 中 之 前 效果 如 图 404-1 所 示 ; 在 拖 放 操 作 完 
成 之 后 ,在 文本 框 中 将 显示 拖 放 的 文本 ,原文 本 自动 消失 ,效果 如 图 404-2 所 示 。 有 关 此 实例 的 主要 代 
码 如 下 。 
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请 把 这 段 文本 抑 谢 到 下 而 的 文本 相 中 , 然后 自动 消 

















图 404-1 图 404-2 


<! doctype html ><html >< head >< meta charset = UIF -8> 
<script src= "js/jquery -3.1.1.min. js"></script>< script language = "javascript"> 
function init(){ 

Var mySource = document. getElementById( "mySource" ) ; 

var myTarget = document. getElementById("myTarget") ;7 

mySource. addEventListener("dragstart"，function(ev){// 拖 放 开 始 
var myData = ev. dataTransfer; // 向 dataTransfer 对 象 追加 数据 
myData. effectAllowed = 'all'; 
myData. setData( "text/plain", mySource. value); 


}, false); 
myTarget. addEventListener("dragend"，function(ev){ //dragend: 拖 放 结 束 
ev. preventDefault( ); // 不 执行 默认 处 理 ( 拒 绝 被 拖 放 ) 
}, false); 
myTarget. addEventListener("drop"”, function(ev){ V/drop: 被 拖 放 (释放 ) 
var myData = ev. dataTransfer; // 从 dataTransfer 对 象 那里 取得 数据 
myTarget. textContent += myData. getData(" text/plain" ); 
ev. preventDefault( ); // 不 执行 默认 处 理 ( 拒 绝 被 拖 放 ) 
ev. stopPropagation(); // 停 止 事 件 传 播 
$ ("#mySource"). hide(); // 隐 藏 原文 本 
}, false); } 


// 设 置 页 面 属性 ,不 执行 默认 处 理 (拒绝 被 拖 放 ) 
document. ondragover = function(e){e. preventDefault();}; 
document. ondrop = function(e) {e. preventDefault();} 
</script ></head> 
<body onload= "init()"><div> 
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<output id = "mySource"draggable = "true"style= "width:350px; height:20px; background: lightseagreen;"> 
请 把 这 段 文本 拖 放 到 下 面 的 文本 框 中 ,然后 自动 消失 !</output> 

<textarea id = "myTarget" style = "width:370px; height: 80px; border: 1px solid gray;"> </textarea> 
</div></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , dataTransfer 是 拖 中 数据 传递 对 象 ， 
一 般 使 用 方式 为 event. dataTransfer。dataTransfer. setData(format，data) 方 法 用 于 设置 传递 的 数 
据 ,其 中 参数 format 表示 数据 格式 ,参数 data 表示 数据 内 容 。dataTransfer. getData(format) 方 法 用 




















于 获取 传递 的 数据 ,其 中 参数 format 表示 数据 格式 ,返回 值 即 是 传递 的 数据 。 在 实现 拖 放 功 能 时 通 
常 需要 处 理 相关 的 拖 放 事件 , 表 404-1 是 对 拖 放 相关 事件 的 说 明 。 
表 404-1 对 拖 放 相关 事件 的 说 明 
事 件 产生 事件 的 元 素 说 明 
dragstart 被 拖 放 的 元 素 开始 拖 放 操作 
drag 被 拖 放 的 元 素 拖 放 过 程 中 
dragenter 拖 放 过 程 中 鼠标 指针 经 过 的 元 素 被 拖 放 的 元 素 开始 进入 本 元 素 范围 内 
dragover 拖 放 过 程 中 鼠标 指针 经 过 的 元 素 被 拖 放 的 元 素 正在 本 元 素 范 围 内 移动 
dragleave 拖 放 过 程 中 鼠标 指针 经 过 的 元 素 被 拖 放 的 元 素 离开 本 元 素 的 范围 
drop 拖 放 的 目标 元 素 有 其 他 元 素 被 拖 放 到 了 本 元 素 中 
dragend 拖 放 的 对 象 元 素 拖 放 操作 结束 


此 实例 的 源 文件 名 是 myHtmlA102. html。 


405 ”创建 两 个 滑 块 控件 从 两 端 改变 数值 范围 


此 实例 主要 使 用 jquery-ui. min.js 和 jquery-ui. min. css 的 slider() 方 法 创建 包含 两 个 滑 块 的 范围 
控件 ,从 而 实现 从 两 端 改 变数 值 范围 的 上 限 和 下 限 值 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ， 





使 用 鼠标 向 左 拖 动 左边 的 滑 块 即 可 改变 数值 范 
的 滑 块 即 可 改变 数值 范围 的 上 限 值 , 如 图 405-2 


围 的 下 限 值 ,如 图 405-1 所 示 ; 使 用 鼠标 向 右 拖 动 右边 
所 示 。 有 关 此 实例 的 主要 代码 如 下 。 





口 x 


百 
DD myHemlA140 html x 
3 © Dfiley//D/myWork/myHtm 祈 
价格 范围 ， ¥123 -¥301 
国 


x 


口 x 


D myHemlA140 html 
全 3 CDfileV/DVmyWorwmyHtm 实 


价格 范围 ， ¥123 -¥329 
国 








图 405-1 


<!doctype html >< html >< head >< meta charset = 


图 405-2 


"UTF- 8"> 


<script src= "js/jquery -3.1.1.min.js"></script> 
<script src= "js/jquery - ui.min. js"></script >< script type = "text/javascript"> 


$ (function() { 
$ ("#myRange"). slider({ range: true, min 
slide: function (event, ui) { 
$ ("#myPrice").val("¥ "+ui.values[ 
}1); 
// 显 示 预 定义 范围 


: 0, max: 500, values: [75, 300], 


// 显 示范 围 两 端的 值 
0] +"—¥"+ui.values[1]); 
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$ ("#myPrice").val(" ¥" +$ ("# myRange"). slider ("values", 0) +" —¥"+$("#myRange"). slider 
("values", 1)); 


D; 

</script > 

<link rel = "stylesheet" href = "css/jquery — ui.min.css">< style type = "text/css"> 
#myRange { margin: 3px auto;} /* 设置 范围 控件 的 基本 样式 */ 
#myPrice {border: 0;color: red;font - weight: bold;} /* 设置 提示 文本 的 基本 样式 * / 

</style></head> 


<body><p><label for = "myPrice"> 价 格 范围 : </label > 
< input type= "text" id = "myPrice"></p><div id = "myRange"></div></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , $ ("# myRange”). slider({range: 
true, min: 0,max: 500, values: [75, 300]，slide: function (event, ui) { $ ("#myPrice”). val("¥"+ 
ui. values[0] 十 "一 圣 " 十 ui. values[1]) ;) )) 用 于 创建 包含 两 个 滑 块 的 范围 控件 。slider() 方 法 主要 用 
于 通过 拖 动 单个 滑 块 来 改变 数值 ,如 果 像 实例 这 样 设置 其 参数 range 为 true, 则 将 出 现 两 个 滑 块 来 改 
变数 值 范围 的 上 限 和 下 限 值 。slider() 方 法 是 滑 块 部 件 (Slider Widget) 的 方法 ,因此 在 使 用 slider( ) 方 
法 时 必须 添加 jquery-ui. min. js 和 jquery-ui. min. css 两 个 文件 。 

此 实例 的 源 文件 名 是 myHtmlA140. html。 


406 ”创建 上 限 固 定 、 下 限 可 调节 的 范围 滑 块 控件 


此 实例 主要 使 用 jquery-ui. min. js 和 jquery-ui. min. css 的 slider() 方 法 创建 上 限 固定 .下 限 可 调 
节 的 范围 滑 块 控件 ,从 而 实现 拖 动 左 端 滑 块 改变 数值 范围 的 下 限 值 。 当 在 Google Chrome 浏览 器 中 
显示 该 页 面 时 ,数值 范围 的 上 限 是 最 大 值 , 下 限 可 调节 ,如 图 406-1 所 示 ; 使 用 鼠标 向 左 拖 动 滑 块 即 可 
改变 数值 范围 的 下 限 值 , 如 图 406-2 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
西 - Do x 本 =- 6 x 
让 myHemlA141.html x DD myHtmlA141 html x 
3 filey//D/ymyWork/myHtml 窜 三 














价格 范围 。 ¥75 -¥500 价格 范围 。 ¥213 -¥500 





图 406-1 图 406-2 


<!doctype html ><html >< head >< meta charset = "UTF - 8"> 
<script src= "js/jquery — 3.1.1.min. js"></script> 
<script src= "js/jquery - ui. min. js"></script >< script type = "text/javascript"> 
$ (function() { 
$("##myRange").slider({ range: "max",// 范 围 的 最 大 值 固定 
min: 0, // 最 小 值 
max: 500,// 最 大 值 
value: 75,// 初 始 当前 值 


slide: function( event, ui ) { // 显 示 当 前 范围 
$ ("#myPrice" ).val(" ¥"+ui.value+ "—¥500"); } }); 
// 显 示 预 定义 范围 


$ ( "#myPrice" ).val("¥"+$("#myRange" ).slider( "value") + "—¥500" ); 
D); 
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</script> 
<link rel = "stylesheet" href = "css/jquery — ui.min. css">< style type = "text/css"> 
#myRange { margin: 3px auto; } /* 设 置 范 围 控件 的 基本 样式 */ 
并 myPrice { border: 0; color: red;font -weight: bold;} /x 设置 提示 文本 的 基本 样式 */ 
</style></head> 


<body><p><label for = "myPrice"> 价 格 范围 : </label > 
< input type = "text" id= "myPrice"></p><div id= "myRange"></div></body ></htnl> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , $ ("# myRange"). slider({range: 
"max" ,min: 0,max: 500,value: 75,slide: function( event, ui ) { $( "#myPrice” ). val(" 半 "十 ui， 
value 十 "一 兰 500");}) 用 于 创建 上 限 固定 .下 限 可 调节 的 范围 滑 块 控件 ,在 这 种 情况 下 应 该 设置 
range 参数 为 max。slider( ) 方 法 主要 用 于 实现 通过 拖 动 单个 滑 块 来 改变 数值 .该 方法 是 滑 块 部 件 
(Slider Widget) 的 方法 ,因此 在 使 用 slider() 方 法 时 必须 添加 jquery-ui. min. js 和 jquery-ui. min. css 
两 个 文件 。 

此 实例 的 源 文件 名 是 myHtmlA141. html。 


407 创建 下 限 固 定 `、 上 限 可 调节 的 范围 滑 块 控件 


此 实例 主要 使 用 jquery-ui. min. js 和 jquery-ui. min. css 的 slider() 方 法 创建 下 限 固定 、 上 限 可 调 
节 的 范围 滑 块 控件 ,从 而 实现 拖 动 右 端 滑 块 改变 数值 范围 的 上 限 值 。 当 在 Google Chrome 浏览 器 中 
显示 该 页 面 时 ,数值 范围 的 下 限 是 最 小 值 ,上 限 可 调节 .如 图 407-1 所 示 ; 使 用 鼠标 向 右 拖 动 滑 块 即 可 
改变 数值 范围 的 上 限 值 , 如 图 407-2 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 











西 - 5 x 而 -oo x 
癌 myHemlA142 html x \ = 口 myHtmlA142 html x\V 
多 3 C Dfie///D/myWorW/myHtml 安 三 S 3 CC Dfie///D/myWork/myHtml 窑 三 
价格 范围 ， 0 -wr5 价格 范围 ， Y0 -237 





图 407-1 图 407-2 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
< script src= "js/jquery -3.1.1.min. js"></script> 
< script src= "js/jquery - ui. min. js"></script >< script type= "text/javascript"> 
$ (function() { 
$ ("myRange"). slider({ range: "min",// 范 围 的 最 小 值 固定 
min: 0,// 最 小 值 
max: 500, // 最 大 值 
value: 75,// 初 始 当 前 值 
slide: function( event, ui ) { // 显 示 当 前 范围 
$ ("#myPrice" ).val("¥0-¥"+ui.valve ); } }); 
// 显 示 预 定义 范围 
SO Hyer ie val Fo "el(" a aid vl 
Ds; 
</script> 
<link rel = "stylesheet" href = "css/jquery — ui.min. css">< style type = "text/css"> 
#myRange{ margin: 3px auto; } /= 设置 范围 控件 的 基本 样式 * / 
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间 myPrice{ border: 0; color: red; font -weight: bold;} 。” /* 设置 提示 文本 的 基本 样式 * / 
</style></head> 
<body><p><label for = "myPrice"> 价 格 范围 : </label > 
< input type= "text" id = "myPrice"></p><div id= "myRange"></div></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , $ ("# myRange"). slider({range: 
"min" ,min:0,max:500,value:75 ,slide:function(event,ui) { $( "#myPrice” ). val("¥0—¥"+ 
ui. value ); })) 用 于 创建 下 限 固定 ,上限 可 调节 的 范围 滑 块 控件 ,在 这 种 情况 下 应 该 设置 range 参数 
为 min。slider() 方 法 主要 用 于 实现 通过 拖 动 单个 滑 块 来 改变 数值 ,该 方法 是 滑 块 部 件 (Slider 
Widget) 的 方法 ,因此 在 使 用 slider() 方 法 时 必须 添加 jquery-ui. min. js 和 jquery-ui. min css 两 个 
文件 。 

此 实例 的 源 文件 名 是 myHtmlA142. html。 


408 以 拖 动 range 滑 块 方式 改变 字体 的 大 小 


此 实例 主要 设置 < input > 标签 的 type 属性 为 range, 从 而 创建 一 个 滑 块 ,并 通过 拖 动 此 滑 块 来 实 
现 改变 字体 的 大 小 。 当 在 浏览 器 中 显示 该 页 面 时 .如果 使 用 鼠标 向 右 拖 动 滑 块 , 则 演示 文本 “HTML5 
炫 酷 实例 集锦 ”逐渐 变 大 ; 如 果 使 用 鼠标 向 左 拖 动 滑 块 , 则 演示 文本 "HTML5 炫 酷 实例 集锦 ”逐渐 变 
小 ,如 图 408-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 








百 - Do x 


国 localhost63342/myWor x 
6 3 CD localhost:63342/myWork/myH 字 | 三 


拖 动 滑 块 改变 文字 大 小 : 旨 


HTML5 炫 酷 实例 集锦 





图 408-1 


<!doctype html >< html >< head >< meta charset = UTF -8> 
< script src= "js/jquery- 3.1.1.min. js"></script >< script language = "javascript"> 
$ (document). ready(function() { 
function myFunc(){// 获 取 滑 块 的 当前 值 并 转换 成 int 类 型 
var mySize= parseInt( $ ("#mySize").prop("value")); 
// 根 据 滑 块 值 重 置 演示 文本 的 字体 大 小 
$ ("p").css("font— size", mySize); 
} 
setInterval (myFunc, 1); 
Ds; 
</script ></head> 
<body >< form style= "width: 400px;"> 
拖 动 滑 块 改变 文字 大 小 : < input type = "range" id= "mySize" min="12" max= "60" value= "12"/><br> 
<p style= "font - size: 12px"> HTML5 炫 酷 实例 集锦 </p></form ></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,range 属性 值 是 HTML5 中 < input > 
标签 的 type 属性 的 新 值 ,该 属性 值 指定 范围 值 的 输入 字段 ,在 HTML 页 面 中 显示 为 滑 块 。 一 旦 将 
<input > 标签 的 type 属性 设置 为 range, 则 应 该 参考 表 408-1 设置 < input > 标签 的 相关 属性 ,从 而 指定 
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该 滑 块 的 有 效 范围 和 步 长 值 。 
表 408-1 设置 < input > 标签 的 相关 属性 
属 人 性 值 描述 
max 数字 规定 允许 的 最 大 值 
min 数字 规定 允许 的 最 小 值 
step 数字 规定 合法 的 数字 间隔 (如 果 step 二 "3", 则 合法 的 数 是 一 3.0、3.6 等 ) 
value 数字 规定 默认 值 





此 实例 的 源 文件 名 是 myHtmlA010. html。 


409 ”创建 图 形 和 文字 结合 的 进度 条 显示 进程 


此 实例 主要 通过 使 用 < progress > 标签 实现 使 用 图 形 和 文字 结合 的 进度 条 动态 显示 当前 的 进程 。 
当 在 浏览 器 中 显示 该 页 面 时 , 单 击 “ 启 动 进度 条 ”按钮 . 则 进度 条 将 动态 改变 当前 的 状态 值 ,并 用 文字 
显示 完成 百分比 ,如 图 409-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 


百 - 5 x 








国 localhost63342/myWe x 





“ 3 © Dlocalhost63342/myWork/myHtm 安 


当前 进度 ，7 缴 


启动 进度 条 | 





图 409-1 


<!doctype html >< html >< head >< meta charset = UTF -8> 
< script src= "js/jquery- 3.1.1.min. js"></script>< script language = "javascript"> 
$ (document). ready(function() { 
var myValue= 0; var myTimer; 
function myFunc() { 
myValue++; $ ("#myBar").val(myValue); 
if (myValue >=$ ("#myBar").prop("max")) { 
clearInterval( myTimer); 
$ ("#myInfo").html(" 下 载 完 成 ") ，; 
} else{ 
$$ ("##myInfo").html(" 当 前 进度 : " + myValue +"%"); 
加 
$("#myBtn").click(function() {// 启 动 进度 条 
myValue = 0; myTimer = setInterval(myFunc, 100); 
D2;D); 
</script ></head> 
<body><p id= "myInfo"> 当前 进度 : </p> 
<progress value = "0" max = "100" id= "myBar" style= "width:300px"></progress> 
< input type = "button" value = "启动 进度 条 "id = "myBtn" style= "width:100px"/> 
</body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,< progress > 标签 定义 运行 中 的 进度 
(进程 ) ,该 标签 是 HTML5 的 新 标签 。< progress > 标签 (元 素 ) 最 常用 的 属性 是 max 和 value,max 属 
性 定义 最 大 值 .value 属性 定义 进程 的 当前 值 。 

此 实例 的 源 文 件 名 是 myHtmlA004. html。 
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410 使 用 meter 模拟 progress 的 进度 显示 


此 实例 主要 通过 使 用 meter 元 素 模拟 progress 元 素 的 功能 来 动态 显示 进度 。 当 在 浏览 器 中 显示 
该 页 面 时 , 单 击 “ 启 动 进度 条 ”按钮 , 则 进度 条 将 动态 改变 当前 的 状态 值 ,并 用 文字 显示 完成 百分比 ,如 
图 410-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 














-oo x 
国 localhost63342/myWor x 
6 3 © D localhost:63342/myWork/myHtmli 安 三 
当前 进度 ，32% 
ee 自动 进 划 条 
图 410-1 


<! doctype html >< html >< head >< meta charset = UTF -8> 
<script src= "js/jquery-3.1.1.min. js"></script>< script language = "javascript"> 
$ (document). ready(function() { 
var myValue = 0; var myTimer; 
function myFunc() { 
myValuet++; 
$ ("#myBar"). val(myValue); 
if (myValue>=$ ("#myBar").prop("max")) { 
clearInterval( myTimer); 
$ ("#myInfo").html(" 下 载 完成 ") ，; 
} else { 
$ ("#myInfo").html(" 当 前 进度 : " + myValue+ "于 ") ; 
Ya 
$("#myBtn").click(function() {// 启 动 进度 条 
myValue = 0; myTimer = setInterval(myFunc, 100); 
1) ;1); 
</script ></head> 
<body><p id= "myInfo"> 当 前 进度 : </p> 
<meter min = "0" max ="100" value ="0" id= "myBar" style = "width:300px" ></meter > 
< input type = "button" value = "启动 进度 条 "id = "myBtn" style = "width:100px"> 
</body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,< meter > 标签 显示 运行 中 的 进度 ( 进 
程 ) ,该 标签 是 HTML5 的 新 标签 。< meter > 标签 仅 用 于 已 知 最 大 和 最 小 值 的 度量 。< meter > 标签 常 
用 的 属性 说 明 如 表 410-1 所 示 。 
表 410-1 < meter > 标签 常用 的 属性 及 说 明 








属 人 性 值 描 述 

high number 定义 度量 的 值 位 于 哪个 点 ,被 界定 为 高 的 值 

low number 定义 度量 的 值 位 于 哪个 点 ,被 界定 为 低 的 值 

max number 定义 最 大 值 .默认 值 是 1 

min number 定义 最 小 值 ,默认 值 是 0 

optimum number 定义 什么 样 的 度量 值 是 最 佳 的 值 。 如 果 该 值 高 于 high 属性 的 值 , 则 意味 
着 值 越 高 越 好 ; 如 果 该 值 低 于 low 属性 的 值 , 则 意味 着 值 越 低 越 好 

value number 定义 度量 的 值 





此 实例 的 源 文件 名 是 myHtmlA026. html。 
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411 在 进度 条 上 显示 进度 完成 的 百分比 值 


此 实例 主要 在 jquery-ui. min. js 和 jquery-ui. min. css 的 progressbar () 方 法 中 传递 参数 ,从 而 实 
现 通过 定时 器 函数 setTimeout() 在 进度 条 上 同步 显示 当前 进度 的 百分比 值 。 当 在 Google Chrome 浏 
览 器 中 显示 该 页 面 时 ,进度 条 工作 时 显示 的 百分比 值 如 图 411-1 所 示 , 进 度 完 成 之 后 的 进度 条 显示 的 
提示 信息 如 图 411-2 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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<! doctype html >< html >< head ><meta charset = "UTF - 8"> 
< script src= "js/jquery -3.1.1.min. js"></script> 
< script src= "js/jquery - ui.min. js"></script>< script type= "text/javascript"> 
$ (function() { 
var myBar =$ ( "#myBar" ), myLabel =$ ( ".myLabel” ); 
myBar. progressbar( { // 创 建 图 文 结合 的 进度 条 
value: false, 
change: function() {myLabel. text( myBar.progressbar( "value” )+"%");}, 
complete: function() { myLabel. text(“" 完 成 !/”);} // 进 度 结束 的 提示 文本 
D); 
function progress() { 
var val = myBar. progressbar( "value"” ) || 0; 


myBar. progressbar( "value", val + 1 ); // 设 置 当前 进度 值 
if (val <99 ) { // 使 用 定时 器 每 隔 100 毫秒 更 新 一 次 进度 
setTimeout( progress, 100 ); 

ih 

setTimeout( progress, 1 ); // 使 用 定时 器 每 隔 1 毫秒 更 新 一 次 进度 
D); 
</script > 
<link rel ="stylesheet" href = "css/jquery - ui.min.css"><style type = "text/css"> 

/* 设置 进度 提示 文本 的 基本 样式 * / 


.myLabel { position: absolute;left: 45 $% ; top: 28px; font— weight: bold; text ~— shadow: 1px lpx 0 #FFF; } 
#myBar{ margin:20px auto; } 
</style></head> 
<body><div id = "myBar"><div class = "myLabel"> 加 载 . ..</div></div></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,setTimeout( progress,1 ) 表 示 每 毫 
秒 调用 一 次 progress() 方 法 。 在 JavaScript 中 ,setTimeout() 函数 用 于 在 指定 的 毫秒 数 后 调用 函数 
(方法 ) 或 计算 表达 式 ,该 函数 的 语法 格式 如 下 。 


setTimeout (code, millisec) 


其 中 ,参数 code 表示 在 调用 函数 后 要 执行 的 JavaScript 代码 串 ; 参数 millisec 表示 在 执行 代码 前 
需 等 待 的 毫秒 数 。 注 意 , setTimeout ( ) 这 个 定时 器 只 执行 一 次 code, 如果 要 多 次 调用 ,应 使 用 
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setInterval() 或 者 让 code 自身 再 次 调用 setTimeout()。 

myBar. progressbar() 用 于 设置 进度 条 工作 时 的 相关 参数 。progressbar() 方 法 主要 用 于 显示 一 
个 确定 的 或 不 确定 的 进程 状态 。 该 方法 是 进度 条 部 件 (Progressbar Widget) 的 方法 ,因此 在 使 用 
progressbar() 方 法 时 必须 添加 jquery-ui. min. js 和 jquery-ui. min. css 两 个 文件 。 

此 实例 的 源 文件 名 是 myHtmlA138. html。 


412 使 用 随机 色 设 置 不 确定 进度 条 的 背景 颜色 


此 实例 主要 在 jquery-ui. min. js 和 jquery-ui. min. css 的 progressbar() 方 法 中 传递 参数 false 创 
建 不 确定 进度 条 ,然后 使 用 Math. random() 方 法 产生 随机 颜色 值 ,从 而 实现 使 用 随机 色 设 置 不 确定 进 
度 条 的 背景 颜色 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,不 确定 进度 条 的 背景 颜色 如 图 412-1 
所 示 ; 按 F5 键 刷新 页 面 , 则 使 用 另 一 种 随机 颜色 设置 不 确定 进度 条 的 背景 颜色 ,如 图 412-2 所 示 。 有 
关 此 实例 的 主要 代码 如 下 。 








百 - oo x 


D myHemlA139 html i D myHtmlA139 html x 
ETE 二 : 二 
€ 3 C |D fle//Dymy mensmyrimiy | € 3 CC |B fie///D/myWorW/myHtmis| 三 





IIIIIIIIIIIIIIIIN), 





图 412-1 图 412-2 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<script src= "js/jquery -3.1.1.min.js"></script > 
<script src= "js/jquery - ui. min. js"></script >< script type = "text/javascript"> 
$ (function() { 
$ ("#myBar").progressbar({ value: false }); 
var myValue = $ ("#myBar").find(".ui ~ progressbar — value"); 
myValue. css({"background" : '#'+ Math. floor(Math. random( ) * 16777215). toString(16)}); // 使 用 随机 
颜色 设置 不 确定 进度 条 的 背景 颜色 
Ds; 
</script> 
<link rel = "stylesheet" href = "css/jquery— ui.min.css">< style type = "text/css"> 
#myBar {margin: 30px auto;} /* 设置 进度 条 的 基本 样式 * / 
</style></head> 
<body>< div id = "myBar"></div></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,Math. random() 方 法 用 于 返回 0 一 1 
的 一 个 随机 数 ; Math. floor() 方 法 用 于 进行 向 下 取 整 计算 , 它 返 回 的 是 小 于 或 等 于 函数 参数 ,并 且 与 
之 最 接近 的 整数 ，$ (" # myBar"). progressbar({value: false)) 用 于 创建 一 个 不 确定 的 进度 条 。 
progressbar() 方 法 主要 用 于 显示 一 个 确定 的 或 不 确定 的 进程 状态 .该 方法 是 进度 条 部 件 (Progressbar 
Widget) 的 方法 ,因此 在 使 用 progressbar() 方 法 时 必须 添加 jquery-ui. min. js 和 jquery-ui. min. css 两 
令 交 条 。 

此 实例 的 源 文 件 名 是 myHtmlA139. html。 
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413 ”通过 设置 按钮 的 阴影 属性 创建 渐变 色 按 钮 


此 实例 主要 通过 在 CSS 样式 中 设置 按钮 的 box-shadow 属性 来 创建 渐变 色 按钮 。 当 在 Google 
Chrome 浏览 器 中 显示 该 页 面 时 ,创建 的 两 个 渐变 色 按 钮 如 图 413-1 所 示 。 有 关 此 实例 的 主要 代码 
遇 直 
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<!doctype html >< html >< head >< meta charset = "UTF - 8"> 

<style> 

input {color: yellow;height: 34px;width: 200px;border - radius: 34px; 
box - shadow: inset 0 lpx # FFF, inset 0 12px rgba(255, 255,255,0.15), inset 0 4px 10px # CEF, 

inset 0 22px 5px #0773B4A, inset 0 — 5px 10px #0DF;} 

</style></head> 
<body >< input type = "button" value = "HTML5 炫 酷 应 用 实例 集锦 "人 > 

< input type= "button” value = "CSS3 炫 酷 应 用 实例 集锦 "人 > </body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,box-shadow: inset 0 1px #FFF， 
inset 0 12px rgba(255,255.255,0.15), inset 0 4px 10px #CEF, inset 0 22px 5px #0773B4, inset 0 
-5px 10px #0DF 用 于 创建 渐变 色 按钮 ,为 了 使 其 达到 逐 级 渐变 颜色 的 效果 ,使 用 了 多 个 内 置 阴影 。 
box-shadow 的 语法 格式 如 下 。 


box - shadow: inset x- offset Y- offset blur- radius spread— radius color 


在 默认 情况 下 ,box-shadow 是 外 置 阴影 .因此 可 以 省 略 inset, 当 需要 设置 内 置 阴影 时 则 应 明确 指 
定 inset。 
此 实例 的 源 文件 名 是 myHtmlB049. html。 


414 通过 设置 按钮 的 阴影 属性 创建 中 心 扩散 按钮 


此 实例 主要 通过 在 CSS 样式 中 设置 按钮 的 box-shadow 属性 来 创建 颜色 向 中 心 扩散 淡化 的 按钮 。 
当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 .创建 的 两 个 颜色 向 中 心 扩散 的 按钮 如 图 414-1 所 示 。 
有 关 此 实例 的 主要 代码 如 下 。 
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<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
< style> 
input { height: 50px; width: 200px; border- radius: 30px; 
box — shadow: inset Opx Opx 30px 10px rgba(0,51,53,0.85);} 
body{background - color: white;} 
</style></head> 
<body >< input type = "button" value = "HTML5 炫 酷 应 用 实例 集锦 "/> 
< input type = "button”value = "CSS3 炫 酷 应 用 实例 集锦 "/></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,box-shadow: inset 0px 0px 30px 
10px rgba(0,51,53,0. 85) 用 于 创建 颜色 向 中 心 扩散 的 按钮 ,为 了 达到 颜色 向 中 心 扩 散 的 效果 ,使 用 了 
内 置 阴影 inset。box-shadow 的 语法 格式 如 下 。 


box— shadow: inset x- offset y- offset blur- radius spread— radius color 


在 默认 情况 下 ,box-shadow 是 外 置 阴影 ,因此 可 以 省 略 inset, 当 需要 设置 内 置 阴影 时 则 应 明确 指 
定 inset。 在 此 实例 中 两 个 0px 分 别 代 表 x-offset 和 y-offset,30px 表示 blur-radius,10px 表示 spread- 
radius,rgba(0,51,53,0. 85) 表 示 color。 

此 实例 的 源 文件 名 是 myHtmlB051. html。 


415 ”使 用 盒子 阴影 创建 金属 质感 的 立体 按钮 


此 实例 主要 通过 使 用 盒子 阴影 和 径 向 渐变 创建 带 金属 质感 的 立体 按钮 。 当 在 Google Chrome 浏 
览 器 中 显示 该 页 面 时 , 单 击 “ 赞 成 "按钮 时 效果 如 图 415-1 所 示 ; 单 击 * 反 对 ?按钮 时 效果 如 图 415-2 所 
示 ; 单 击 “ 弃 权 ” 按 钮 时 效果 如 图 415-3 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 415-3 


<!doctype html >< html >< head >< meta charset = "UTF — 8"> 
<style type= "text/css"> 
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/* 设 置 按钮 正常 状态 时 的 阴影 */ 

.myButton { text— decoration: none; font: 24px/lem 'Droid Sans', sans— serif; 

font - weight: bold; text - shadow: rgba(255, 255, 255, 0.5) 0 1px 0;padding: 
0.5em 0. 6em 0.4em 0.6em; margin: 0. 5em; display: inline - block; position: relative; — 
webkit - border — radius: 8px; border - top: 1px solid rgba(255, 255, 255, 0.8); border— 
bottom: 1px solid rgba(0, 0, 0, 0.1); 
/* 通 过 径 向 渐变 生成 按钮 表面 的 金属 质感 的 发 光 效 果 * / 
background - image: — webkit - gradient(radial，50% 0, 100, 50% 0, 0, from(rgba(255, 255, 255, 
0)), to(rgba(255, 255, 255, 0.7))); 
color: hsl(0, 0%, 40% ) !important; background - color: hsl(0, 0%, 75%); 
/* 生成 下 边框 线 的 立体 阴影 * / 
~ webkit ~ box — shadow: inset rgba(255, 254, 255, 0.6) 0 0. 3em 0.3em, inset rgba(0, 0, 0, 0.15) 0 
—0.1em 0.3em, hsl(0, 0%, 60%) 0 0.1em3px, hsl(0, 0%, 45%) 0 0.3em 1px, rgba(0, 0, 0, 0.2) 0 
0. 5em 5px; } 

/* 设置 按钮 被 按 下 时 的 阴影 * / 

.myButton:active { background - image: — webkit — gradient(radial, 50% 0, 100, 50% 0, 0, from(rgba 
(255, 255, 255, 0)), to(rgba(255, 255, 255, 0))); — webkit - box— shadow: inset 
rgba(255, 255, 255, 0.6) 0 0. 3em 0.3em, inset rgba(0, 0, 0, 0.2) 0 — 0.1em 0.3em, 
rgba(0, 0, 0, 0.4) 0 0. lem lpx, rgba(0, 0, 0, 0.2) 0 0. 2em 6px; - webkit — 
transform: translateY(0.2em);} 

div{ margin: 15px; } 
</style></head> 
<body><div><a href = "并" class = "myButton” onclick = "alert(' 赞 成 ')"> 赞 成 </a><a href ="#" class=" 
myButton” onclick = "alert(' 反 对 ')"> 反 对 </a><a href ="#"class= "myButton” onclick = "alert(' 弃 权 ')"> 
弃权 </a></div></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , background-color: hsl(0,，0%， 
75%) 表 示 以 HSL 记 法 设置 背景 颜色 ,此 处 主要 用 于 产生 发 光 的 银色 金属 质感 。 在 CSS3 中 ,HSL 记 
法 的 语法 格式 如 下 。 

HSL(H, S,L) 


其 中 ,H 表示 Hue( 色 调 ),0( 或 360) 表 示 红 色 、120 表示 绿色 、240 表示 蓝 色 ,用 户 也 可 取 其 他 数 
值 来 指定 颜色 , 取 值 范围 为 0 一 360; S 表示 Saturation( 饱 和 度 ) , 取 值 范围 为 0.0% 一 100.0%; L 表示 
Lightness( 亮 度 ) , 取 值 范围 为 0.0% 一 100.0 电 。 

-webkit-box-shadow : inset rgba(255, 254, 255, 0.6) 0 0. 3em 0. 3em，inset rgba(0，0，0， 
0. 15) 0 一 0. lem 0. 3em, hsl(0, 0%, 60%) 0 0. lem 3px, hsl(0, 0%, 45%) 0 0. 3em lpx, rgba(0， 
0, 0, 0.2) 0 0.5em 5px 表 示 以 多 级 阴影 的 形式 生成 按钮 下 边框 线 的 立体 效果 。 在 CSS3 中 ,box- 
shadow 属性 用 于 向 盒子 添加 一 个 或 多 个 阴影 ,该 属性 是 由 逗号 分 隔 的 阴影 列表 ,每 个 阴影 由 2 一 4 个 
长 度 值 . 可 选 的 颜色 值 以 及 可 选 的 inset 关键 字 来 规定 ,省 略 长 度 的 值 是 0。 

此 实例 的 源 文件 名 是 myHtmlB312. html。 


416 ”将 默认 的 3D 风格 按钮 重 置 为 扁平 化 按钮 


此 实例 主要 取消 默认 按钮 的 边框 样式 并 使 用 内 置 阴影 重建 边框 ,从 而 实现 将 默认 的 3D 风格 按钮 
重 置 为 扁平 化 按钮 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,上 面 的 按钮 是 自 定义 的 扁平 化 按 
钮 ,下 面 的 按钮 是 默认 的 3D 风格 按钮 ,如 图 416-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 416-1 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<style> 
body{ background - color: lightgray; } 
.myButton { /* 通过 内 置 阴影 定制 边框 线 */ 
box- shadow: inset 0 0 0 1px black; border— style: none; } 
button{ margin: lem; padding: lem 2em;text - align: center; width:250px; } 
</style></head> 
<body>< center>< div><button class = "myButton"> 扁 平 化 按钮 </button>< br > 
<button > 默认 的 按钮 </button></div></center></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,box-shadow: inset 0 0 0 lpx black 
用 于 创建 宽度 为 1px 的 黑色 内 置 阴影 ; borderstyle: none 表示 无 边框 。 在 CSS 中 ,border-style 属性 
用 于 设置 元 素 所 有 边框 的 样式 ,或 者 单独 为 各 边 设置 边框 样式 ,该 属性 支持 的 属性 值 的 意义 如 表 416-1 





所 示 。 
表 416-1 border-style 属性 支持 的 属性 值 

属 性 值 | . 英 
none 定义 无 边框 
hidden 与 none 相同 ,不 过 应 用 于 表 时 除外 ,对 于 表 ,hidden 用 于 解决 边框 冲突 
dotted 定义 点 状 边框 ,在 大 多 数 浏览 器 中 呈现 为 实 线 
dashed 定义 虚线 ,在 大 多 数 浏览 器 中 呈现 为 实 线 
solid 定义 实 线 
double 定义 双 线 , 双 线 的 宽度 等 于 border width 的 值 
groove 定义 3D 凹 槽 边框 ,其 效果 取决 于 border-color 的 值 
ridge 定义 3D 垄 状 边框 ,其 效果 取决 于 border-color 的 值 
inset 定义 3D inset 边框 ,其 效果 取决 于 border-color 的 值 
outset 定义 3D outset 边框 ,其 效果 取决 于 border-color 的 值 
inherit 规定 应 该 从 父 元 素 继承 边框 样式 


此 实例 的 源 文件 名 是 myHtmlB233. html。 


417 使 用 radio 单 选 按钮 隐藏 或 者 显示 内 容 


此 实例 主要 通过 使 用 radio 单 选 按钮 input 元 素 ) 实 现 隐藏 或 显示 图 片 等 内 容 。 当 在 Google 
Chrome 浏览 器 中 显示 该 页 面 时 , 单 击 * 显 示 图 片 ”. 则 图 文 混合 效果 如 图 417-1 所 示 ; 单 击 “ 隐 藏 图 
片 ”, 则 图 片 隐 藏 之 后 的 效果 如 图 417-2 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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重庆 国际 博览 中 心 是 一 座 集 展览 、 会 议 ， 、 住 宿 、 演 
艺 、 厅 事 委 多 功 Cn 了 
江 新 区 的 核心 ， 在 各 和 人 从 专业 化 场 局。 重庆 国际 博览 
中 心 傍 水 ， XE 人 拥 
有 城市 、 区 二 自然 每 然 一 体 独 一 元 
二 的 公园 展 馆 、 人 文 展 馆 、 全 县 二 到 片 
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<! doctype html >< html ><head><meta charset = UTF -8> 
< style type = "text/css"> 

.myBox { width: 445px;} 

.myContent { background- color: #EEE; padding: 20px; border — radius: 10px;} 

.myCheckbox, .myMore, .myHide { position: absolute; left: — 9999px;} 

.myCheckbox:checked ~ .myLabel .myShow { position: absolute; left: - 9999px;} 

.myLabel {cursor: pointer; color: lightseagreen; text — decoration: underline;} 

. myLabel: hover {text - decoration: none;} 

.myCheckbox:checked ~ .myMore, .myCheckbox:checked ~ .myLabel .myHide { 

position: static;} 
img { width: 400px; height: 250px;border - radius: 10px; 
margin— top: 10px; margin ~ bottom: 5px;} 
</style></head> 

<body ><div class = "myBox"><div class = "myContent"> 重庆 国际 博览 中 心 是 一 座 集 展览 ,会 议 , 和 餐饮. 住宿、 演 
艺 赛事 等 多 功能 于 一 体 的 现代 化 智能 场馆 ,位 于 重庆 两 江 新 区 的 核心 ,是 西部 最 大 的 专业 化 场馆 。 重 庆 国 际 博 
览 中 心 雄 路 嘉陵 江岸 , 依 山 傍 水 ,公园 环抱 ,古镇 相伴 ,拥有 城市 .森林 自然 浑然 一 体 的 优美 环境 ,是 国内 独 一 无 
二 的 公园 展 馆 、 人 文 展 馆 、 生 态 展 馆 。 

< input type = "checkbox" id = "myToggle" class = "myCheckbox"/> 

< span class = "myMore">< img src = "img/B180. jpg"/></span> 

< label class = "myLabel" for = "myToggle"> 

< span class = "myHide"> 隐 藏 图 片 </span>< span class = "myShow"> 显 示 图 片 </span> 
</label ></div></div></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,. myCheckbox,. myMore,. myHidel 
position : absolute; left: -9999px; } 用 于 在 未 选中 单 选 按钮 myToggle 时 将 “隐藏 图 片 ” 文 本 和 图 片 放 
置 在 屏幕 之 外 , 即 用 户 不 可 见 “ 隐 藏 图 片 ” 文 本 和 图 片 ; . myCheckbox:checked 一 . myLabel. myShow 
{position: absolute; left: -9999px; } 用 于 在 选中 单 选 按钮 myToggle 时 将 “显示 图 片 ” 文 本 放置 在 屏 
幕 之 外 , 即 用 户 不 可 见 “ 显 示 图 片 ”文本 。 

此 实例 的 源 文件 名 是 myHtmlB180. html。 
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418 ”使 用 appearance 属性 将 超 链接 显示 为 按钮 


此 实例 主要 通过 设置 超 链接 的 appearance 属性 实现 超 链接 以 按钮 风格 进行 显示 。 当 在 Google 
Chrome 浏览 器 中 显示 该 页 面 时 ,6 个 按钮 本 质 上 就 是 超 链接 , 单 击 每 个 按钮 则 会 跳 转 到 相应 公司 的 





官方 网 站 ,如 图 418-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
面 - 5 x 


[DD myHemlB132 html x 
3 CC Dfile///D/myWorW/myHtmlBY 三 





2016 年 中 国 500 强 企业 前 6 名 名 单 





网 家 电网 公 司 | 
| 











中 国 建设 银行 股份 有 限 公司 





| 
中 国 工商 模 行 教 份 有 限 公司 
| 
| 











图 418-1 


<!doctype html >< html >< head >< meta charset = "UTF — 8"> 
< style type= "text/css"> 
at margin: 5px; padding:5px; text - decoration: none ;width: 350px; 
text ~ align: center;font - size: 14px; - webkit- appearance:button;} 
p{ width: 350px; text - align: center;} 
</style></head> 
<body><p>2016 年 中 国 500 强 企业 前 6 名 名 单 <p> 
<a href = "http://www. sgcc. com. cn" > 国家 电网 公司 </a> 
<a href = "http://www. cnpc. com. cn" > 中 国 石油 天 然 气 集团 公司 </a> 
<a href = "http://www. sinopecgroup.com" > 中 国 石油 化 工 集团 公司 </a> 
<a href = "http://www. icbc. com. cn" > 中 国 工 商 银行 股份 有 限 公司 </a> 
<a href = "http://www.ccb.com" > 中 国 建设 银行 股份 有 限 公司 </a> 
<a href = "http: //www. cscec. com. cn" > 中 国 建筑 股份 有 限 公司 </a></body ></html > 





上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,appearance 属性 主要 用 于 
HTML5 表单 元 素 浏览 器 内 置 的 一 些 UI, webkit 支持 的 appearance 属性 值 有 checkbox、 


scrollbarbutton-up, scrollbarbutton-down, scrollbarbutton-left, slider-horizontal, searchfield-decoration 、 


scrollbarbutton-right 、scrollbartrack-horizontal 、button、scrollbartrack-vertical、scrollbarthumb- 


horizontal、sliderthumb-horizontal 、radio、 scrollbarthumb-vertical、 scrollbargripper-horizontal 、 


scrollbargripper-vertical 、square-button、textfield、slider-vertical 、sliderthumb-vertical 、listitem 、 


menulist、 searchfield-results-decoration、 searchfield-results-button、 menulist-textfield、 searchfield- 


cancel-button .menulist-menulist-text searchfield ,textarea button-bevel listbox push-button, caret。 


如 果 需 要 去 掉 HTML5 表单 元 素 的 默认 样式 ,可 以 直接 设置 该 元 素 的 -webkit-appearance 属性 为 


none。 


此 实例 的 源 文 件 名 是 myHtmlB132. html。 
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419 在 日 期 选择 器 中 实现 年 份 和 周 数 的 选择 


此 实例 主要 设置 < input > 标签 的 type 属性 为 week, 从 而 实现 允许 用 户 在 日 期 选择 器 中 选择 年 份 
和 周 数 。 当 在 浏览 器 中 显示 该 页 面 时 , 单 击 “ 实 习 周 数 : "文本 框 右 端 的 下 拉 箭 头 ,将 滑 出 日 期 选择 器 ， 
在 日 期 选择 器 中 选择 年 份 和 周 数 ,例如 “2016 年 第 51 周 ”, 如 图 419-1 所 示 , 则 选择 结果 将 显示 在 “ 实 
习 周 数 :" 文 本 框 中 ; 单 击 * 确 认 登 记 信息 ?按钮 ,将 在 弹出 的 消息 框 中 以 纯 文 本 的 形式 显示 该 年 份 和 周 
数 ,如 图 419-2 所 示 。 当 然 ,用 户 也 可 以 直接 在 “实习 周 数 :" 文 本 框 中 修改 年 份 和 周 数 。 有 关 此 实例 的 


主要 代码 如 下 。 


























面 = go x =o x 
国 localhost63342/myWor x 全 国 localhost63342/myWor x 
€ 3 CDIocalhost63342/myWork/myH 安 | 三 全 2 CDIocalhost63342/myWork/myH 立 | 三 
学 生 姓 名 ， 学 生 姓名 ， 
实习 周 数 , | 加 年 第 一 局 Sv 实习 周 歼 ，| 2016 年 第 5! 周 
2016 年 1 月 ~ de 7 
让 localhost63342 上 的 网 页 显示 
9 5 ss 9 wo 
0 29314045 16 1 从 SS + 20W-W34 
51 9 2 2 223 24 25 
到 |28 27 28 29 30 3 























图 419-1 图 419-2 


<!doctype html >< html >< head >< meta charset = UIF -8> 
<script src= "js/jquery -3.1.1.min. js"></script >< script language = "javascript"> 
$ (document). ready(function() { 
$("#myBtn").click(function() {// 确 认 登 记 信 息 
alert(" 您 选择 的 周 数 是 : " + $ ("#myWeek").prop("value")); 
}) DD; 
</script ></head> 
<body >< form style= "width: 400px;"> 
学 生 姓 名 : < input type = "text" id = "myName"/><br><br> 
实习 周 数 : < input type= "week" id = "myWeek"” /><br><br> 
<button type = "button" id = "myBtn”style= "width: 250px"> 确 认 登 记 信息 </button > 
</form ></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,week 属性 值 是 HTML5 中 < input > 
标签 的 type 属性 的 新 值 , 该 属性 值 能 够 使 用 户 在 日 期 选择 器 中 选择 年 份 和 周 数 ,可 以 通过 < input > 标 
签 的 value 属性 来 获取 年 份 和 周 数 信息 。 

此 实例 的 源 文件 名 是 myHtmlA0l11. html。 


420 在 日 期 选择 器 中 实现 年 份 和 月 数 的 选择 


此 实例 主要 设置 < input > 标签 的 type 属性 为 month, 从 而 实现 允许 用 户 在 日 期 选择 器 中 选择 年 
份 和 月 数 。 当 在 浏览 器 中 显示 该 页 面 时 .在 “实习 月 数 :" 文 本 框 中 将 显示 预 置 的 年 份 和 月 数 ,例如 
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“2016 年 12 月 ”, 用 户 可 以 直接 在 此 编辑 年 份 和 月 数 , 也 可 以 单 击 右 端的 下 拉 箭 头 , 滑 出 日 期 选择 器 ， 
在 日 期 选择 器 中 选择 年 份 和 月 数 , 如 图 420-1 所 示 ,选择 结果 将 显示 在 “实习 月 数 : "文本 框 中 ; 单 击 
“确认 登记 信息 ”按钮 ,将 在 弹出 的 消息 框 中 以 纯 文 本 的 形式 显示 该 年 份 和 月 数 , 如 图 420-2 所 示 。 有 
关 此 实例 的 主要 代码 如 下 。 








百 - oo x 


国 lecalhost63342/myWor x\ 

所 2 © |D localhost:63342/myWork/myH 安 | 三 
学 生 姓名 ， 
实习 月 数 ， 











学 生 姓 名 ，[ 


实习 月 数 ，| 2016 年 12 月 


| 2016 年 1 月 ~ 
局 -网 - 周 = 周 外 周 五 周 信 周 昌 


localhost:63342 上 的 网 页 显示 : 


月 ;2016-12 
| 机 止 此 页 再 本 示 对 活 往 . 

















图 420-1 图 420-2 


<!doctype html ><html >< head >< meta charset = UIF -8> 
< script src= "js/jquery- 3.1.1.min. js"></script >< script language = "javascript"> 
$ (document). ready(function() { 
$ ("#myBtn").click(function() {// 确 认 登 记 信息 
alert(" 您 选择 的 月 数 是 : " +$ (" 间 myMonth") .prop("value”")); 
PE 
</script ></head> 
<body> <form style = "width: 400px;"> 
学 生 姓 名 : < input type = "text" id = "myName"/><br><br> 
实习 月 数 : < input type = "month" id = "myMonth” value = "2016 - 12"/><br><br> 
<button type = "button” id = "myBtn” style = "width: 250px"> 确 认 登 记 信 息 </button > 
</form ></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 .month 属性 值 是 HTML5 中 < input > 标 
签 的 type 属性 的 新 值 ,该 属性 值 能 够 使 用 户 在 日 期 选择 器 中 选择 年 份 和 月 数 , 可 以 通过 < input > 标签 
的 value 属性 来 获取 年 份 和 月 数 信 息 。 

此 实例 的 源 文件 名 是 myHtmlA012. html。 


421 在 日 期 选择 器 中 实现 年 .月 .日 信息 的 选择 


此 实例 主要 设置 < input > 标签 的 type 属性 为 date, 从 而 实现 允许 用 户 在 日 期 选择 器 中 选择 年 、 
月 \ 日 信息 。 当 在 浏览 器 中 显示 该 页 面 时 ,在 “出 生日 期 :" 文 本 框 中 将 显示 预 置 的 日 期 信息 ,例如 
“1987/08/23”, 用 户 可 以 直接 在 此 修改 日 期 信息 ,也 可 以 单 击 右 端 的 下 拉 箭 头 , 滑 出 日 期 选择 器 ,在 日 
期 选择 器 中 选择 日 期 信息 ,如 图 421-1 所 示 , 选 择 结果 将 显示 在 “出 生日 期 :" 文 本 框 中 ; 单 击 “ 确 认 登 
记 信 息 ” 按 钮 ,将 在 弹出 的 消息 框 中 以 纯 文本 的 形式 显示 该 日 期 信息 ,如 图 421-2 所 示 。 有 关 此 实例 的 
主要 代码 如 下 。 











百 - Do x 





























园 localhost63342/myWor x 国 localhost63342/mywor x 站 
€ 3 © Dlocalhost:63342/myWork/myH 字 | 三 € 3 CC Dlocalhost:63342/myWork/myH 安 三 
考生 姓名 ， 考生 姓名 ,|[ 
出 生日 期 , [00/2 XSv 出 生日 期 ，[1987/08/23 
| 1987 年 06 月 ~ 四 四 加 谓 认 各 记 信息 

局 - 周 ~ 周 = 周 四 周 五 周 六 周 日 localhost:63342 上 的 网 页 显示 : 

和 2 
3 4 § § 7 8 汪 车 登 记 的 日 赔 号 ; 1987-08-23 
0 1 1213 14 15 1 站 机 i 此 而 两 昭示 对 活性 
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图 421-1 图 421-2 


<!doctype html ><html ><head><meta charset = UTF - 8> 
<script src= "js/jquery- 3.1.1.min. js"></script >< script language = "javascript"> 
$ (document). ready(function() { 
$ ("myBtn").click(function() {// 确 认 登 记 信 息 
alert(" 您 登记 的 日 期 是 : " +$ ("#myDate").prop("value")); 
}) DD); 
</script ></head> 
<body>< form style= "width: 400px;"> 
考生 姓名 : < input type = "text" id= "myName"/><br><br> 
出 生日 期 : < input type = "date" id= "myDate" value= "1987- 08 一 23"/><br><br> 
< button type = "button" id = "myBtn” style= "width: 250px"> 确 认 登 记 信 息 </button > 
</form></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,date 属性 值 是 HTML5 中 < input > 
标签 的 type 属性 的 新 值 , 该 属性 值 能 够 使 用 户 在 日 期 选择 器 中 选择 年 .月 .日 等 日 期 信息 ,可 以 通过 
< input > 标签 的 value 属性 来 获取 该 日 期 信息 。 

此 实例 的 源 文件 名 是 myHtmlA014. html。 


422 在 日 期 选择 器 中 显示 年 份 下拉 列 表 


此 实例 主要 在 jquery-ui. min. js 和 jquery-ui. min. css 的 datepicker ( ) 方 法 中 设置 参数 
changeMonth 为 true、changeYear 为 true, 从 而 实现 在 日 期 选择 器 中 显示 年 份 和 月 份 的 下 拉 列 表 框 。 
当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 , 单 击 “ 出 生日 期 :" 输 入 框 , 则 将 显示 包含 年 份 和 月 份 下 
拉 列 表 框 的 日 期 选择 器 ,如 图 422-1 所 示 。 用 户 可 以 在 日 期 选择 器 的 任意 年 份 和 月 份 中 进行 选择 。 有 
关 此 实例 的 主要 代码 如 下 。 





<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<script src= "js/jquery -3.1.1.min. js"></script> 
< script src= "js/jquery - ui.min. js"></script>< script type = "text/javascript"> 
$ (function() { 
$("#myDatepicker").datepicker({// 人 允许 在 日 期 选择 器 中 弹出 月 份 和 年 份 下 拉 列 表 框 
changeMonth: true, // 在 日 期 选择 器 中 弹出 月 份 下 拉 列 表 框 
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changeYear: true// 在 日 期 选择 器 中 弹出 年 份 下 拉 列 表 框 

D2); 

</script> 

<link rel = "stylesheet" href = "css/jquery — ui.min.css"><style type = "text/css"> 
/* 注意 需要 默认 图 标 文件 : images\ui - icons 777777_256x240. pngx / 
/* 注意 需要 默认 图 标 文件 : images\ui - icons 444444 256x240. png*/ 
/* 设 置 日 期 选择 器 的 宽度 * / 
#myDatepicker { width: 275px; } 

</style></head> 

<body><p> 出 生日 期 : < input type = "text" id = "myDatepicker"></p></body></html > 











上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 | “了 
中 , $ ("# myDatepicker"). datepicker ((changeMonth: true, DuATekm x 
changeYear: true ) ) 中 的 changeMonth 参数 (属性 ) 值 为 true， 28 0 filey//D/myWork/myHtmlsz | 天 
表示 在 日 期 选择 器 中 显示 月 份 下 拉 列 表 框 , 在 默认 情况 下 日 期 | 出 和 6B 其 ,e927 
选择 器 不 显示 月 份 的 下 拉 列 表 框 ; changeYear 参数 (属性 ) 值 9 Vy i ° 
为 true ,表示 在 日 期 选择 器 中 显示 年 份 下 拉 列 表 框 ,在 默认 情 各 于 eos 
况 下 日 期 选择 器 不 显示 年 份 的 下 拉 列 表 框 。 如 果 仅 设置 7 |200 二 
$ ("#myDatepicker"). datepicker({changeYear: true }), 则 14| 15| 46 |2012 20 
在 日 期 选择 器 中 仅 显 示 年 份 下 拉 列表 框 ,不 显示 月 份 下 拉 列 表 a 加 
框 。 需 要 说 明 的 是 , datepicker( ) 方 法 是 日 期 选择 器 部 件 2015 
(Datepicker Widget) 的 方法 ,因此 在 使 用 datepicker() 方 法 时 EY 
必须 添加 jquery-ui. min. js 和 jquery-ui. min. css 两 个 文件 。 FE 
此 外 ,由 于 相关 的 图 标 源 自 默 认 图 标 文件 ui- icons_777777_ 2021 
256x240. png 和 ui-icons_444444_256x240. png(images 文件 ks 
夹 下 ) ,因此 需要 添加 这 些 文件 才能 正确 显示 ,否则 在 图 标 位 置 Fe 
会 显示 空白 。 2009 i 














此 实例 的 源 文件 名 是 myHtmlA170. html。 


423 在 日 期 选择 器 中 显示 月 份 下 拉 列 表 


此 实例 主要 在 jquery-ui. min. js 和 jquery-ui. min. css 的 datepicker ( ) 方 法 中 设置 参数 
changeMonth 为 true, 从 而 实现 在 日 期 选择 器 中 仅 显示 月 份 的 下 拉 列 表 框 。 当 在 Google Chrome 浏 
览 器 中 显示 该 页 面 时 , 单 击 * 出 生日 期 :" 输 入 框 : 则 将 显示 包含 月 份 下 拉 列 表 框 的 日 期 选择 器 ,如 
图 423-1 所 示 。 用 户 可 以 在 日 期 选择 器 的 任意 月 份 中 进行 选择 。 有 关 此 实例 的 主要 代码 如 下 。 


图 422-1 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 

< script src= "js/jquery -3.1.1.min. js"></script> 

< script src= "js/jquery - ui. min. js"></script >< script type= "text/javascript"> 
$ (function() {// 人 允许 在 日 期 选择 器 中 弹出 月 份 下 拉 列 表 框 

$ ("#myDatepicker").datepicker( {changeMonth: true });}); 

</script> 

<link rel = "stylesheet" href = "css/jquery ~ ui.min.css"><style type = "text/css"> 
/* 注 意 需要 默认 图 标 文件 : imagesNui - icons 777777_256x240. pngx / 
/* 注意 需 要 默认 图 标 文件 : imagesNui - icons 444444 256x240. png* / 
并 myDatepicker { width: 275px; } /x 设置 日 期 选择 器 的 宽度 x / 
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</style></head> 
<body><p> 出 生日 期 : < input type = "text" id= "myDatepicker"></p></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , $ ("#myDatepicker"). datepicker 
(({changeMonth: true )) 中 的 changeMonth 参数 (属性 ) 值 为 true. 表 示 在 日 期 选择 器 中 显示 月 份 下 拉 
列表 框 ,在 默认 情况 下 日 期 选择 器 不 显示 月 份 的 下 拉 列 表 框 。 需 要 说 明 的 是 ,datepicker() 方 法 是 日 
期 选择 器 部 件 (Datepicker Widget) 的 方法 ,因此 在 使 用 datepicker() 方 法 时 必须 添加 jquery-ui. min. 
js 和 jquery-ui. min. ess 两 个 文件 。 此 外 ,由 于 相关 的 图 标 源 自 默认 图 标 文件 ui-icons_777777_ 
256x240. png 和 ui-icons_444444_256x240. png(images 文件 夹 下 ) ,因此 需要 添加 这 些 文件 才能 正确 
显示 ,否则 在 图 标 位 置 会 显示 空白 。 

此 实例 的 源 文件 名 是 myHtmlA169. html。 
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424 创建 可 显示 和 选择 多 月 份 的 日 期 选择 器 


此 实例 主要 在 jquery-ui. min. js 和 jquery-ui. min. css 的 datepicker ( ) 方 法 中 设置 参数 
numberOfMonths, 从 而 实现 在 日 期 选择 器 中 显示 多 个 月 份 供用 户 选 择 。 当 在 Google Chrome 浏览 器 
中 显示 该 页 面 时 , 单 击 “ 出 生日 期 :" 输 入 框 , 则 显示 5、6、7 几 个 月 份 的 日 期 选择 器 ,如 图 424-1 所 示 ; 
单 击 日 期 选择 器 右上 角 的 按钮 , 则 显示 6、7、8 几 个 月 份 的 日 期 选择 器 ,如 图 424-2 所 示 ; 单 击 日 期 选 
择 器 左上 角 的 按钮 , 则 显示 4、5、6 几 个 月 份 的 日 期 选择 器 。 用 户 可 以 在 日 期 选择 器 的 任意 月 份 中 进 
行 选择 。 有 关 此 实例 的 主要 代码 如 下 。 


<! doctype html >< html >< head >< meta charset = "UTF - 8"> 
< script src= "js/jquery - 3.1.1.min. js"></script> 
< script src= "js/jquery - ui.min. js"></script>< script type="text/javascript"> 
$ (function() {// 显 示 3 个 月 份 的 日 期 选择 器 
$ ("#myDatepicker").datepicker({ numberOfMonths: 3 }); 
D); 
</script> 
<link rel = "stylesheet" href = "css/jquery ~ ui.min.css"><style type = "text/css"> 
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/* 注意 需要 默认 图 标 文件 : images\ui - icons 777777_256x240. png x / 
/V* 注意 需要 默认 图 标 文件 : imagesNui - icons 444444 256x240.pngx*/ 
V* 设 置 日 期 选择 器 的 宽度 * / 
# myDatepicker { width: 275px;} 
</style></head> 
<body><p> 出 生日 期 : < input type = "text" id= "myDatepicker"></p></body></htnml > 





上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , $ ("#myDatepicker"). datepicker 
({ numberOfMonths: 3 )) 中 的 numberOfMonths 参数 值 用 于 指定 需要 显示 的 月 份 数 量 。 需 要 说 明 
的 是 ,datepicker() 方 法 是 日 期 选择 器 部 件 (Datepicker Widget) 的 方法 ,因此 在 使 用 datepicker( ) 方 法 
时 必须 添加 jquery-ui. min. js 和 jquery-ui. min. css 两 个 文件 。 此 外 ,由 于 相关 的 图 标 源 自 默认 图 标 
文件 ui-icons_777777_256x240. png 和 ui-icons_444444_256x240. png(images 文件 夹 下 ) ,因此 需要 
添加 这 些 文件 才能 正确 显示 ,和 否则 在 图 标 位 置 会 显示 空白 。 

此 实例 的 源 文件 名 是 myHtmlA168. html。 











| 
DD myHemlA168 heml x 
5 3 C Dfile///D/myWork/myHtmlA168.html 它 通 
出 生日 期 [09102017 
o May 2017 June 2017 July 2017 o 
Sy Mo Tu We Th Fr Sa Sy Mo Tu We Th Fr $a Su Mo Tu We Th Fr Sa 
1 2 3 4 和 6 1 2 3 1 
7 sl 9 0 1 们 | 121 名 4 5 6 7) 者 9| 10| 2 3 4 5 6 7 8 


14) 115) 16) 17118 19) 20 411 12)| 13| 14) 15 16| 17 9 10 1 12 13 4 15 
21| 22| 23| 24| 25| 26| 27 | 18) 19| 20| 21| 22) 23| 24 | 16| 17| 18| 19 20| 21 22 
28| 29| 30) 31 25| 26| 27 28| 29 30 23| 24 25| 26| 27| 28| 29 





图 424-1 
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425 ”自动 校 验 在 范围 内 设置 的 年 .月 .日 信息 


此 实例 主要 设置 < input > 标签 的 type 属性 为 datetime-local, 从 而 实现 限制 用 户 在 文本 框 中 输入 
或 选择 有 效 的 年 月 日. 时、 分 等 日 期 信息 。 当 在 浏览 器 中 显示 该 页 面 时 ,在 “考试 日 期 :" 文 本 框 中 将 
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显示 预 置 的 日 期 ,用户 可 以 直接 在 此 修改 年 .月 .日 .时 、 分 等 日 期 信息 ,如 图 425-1 所 示 。 如 果 输 入 的 
月 数 大 于 12, 则 被 自动 更 正 为 12; 如 果 输 入 的 日 数 大 于 31, 则 被 自动 更 正 为 31; 如 果 输 入 的 小 时 数 
大 于 23, 则 被 自动 更 正 为 23; 如 果 输 入 的 分 钟 数 大 于 59 , 则 被 自动 更 正 为 59。 单 击 * 确 认 登 记 信息 ” 
按钮 , 则 将 在 弹出 的 消息 框 中 以 纯 文 本 的 形式 显示 该 日 期 信息 。 有 关 此 实例 的 主要 代码 如 下 所 示 : 


-oo x 


€ 2 © [Glocalhost63342/myWork/myHis| 
考试 科目 : [一 








国 localhost63342/myWor x 








考试 日 期 ，|2016/12/31 12:30 


靖 认 登 记 信息 





图 425-1 


<!doctype html ><html >< head >< meta charset = UIF -8> 
<script src= "js/jquery -3.1.1.min. js"></script >< script language = "javascript"> 
$ (document). ready(function() { 
$("myBtn").click(function() {// 确 认 登 记 信息 
alert(" 您 登记 的 日 期 是 : " +$ (" 间 myDate").prop("valve")); 
1)}); 
</script ></head> 
<body ><form style = "width: 400px;"> 考 试 科目 : < input type = "text”id= "myName"/><br><br> 考 试 日 期 : 
< input type = "datetime ~ local" id= "myDate"” value = "2016 - 12 - 07T12:30" /> <br><br>< button type = 
"button"” id = "myBtn”style = "width: 250px"> 确 认 登 记 信息 </button></form></body> </html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,datetime-local 属性 值 是 HTML5 中 
< input > 标签 的 type 属性 的 新 值 ,该 属性 值 能 够 使 用 户 在 文本 框 中 选择 或 设置 日 期 ,可 以 通过 < input > 
标签 的 value 属性 来 获取 该 日 期 信息 。 

此 实例 的 源 文件 名 是 myHtmlA015. html。 


426 ”自动 校 验 用 户 设置 的 小 时 数 和 分 钟 数 


此 实例 主要 设置 < input > 标签 的 type 属性 为 time. 从 而 实现 限制 用 户 在 文本 框 中 输入 或 选择 有 
效 的 小 时 数 和 分 钟 数 。 当 在 浏览 器 中 显示 该 页 面 时 ,在 “考试 时 间 :" 文 本 框 中 将 显示 预 置 的 小 时 数 和 
分 钟 数 , 例 如 *09:30”, 用 户 可 以 直接 在 此 修改 小 时 数 和 分 钟 数 。 如 果 输 入 的 小 时 数 大 于 23, 则 被 自动 
更 正 为 23; 如 果 输 入 的 分 钟 数 大 于 59, 则 被 自动 更 正 为 59。 单 击 “ 确 认 登 记 信息 ”按钮 , 则 将 在 弹出 
的 消息 框 中 以 纯 文本 的 形式 显示 该 小 时 数 和 分 钟 数 ,如 图 426-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 





<!doctype html >< html >< head >< meta charset = UTF -8> 
<script src= "js/jquery- 3.1.1.min. js"></script> 
< script language = " javascript"> 
$ (document). ready(function() { 
$("#myBtn").click(function() {// 确 认 登 记 信 息 
alert(" 您 登记 的 时 间 是 : " +$ (" 井 myTime").prop("value")) 7 
]) DD; 
</script ></head> 
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<body><form style = "width: 400pxi "> 考试 科目 : < input type= "text" id = "myName"/><br><br> 考试 时 间 : 
< input type= "time" id = "myTime”value ="09:30"/><br><br>< button type = "button" id= "myBtn" style = 
"width: 250px"> 确 认 登 记 信息 </button ></form> </body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,time 属性 值 是 HTML5 中 < input > 
标签 的 type 属性 的 新 值 ,该 属性 值 能 够 使 用 户 在 文本 框 中 选择 或 设置 时 间 ( 时 、 分 ), 可 以 通过 < input > 
标签 的 value 属性 来 获取 小 时 数 和 分 钟 数 信息 。 

此 实例 的 源 文件 名 是 myHtmlA013. html。 
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图 426-1 


427 自 定 义 在 日 期 选择 器 中 选择 的 日 期 格式 


此 实例 主要 在 jquery-ui. min. js 和 jquery-ui. min. css 的 datepicker () 方 法 中 设置 参数 option 为 
dateFormat 的 某 一 格式 ,从 而 实现 根据 指定 的 格式 显示 在 日 期 选择 器 中 选择 的 日 期 。 当 在 Google 
Chrome 浏览 器 中 显示 该 页 面 时 ,如 果 设置 “日 期 格式 :” 为 “ISO 8601 - yy-mm-dd” 则 “出 生日 期 :" 日 
期 选择 器 显示 的 日 期 是 "2017-05-17”, 如 图 427-1 所 示 ; 如 果 设 置 “ 日 期 格式 : ”为 ~*With text- 'day'd' 
of' MM 'in the year' yy”, 则 “出 生日 期 :" 日 期 选择 器 显示 的 日 期 是 "day 17 of May in the year 2017”， 
如 图 427-2 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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<! doctype html ><html >< head><meta charset = "UTF — 8"> 
<script src= "js/jquery- 3.1.1.min. js"></script> 
<script src= "js/jquery - ui. min. js"></script>< script type= "text/javascript"> 
$ (function() { 
$ ("#myDatepicker").datepicker({ 
changeMonth: true，// 在 日 期 选择 器 中 弹出 月 份 下 拉 列 表 框 
changeYear: true // 在 日 期 选择 器 中 弹出 年 份 下 拉 列 表 框 


D; 
$ ("#myFormat"). change(function() { // 设 置 日 期 显示 格式 
$ ("#myDatepicker"). datepicker("option", "dateFormat", $ (this).val()); 
D7}); 
</script> 
‘<link rel = "stylesheet" href = "css/jquery ~ ui.min. css">< style type = "text/css"> 
#myDatepicker { width: 270px; } /* 设置 日 期 选择 器 的 宽度 * / 
</style></head> 


<body ><div align = "center"><p> 日 期 格式 : < select id= "myFormat"> 
< option value = "mm/dd/yy"> Default - mm/dd/yy </option> 
<option value = "yy ~ mm dd"> ISO 8601- yy — mm— dd </option > 
<option value = "dM, y"> Short ~ dM, y</option> 
< option value = "d MM, y"> Medium- d MM, y</option> 
< option value = "DD, d MM, yy"> Full - DD, d MM, yy </option > 
< option value = "&apos; day&apos; d &apos;ofSapos; MM &apos; in the yearSapos; yy"> With text - 'day' d 'of' 
MM ' in the year' yy </option> 
</select ></p> 
<p> 出 生日 期 : < input type = "text" id = "myDatepicker"></p></div></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , $ ("#myDatepicker"). datepicker 
("option", "dateFormat"，$(this). val()) 中 的 $ (this). val() 为 下 拉 列 表 框 中 某 一 选项 具体 值 , 例 
如 “mm/dd/yy”, 此 行 代码 的 作用 就 是 设置 日 期 选择 器 的 日 期 格式 为 “~mm/dd/yy”。 需 要 说 明 的 是 ， 
datepicker() 方 法 是 日 期 选择 器 部 件 (Datepicker Widget) 的 方法 ,因此 在 使 用 datepicker() 方 法 时 必 
须 添加 jquery-ui. min. js 和 jquery- ui. min. css 两 个 文件 。 此 外 ,由 于 相关 的 图 标 源 自 默认 图 标 文件 
ui-icons_ 777777_256x240. png 和 ui-icons_444444_256x240. png(images 文件 夹 下 ) ,因此 需要 添加 这 
些 文件 才能 正确 显示 ,否则 在 图 标 位 置 会 显示 空白 。 

此 实例 的 源 文件 名 是 myHtmlA171. html。 


428 在 日 期 选择 器 中 设置 可 选择 的 日 期 范围 


此 实例 主要 在 jquery-ui. min. js 和 jquery-ui. min. css 的 datepicker() 方 法 中 设置 参数 minDate 和 
maxDate, 从 而 限制 用 户 在 日 期 选择 器 中 可 选 的 日 期 范围 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 
时 ,用 户 只 能 选择 2017-05-12 到 2017-05-22 的 日 期 ,如 图 428-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 


<!doctype html >< html>< head >< meta charset = "UTF - 8"> 
< script src= "js/jquery - 3.1.1.min. js"></script> 
<script src= "js/jquery - ui.min. js"></script>< script type = "text/javascript"> 
$ (function() { // 限 制 可 选 日 期 为 当前 日 期 的 前 、 后 5 天 
$ ("#myDatepicker").datepicker({ minDate: - 5, maxDate: "5" }); 
// 下 限 为 5 天 ,上 限 为 1 个 月 零 10 天 
//$ ("#myDatepicker").datepicker({ minDate: -5， maxDate: "+1M +10D"}); 
1D); 
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</script> 
<link rel = "stylesheet" href = "css/jquery — ui. min.css"><style type = "text/css"> 
# myDatepicker { width: 275px;} /* 设 置 日 期 选择 器 的 宽度 * / 
</style></head> 


<body><p> 出 游 日 期 : < input type = "text" id= "myDatepicker"></p></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,. $ ("#myDatepicker"). datepicker 
(fminDate: -5，maxDate: "5" 用 表示 用 户 在 日 期 选择 器 中 可 选 的 日 期 范围 为 当前 日 期 的 前 \ 后 5 
天 。 其 中 ,minDate 和 maxDate 参数 (选项 ) 限 制 可 选择 的 日 期 范围 ,如 果 设 置 为 字符 串 , 使 用 'D' 表 示 
天 ,使 用 'W' 表 示 周 ,使 用 'M' 表 示 月 ,使 用 'Y' 表 示 年 。 需 要 说 明 的 是 .datepicker() 方 法 是 日 期 选择 器 
部 件 (Datepicker Widget) 的 方法 ,因此 在 使 用 datepicker() 方 法 时 必须 添加 jquery-ui. min. js 和 
jquery-ui. min。ess 两 个 文件 。 此 外 ,由 于 相关 的 图 标 源 自 默认 图 标 文件 ui-icons_777777_256x240. 
png 和 ui-icons_444444_256x240. png(images 文件 夹 下 ) ,因此 需要 添加 这 些 文件 才能 正确 显示 ,和 否则 
在 图 标 位 置 会 显示 空白 。 

此 实例 的 源 文件 名 是 myHtmlA172. html。 
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429 ”在 日 期 选择 器 中 禁止 选择 周末 两 天 日 期 


此 实例 主要 在 jquery-ui. min. js 和 jquery-ui. min. css 的 datepicker ( ) 方 法 中 设置 参数 
beforeShowDay 为 $. datepicker. noWeekends, 从 而 禁止 用 户 选 择 日 期 选择 器 中 的 周末 两 天 日 期 。 当 
在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,星期 六 .星期 天 这 两 天 日 期 处 于 灰色 禁止 状态 ,不 可 选择 ， 
如 图 429-1 所 示 ; 单 击 标题 栏 左右 两 端的 "上 一 月 “下 一 月 ?按钮 切换 到 其 他 月 份 将 出 现 相 同 的 效 
果 , 如 图 429-2 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 

<!doctype html >< html >< head >< meta charset = "UTF - 8"> 


< script src= "js/jquery — 3.1.1.min.js"></script> 
< script src= "js/jquery - ui. min. js"></script >< script type = "text/javascript"> 


$ (function() { // 禁 止 选择 日 期 选择 器 中 的 周末 日 期 
$ ("#myDatepicker"). datepicker({beforeShowDay: $ .datepicker. noWeekends });}); 
</script > 


<link rel = "stylesheet" href = "css/jquery — ui.min.css"><style type = "text/css"> 
#myDatepicker { width: 275px; } /x* 设置 日 期 选择 器 的 宽度 x / 
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</style></head> 
<body ><p> 接 待 日 期 : < input type = "text" id= "myDatepicker"></p></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , $ ("#myDatepicker"). datepicker 
({beforeShowDay: $. datepicker. noWeekends )) 用 于 禁止 用 户 选 择 日 期 选择 器 中 的 星期 六 、 星 期 天 
这 两 天 日 期 。 需 要 说 明 的 是 ,datepicker() 方 法 是 日 期 选择 器 部 件 (Datepicker Widget) 的 方法 ,因此 
在 使 用 datepicker() 方 法 时 必须 添加 jquery-ui，min. js 和 jquery-ui. min. css 两 个 文件 。 此 外 ,由 于 相 
关 的 图 标 源 自 默认 图 标 文件 ui-icons_777777_256x240. png 和 ui-icons_444444_256x 240. png(images 
文件 夹 下 ) ,因此 需要 添加 这 些 文件 才能 正确 显示 ,和 否则 在 图 标 位 置 会 显示 空白 。 

此 实例 的 源 文件 名 是 myHtmlA173. html。 
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430 判断 选择 的 日 期 在 一 年 中 处 于 第 几 周 


此 实例 主要 通过 使 用 jquery-ui. min. js 和 jquery-ui. min. css 的 $. datepicker. iso8601Week() 方 
法 判断 用 户 选 择 的 日 期 在 一 年 中 处 于 第 几 周 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,在 “申报 
日 期 :" 日 期 选择 器 中 任意 选择 一 个 日 期 ,例如 “05/17/2017”, 如 图 430-1 所 示 ; 然后 单 击 “ 显 示 周 数 ” 
按钮 , 则 将 在 弹出 的 消息 框 中 显示 周 数 信息 ,例如 “05/17/2017 是 当年 第 20 周 ”, 如 图 430-2 所 示 。 有 
关 此 实例 的 主要 代码 如 下 。 
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<!doctype html >< html >< head >< meta charset = "UTF — 8"> 
<script src= "js/jquery- 3.1.1.min. js"></script> 
< script src= "js/jquery - ui. min. js"></script>< script type= "text/javascript"> 
$ (function() { 
$ ("#myDatepicker").datepicker({ changeMonth: true, changeYear: true}); 
$ (" 提 myBtnWeek") .click(function() { // 显 示 周 数 
var myInfo=$ ("并 myDatepicker").val()+" 是 当年 第 " + $ . datepicker. iso8601Week( new Date( $ ("# 
myDatepicker").val()))+" 周 "; 
alert(myInfo); 
D2}); 
</script > 
<link rel = "stylesheet" href = "css/jquery ~ ui.min.css"><style type = "text/css"> 
# myDatepicker { width: 170px;} 
# myBtnWeek{ width:100px;} 
</style></head> 
<body>< div align = "center"> 申 报 日 期 : < input type = "text" id = "myDatepicker"> 
<button id= "myBtnWeek"> 显 示 周 数 </button ></div></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , $. datepicker. iso8601Week( new 
Date( $ ("#myDatepicker"). val())) 用 于 判断 指定 的 日 期 在 一 年 中 处 于 第 几 周 ,该 方法 使 用 ISO 
8601 定义 一 周 , 一 周 从 星期 一 开始 ,每 一 年 的 第 一 周 都 包含 1 月 4 日 。 这 意味 着 上 一 年 最 多 有 3 天 可 
能 包含 在 当年 的 第 一 周 中 ,当年 最 多 有 3 天 可 能 包含 在 上 一 年 的 最 后 一 周 中 。 需 要 说 明 的 是 ， 
iso8601Week() 方 法 是 日 期 选择 器 部 件 (Datepicker Widget) 的 方法 ,因此 在 使 用 iso8601Week() 方 法 
时 必须 添加 jquery-ui, min. js 和 jquery-ui. min. css 两 个 文件 。 此 外 ,由 于 相关 的 图 标 源 自 默 认 图 标 文 
件 ui- icons_777777_256x240. png 和 ui-icons_444444_256x 240. png(images 文件 夹 下 ) ,因此 需要 添 
加 这 些 文件 才能 正确 显示 ,否则 在 图 标 位 置 会 显示 空白 。 

此 实例 的 源 文 件 名 是 myHtmlA174. html。 


431 实现 在 颜色 选择 器 中 选择 颜色 设置 背景 


此 实例 主要 设置 < input > 标签 的 type 属性 为 color, 从 而 实现 允许 用 户 在 颜色 选择 器 中 选择 颜色 
并 设置 页 面 的 背景 颜色 。 当 在 浏览 器 中 显示 该 页 面 时 颜色 按钮 将 显示 预 署 的 颜色 , 单 击 此 按钮 将 弹 
出 颜色 选择 器 ,在 颜色 选择 器 中 任意 选择 一 种 颜色 ,如 图 431-1 所 示 , 单 击 “ 确 定 " 按 钮 , 则 颜色 按钮 将 
显示 选择 的 颜色 ,然后 单 击 * 设 置 背 景 颜色 ?按钮 , 则 使 用 选择 的 颜色 设置 页 面 的 背景 颜色 ,如 图 431-2 
所 示 。 有 关 此 实例 的 主要 代码 如 下 。 








<!doctype html >< html >< head ><meta charset = UIF - 8> 
<script src= "js/jquery - 3.1.1.min. js"></script>< script language = "javascript"> 
$ (document). ready(function() { 
$ (" 间 myBtn").click(function() {// 设 置 背 景 颜色 
Var myColor = $ ("#myColor"). prop("value"); 
$ ('body').css("background - color", myColor); 
}) 1); 
</script ></head> 
<body><form style = "width: 400px; "> 请 选择 颜色 : < input type = "color" id= "myColor" value=" 间 00FF40" /> 
<button type= "button”id = "myBtn” style = "width: 150px"> 设 置 背 景 颜色 </button> </form > </body > 
</html > 


第 5 部 分 人》 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,color 属性 值 是 HTML5 中 < input > 
标签 的 type 属性 的 新 值 , 该 属性 值 能 够 使 用 户 在 颜色 选择 器 中 选择 并 定制 颜色 ,用 户 可 以 通过 < input > 
标签 的 value 属性 来 获取 颜色 选择 器 返回 的 颜色 值 信息 。 

此 实例 的 源 文件 名 是 myHtmlA016. html。 
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432 ”使 用 radio 单 选 按钮 实现 纯 CSS 选项 卡 


此 实例 主要 演示 了 如 何 使 用 radio 单 选 按钮 (input 元 素 ) 实 现 纯 CSS 的 选项 卡 。 当 在 Google 
Chrome 浏览 器 中 显示 该 页 面 时 , 单 击 “ 中 央 公 园 ” 选 项 卡 ,效果 如 图 432-1 所 示 ; 单 击 * 山 城 夜 景 " 选 项 
卡 ,效果 如 图 432-2 所 示 ; 单 击 “ 乐 山大 佛 ” 选 项 卡 ,效果 如 图 432-3 所 示 。 有 关 此 实例 的 主要 代码 
如 下 。 





<!doctype html ><html >< head ><meta charset = UIF -8> 
<style type = "text/css"> 
/* 设 置 盒子 的 基本 样式 * / 
.myBox { width: 420px; min - height: 250px; position: relative; } 
/* 标 题 块 空心 部 分 * / 
.myTab {width: 25% ; margin - right: - lpx; border: 1px solid #CCC; float: left;border -top - left— 
radius: 6px; border ~ top- right ~ radius: 6px;} 
/* 标题 块 实心 部 分 * / 
. myLabel {display: block; padding - top: Spx; padding — bottom: Spx; background - color: 
lightgoldenrodyellow; text - align: center; border - top — left - radius: 6px; border - top 
一 right - radius: 6px;} 
.myRadio, .myTab content { position: absolute; left: — 4999em; 
border - bottom— left - radius: 10px; border — bottom — right - radius: 10px; 
border — top - right - radius: 10px; background — color: aqua; } 
/* 选 中 内 容 块 * / 
.myRadio:checked ~ .myTab content { margin - top: - lpx; padding: 1px; 
border: 1px solid #0CCC;left: 0;right: 0; background— color: aqua; } 
/* 选 中 标题 块 */ 
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. myRadio: checked ~ . myLabel { border - bottom: Opx solid # FFF; position: relative; z - index: 1; 
margin - bottom: — 1px; background— color: aqua; } 

img {float: left; border - radius: 10px; padding: 5px; margin - top: 7px; margin - left: 7px; width: 
210px; height: 140px; } 

p { font - size: 14px; padding— left: 10px; padding - right: 10px;} 

</style></head> 

<body ><div class = "myBox">< div class = "myTab"> 

< input type = "radio" id = "myTabRadiol" class = "myRadio" name = "tab" checked = "checked"/> 

<label class= "myLabel" for = "myTabRadiol"> 中 央 公 园 </label > 

<div class= "myTab_ content">< img src= "img/B179A. jpg"/><p> 重 庆 中 央 公 园 是 西南 地 区 最 大 的 开放 式 城 
市 中 心 公园 , 西 距 在 建 的 悦 来 重庆 国际 会 展 城 3 公里 , 东 距 江北 国际 机 场 5 公里 。 它 是 一 个 依托 重庆 山水 风貌 
特色 ,融会 中 西 文化 的 现代 城市 公园 ,将 成 为 重庆 新 地 标 。 开 网 后 ,将 与 年 底 投 用 的 国际 会 展 城 一 起 ,成 为 两 江 
新 区 重大 城市 功能 板块 。 这 是 国际 中 心 区 率先 启动 的 双核 , 这 里 也 将 成 为 重庆 新 中 心 最 大 的 休闲 去 处 , 重庆 的 
标志 性 公园 。</p></div></div> 

<div class= "myTab"> < input type = "radio" id = "myTabRadio2" class = "myRadio" name = "tab"/>< label 

class = "myLabel"” for = "myTabRadio2"> 山 城 夜 景 </label ><div class="myTab content"”> <img src="img/ 
B179B. jpg"/> <p> 山 城 夜景 即 重庆 夜景 。 重 庆 市 区 三 面临 江 , 一 面 靠 山 , 倚 山 筑城 ,建筑 层 麦 符 起 ,道路 盘旋 而 
上 ,城市 风貌 独特 ,由 此 形成 奇 丽 夜 景 。 初 夜 山城 ,以 繁华 区 灯饰 群 为 中 心 ,干道 和 桥梁 华灯 为 纽带 ,万 家 民居 灯 
火 为 背景 , 层 见 全 出 ,构成 一 片 高 下 井然 .错落 有 致 .远近 互 衬 的 灯 的 海洋 。 车 船 流 光 , 不 停 穿 梭 于 茫茫 灯 海 之 
中 ,依稀 飞 起 汽笛 ,欢笑 , 笔 歌 之 声 ,给 夜中 城 平添 无 限 生 机 。 更 兼 两 江波 澄 银 树 , 浪 卷 金 花 , 满 天 繁星 似 人 间 灯 
火 , 遍 地 华灯 若 天 河 群星 ,上 下 浑然 一 体 ,五 彩 交相辉映 , 如 梦 如 幻 ,如 诗 如 歌 , 堪 足 氛 人 耳目 ,动人 心 旋 。 不 览 夜 
景 ,未 到 重庆 。</p></div></div> 

<div class = "myTab">< input type = "radio" id = "myTabRadio3" class = "myRadio" name = "tab"/> < label 
class= "myLabel" for = "myTabRadio3"> 乐 山大 佛 </label >< div class = "myTab_content">< img src = "img/ 
B118. jpg"/><p> 乐 山大 佛 ,地 处 四 川 省 乐山 市 ,岷江 、 青 衣 江 和 大 渡河 三 江 汇 流 处 ,与 乐山 城 隔 江相望 , 北 距 成 都 
160 余 公 里 。 它 是 依 凌云 山 栖霞 峰 临 江 峭 壁 羡 造 的 一 尊 大 佛 , 始 羡 于 唐 开元 元 年 (公元 713 年 ), 历时 90 余年 方 
建成 , 建 高 71 米 , 有 " 山 是 一 尊 佛 , 佛 是 一 座 山 "之 称 ,是 世界 上 最 大 的 石刻 大 佛 。 乐 山大 佛 头 与 山 齐 , 足 踏 大 江 ， 
双手 抚 膝 , 大 佛 体态 匀称 , 神 势 肃穆 , 依 山北 成 , 临 江 危 坐 。 大 佛 通 高 71 米 , 头 高 14.7 米 , 头 宽 10 米 ,发 导 1051 
个 , 耳 长 6.7 米 , 鼻 和 由 长 5.6 米 ,嘴巴 和 眼 长 3.3 米 , 颈 高 3 米 , 肩 宽 24 米 ,手指 长 8.3 米 ,从 膝盖 到 脚背 28 米 ， 
脚背 宽 9 米 ,脚面 可 围 坐 百 人 以 上 。</p></div></div></div></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,checked 选择 器 用 于 匹配 每 个 已 被 选 
中 的 input 元素 ,并 且 只 用 于 单 选 按钮 和 复 选 框 ,在 此 实例 中 主要 用 于 设置 选中 选项 卡 的 CSS 样式 。 
此 实例 的 源 文件 名 是 myHtmlB179. html。 
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433 ”创建 标签 在 左 侧 排列 的 纵向 风格 选项 卡 


此 实例 主要 使 用 jquery-ui. min. js 和 jquery-ui. min. css 的 tabs( ) 方 法 创建 选项 卡 ,并 使 用 
addClass("ui-tabs-vertical") 方 法 添加 CSS 样式 ,从 而 实现 选项 卡 的 标签 纵向 分 布 在 内 容 的 左 侧 。 当 
在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,如 果 单 击 左 侧 的 标签 "乐山 大 佛 ”, 则 将 显示 “乐山 大 佛 ” 对 
应 的 内 容 , 如 图 433-1 所 示 ; 如 果 单 击 左 侧 的 标签 中央 公园 ”, 则 将 显示 “中 央 公 园 ” 对 应 的 内 容 , 如 
图 433-2 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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<!doctype html ><html >< head >< meta charset = "UTF - 8"> 
<script src= "js/jquery- 3.1.1.min. js"></script> 
< script src= "js/jquery — ui.min. js"></script>< script type = "text/javascript"> 


$ (function() { // 创 建 标签 在 左 侧 的 纵向 风格 布局 的 选项 卡 
$ ("#tabs"). tabs().addclass("ui— tabs- vertical"); }); 
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</script> 
<link rel = "stylesheet" href = "css/jquery — ui.min. css">< style type = "text/css"> 
# tabs { border: none; width: 461px; } /x 设置 选项 卡 的 基本 样式 x/ 
/* 设 置 标签 盒子 的 基本 样式 */ 
. mybox { background — color: white; border: none;padding: 0 ! important;} 
/* 设 置 选项 卡 内 容 部 分 的 基本 样式 * / 


#tabs— 1，#tabs - 2 { border: Opx solid gray; border - radius: 10px; width: 320px; 
background - color: cyan; padding: 5px 15px; } 
/* 设 置 标签 的 基本 样式 * / 
.ui- tabs - vertical .ui- tabs- nav { float: left; width: 100px; margin -top: 50px; } 
/* 设 置 标签 列表 项 的 基本 样式 * / 
.ui-tabs -vertical .ui- tabs— nav li {width: 100%; 
border - bottom - width: 1px ! important; border - right — width: Opx !important; 
border - bottom - left — radius: 5px; border - top— left- radius: 5px; } 
/* 设 置 标签 超 链接 的 基本 样式 * / 
.ui-tabs -vertical .ui- tabs— nav lia { display: block;outline: none;} 
/* 设 置 焦点 标签 的 基本 样式 * / 
.ui~ tabs— vertical .ui-tabs-mnavli.ui-tabs-active{ 
padding - bottom: 0;border:none !important; background — color: cyan; } 
/* 设 置 内 容 面板 的 基本 样式 */ 
.ui~ tabs -vertical .ui- tabs- panel { padding- left:10px; float: left; } 
/* 设 置 图 像 的 基本 样式 * / 
img { float: left; border - radius: 10px; padding: 5px; width: 210px; height: 135px; 
box - shadow: 2px 2px 10px black; margin - right: 12px; margin - top: 17px; margin - bottom: 5px; margin— 
left: 2px; } 
</style></head> 
<body>< div id = "tabs"><ul class = "mybox"> 
<1i><ahref="#tabs -1"> 乐 山大 佛 </a></1i> 
<1i><ahref="#tabs-2"> 中 央 公园 </a></1i></ul> 
<div id= "tabs- 1">< img src= "img/B118.jpg" style = "float:1left;"><p> 乐 山大 佛 ,地 处 四 川 省 乐山 市 , 岷 
江 、 青 衣 江 和 大 渡河 三 江 汇 流 处 ,是 世界 上 最 大 的 石刻 大 佛 。 乐 山大 佛 头 与 山 齐 , 足 踏 大 江 , 双手 抚 肤 , 大 佛 体态 
匀称 , 神 势 肃穆 , 依 山 涂 成 , 临 江 危 坐 。 大 佛 通 高 71 米 , 头 高 14.7 米 , 头 宽 10 米 ,发 医 1051 个 , 耳 长 6.7 米 , 鼻 和 
由 长 5.6 米 ,嘴巴 和 眼 长 3.3 米 , 颈 高 3 米 , 肩 宽 24 米 ,手指 长 8.3 米 , 从 膝盖 到 脚背 28 米 , 脚背 宽 9 米 , 脚 面 可 
围 坐 百人 以 上 。</p></div> 
<div id = "tabs- 2">< img src= "img/B179A. jpg" style= "float:left;i"><p> 重 庆 中 央 公园 是 西南 地 区 最 大 
的 开放 式 城市 中 心 公 园 , 西 距 在 建 的 悦 来 重庆 国际 会 展 城 3 公里 , 东 距 江北 国际 机 场 5 公里 。 它 是 一 个 依托 重 
庆 山 水 风貌 特色 ,融会 中 西 文化 的 现代 城市 公 网 ,将 成 为 重庆 新 地 标 。 开 网 后 ,将 与 年 底 投 用 的 国际 会 展 城 一 
起 ,成 为 两 江 新 区 重大 城市 功能 板块 。 这 是 国际 中 心 区 率先 启动 的 双核 , 这 里 也 将 成 为 重庆 新 中 心 最 大 的 休闲 
去 处 ,重庆 的 标志 性 公园 。</p></div></div></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 .$("#tabs"). tabs(). addClass("ui- 
tabs-vertical" ) 用 于 通过 设置 CSS 样式 将 选项 卡 的 标签 重 置 于 内 容 的 左 侧 , 在 使 用 addClass("ui-tabs- 
vertical") 方 法 实现 将 标签 布局 在 选项 卡 的 左 侧 之 前 ,通常 需要 像 实例 这 样 设置 . ui-tabs-vertical 下 面 
的 相关 元 素 样式 。tabsO 〇 方法 主要 用 于 实现 单 击 选项 卡 的 标签 页 ,切换 到 标签 页 对 应 的 内 容 , 该 方法 
是 选项 卡 部 件 (Tabs Widget) 的 方法 ,因此 在 使 用 tabs() 方 法 时 必须 添加 jquery-ui. min. js 和 jquery- 
ui, min. css 两 个 文件 。 

此 实例 的 源 文件 名 是 myHtmlA144. html。 
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434 ”创建 在 标签 右 侧 包含 “关闭 ”按钮 的 选项 卡 





此 实例 主要 使 用 jquery-ui. min. js 和 jquery-ui. min. css 的 tabs() 方 法 创建 默认 的 选项 卡 , 并 使 用 
delegate() 方 法 处 理 , 单 击 标签 右 侧 的 “关闭 ”按钮 事件 .从 而 实现 单 击 选项 卡 标签 右 侧 的 “关闭 ”按钮 
即 可 关闭 该 标签 页 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 将 显示 两 个 在 标签 右 侧 包含 “关闭” 
按钮 的 选项 卡 ,如 图 434-1 所 示 ; 单 击 标签 “乐山 大 佛 ” 右 侧 的 “关闭 ”按钮 . 则 将 关闭 “乐山 大 佛 ” 标 签 
页 ,如 图 434-2 所 示 ; 单 击 标签 中 央 公 园 ” 右 侧 的 "关闭 ”按钮 将 实现 类 似 的 功能 。 有 关 此 实例 的 主要 
代码 如 下 。 
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山大 佛 0 国 守 于 到] 中 央 公 园 品 








图 434-1 图 434-2 


<!doctype html >< html >< head > < meta charset = "UTF - 8"> 
<script src= "js/jquery -3.1.1.min.js"></script> 
<script src= "js/jquery - ui. min. js"></script >< script type = "text/javascript"> 
$ (function() { 
var tabs= $ ( "#tabs" ).tabs(); // 创 建 默 认 的 选项 卡 
//" 关 闭 " 按 钮 , 当 单 击 时 移 除 标签 页 
$("#tabs"). delegate( "span.ui— icon— close"，"click"，function() { 
var panelId= $ ( this ).closest( "li" ).remove().attr( "aria ~— controls" ); 
$("#"+panelld ). remove(); 
tabs. tabs( "refresh" ); });}); 
</script> 
<link rel = "stylesheet" href = "css/jquery — ui.min. css">< style type = "text/css"> 
#tabs { border: none; width: 400px; } 
/* 设 置 标签 盒子 的 基本 样式 */ 
.mybox { border: none; padding - left: 10px ! important; } 
#tabs-1, #tabs—2 { border: Opx solid gray; border - radius: 5px; background - color: cyan; } 
/* 设 置 标签 导航 栏 列表 项 的 基本 样式 * / 
.ui— tabs— nav li { border: none;display: block; background - color: gray! important; 
border -top - right - radius: 5px; border -top- left ~ radius: 5px; 
border: none ! important; } 
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/=* 设 置 标签 导航 栏 焦点 列表 项 的 基本 样式 * / 
.ui 一 tabs -nav 1i.ui-tabs-active { margin- bottom: - lpx; padding- bottom: 1px; 
background - color: cyan! important; font - weight: bold; } 
/* 设 置 标签 列表 项 超 链接 的 基本 样式 * / 
.ui 一 tabs -nav lia{ display: block; outline: none; color: navy! important; } 
/* 设 置 图 像 的 基本 样式 * / 
img {float: left; border- radius: 10px; padding: 5px; width: 210px; height: 135px; 
box — shadow: 2px 2px 10px black; margin - right: 12px; margin - top: 17px; margin - bottom: 5px; 
margin - left: 2px; } 
/* 设 置 "关闭 "按钮 的 基本 样式 */ 
#tabs 1i .ui- icon- close {background:url("img/A146. png") no - repeat; 
background — size: 15px 15px;background — position: 1px 2px; 
float: left; margin: 0. 4em 0.2em 0 0; cursor: pointer;} 
</style></head> 
<body>< div id = "tabs"><ul class= "mybox"> 
<1i><a href =" 间 tabs -1"> 乐 山大 佛 </a>< span class= "ui- icon ui- icon -close" ></span> </1i> 
<1i><ahref="#tabs -2"> 中 央 公园 </a>< span class = "ui- icon ui- icon -close" ></span> </1i></ul> 
<div id= "tabs- 1">< img src= "img/B118.jpg" style= "float:left;"><p> 乐 山大 佛 ,地 处 四 川 省 乐山 市 , 岷 
江 、 青 衣 江 和 大 渡河 三 江 汇 流 处 ,是 世界 上 最 大 的 石刻 大 佛 。 乐 山大 佛 头 与 山 齐 , 足 踏 大 江 , 双手 抚 膝 , 大佛 体态 
匀称 , 神 势 击 穆 , 依 山 溺 成 , 临 江 危 坐 。 大 佛 通 高 71 米 , 头 高 14.7 米 , 头 宽 10 米 ,发 器 1051 个 , 耳 长 6.7 米 , 鼻 和 
眉 长 5.6 米 ,嘴巴 和 眼 长 3.3 米 , 颈 高 3 米 , 肩 宽 24 米 , 手 指 长 8.3 米 , 从 膝盖 到 脚背 28 米 ,脚背 宽 9 米 , 脚 面 可 
围 坐 百人 以 上 。</p></div> 
<div id= "tabs-2">< img src= "img/B179A. jpg” style= "float:lefti"><p> 重 庆 中 央 公 园 是 西南 地 区 最 大 
的 开放 式 城 市 中 心 公园 , 西 距 在 建 的 悦 来 重庆 国际 会 展 城 3 公里 , 东 距 江北 国际 机 场 5 公里 。 它 是 一 个 依托 重 
庆 山 水 风貌 特色 ,融会 中 西 文化 的 现代 城市 公园 ,将 成 为 重庆 新 地 标 。 开 网 后 ,将 与 年 底 投 用 的 国际 会 展 城 一 
起 ,成 为 两 江 新 区 重大 城市 功能 板块 。 这 是 国际 中 心 区 率先 启动 的 双核 , 这 里 也 将 成 为 重庆 新 中 心 最 大 的 休闲 
去 处 ,重庆 的 标志 性 公园 。</p></div></div></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,# tabs li .uiricon-close { } 用 于 设置 
“关闭 ”按钮 的 基本 样式 ; < span class 一 "ui-icon ui-icon-close” ></span > 用 于 将 "关闭 "按钮 放置 在 标 
签 上 ;再 ("#tabs"),. tabs() 用 于 创建 一 个 默认 的 选项 卡 ; $ ("#tabs"). delegate( "span. uiricon- 
close"，"click", function() {}) 用 于 处 理 鼠 标 单 击 “关闭 ?按钮 事件 。 需 要 说 明 的 是 ,tabs() 方 法 是 选 
项 卡 部 件 (Tabs Widget) 的 方法 ,因此 在 使 用 tabs() 方 法 时 必须 添加 jquery-ui. min. js 和 jquery-ui. 
min. css 两 个 文件 。 

此 实例 的 源 文件 名 是 myHtmlA146. html。 


435 ”创建 通过 底部 的 标签 进行 导航 的 选项 卡 


此 实例 主要 使 用 jquery-ui. min. js 和 jquery-ui. min. css 的 tabs() 方 法 创建 默认 的 选项 卡 ,并 使 用 
$(", ui-tabs-nav"). appendTo(". tabs-bottom") 方 法 添加 CSS 样式 ,从 而 实现 将 选项 卡 的 标签 从 顶 
部 移动 到 底部 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,如 果 单 击 底部 的 标签 “乐山 大 佛 ”, 则 将 
显示 “乐山 大 佛 ” 对 应 的 内 容 , 如 图 435-1 所 示 ; 如 果 单 击 底部 的 标签 “中 央 公 园 ”, 则 将 显示 “中 央 公 
周 ” 对 应 的 内 容 ,如 图 435-2 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 

















<!doctype html >< html >< head >< meta charset = "UTF — 8"> 
<script src= "js/jquery - 3.1.1.min. js"></script > 
< script src= "js/jquery - ui. min. js"></script>< script type="text/javascript"> 
$ (function() { $ ("#tabs").tabs(); // 创 建 选项 卡 
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$ (".ui— tabs— nav").appendTo(". tabs - bottom"); // 移 动 导航 标签 到 底部 
Ds; 
</script> 
<link rel = "stylesheet" href = "css/jquery - ui.min.css">< style type = "text/css"> 
#tabs { border: none; width: 400px; } /* 设置 选项 卡 的 基本 样式 * / 
/* 设 置 选 项 卡 内 容 部 分 的 基本 样式 * / 


#tabs—1, #tabs— 2 { border: 0px solid gray; border - radius: 10px; width: 100%; 

background - color: cyan; padding: 5px 15px; } 

/* 设 置 标签 盒子 的 基本 样式 */ 

-mybox { background— color: white; border: none; padding: 0 ! important; } 

/* 设 置 标签 导航 栏 的 基本 样式 */ 

.tabs - bottom .ui— tabs— nav { clear: left; margin— left:110px; } 

/* 设置 标签 导航 栏 列表 项 的 基本 样式 * / 

.tabs - bottom . ui - tabs - nav li { top: auto; bottom: 0; margin: 0 0.2em 1px 0; border - top: 0; 
display: block; background - color: gray; border - bottom - right - radius: 5px; border — bottom - left 一 
radius: 5px; } 

/* 设 置 标签 导航 栏 焦点 列表 项 的 基本 样式 */ 

.tabs - bottom .ui— tabs — nav li.ui- tabs— active { font- weight: bold; margin - top: - lpx; padding 
— top: 1px; border :none ! important;background — color: cyan;} 

/* 设 置 标签 列表 项 超 链接 的 基本 样式 */ 

.tabs - bottom .ui -tabs - nav li a {display: block; outline: none; color: navy; } 

/* 设 置 图 像 的 基本 样式 * / 

img { float: left; border- radius: 10px; padding: 5px; width: 210px; height: 135px; 
box — shadow: 2px 2px 10px black; margin— right: 12px; margin - top: 17px; margin - bottom: 5px; margin— 
left: 2px; } 

</style></head> 
<body>< div id = "tabs" class = "tabs - bottom"> 

<ul class = "mybox"><1li><a href="#tabs- 1"> 乐 山大 佛 </a></1i> 

<1i><a href ="#tabs -2"> 中 央 公园 </a></1i></ul> 

<div id= "tabs- 1">< img src = "img/B118.jpg" style = "float:left;"><p> 乐 山大 佛 ,地 处 四 川 省 乐山 市 , 岷 
江 、 青 衣 江 和 大 渡河 三 江 汇 流 处 ,是 世界 上 最 大 的 石刻 大 佛 。 乐 山大 佛 头 与 山 齐 , 足 踏 大 江 , 双手 抚 膝 ,大 佛 体态 
匀称 , 神 势 肃穆 , 依 山 当 成 , 临 江 危 坐 。 大 佛 通 高 71 米 , 头 高 14.7 米 , 头 宽 10 米 ,发 医 1051 个 , 耳 长 6.7 米 , 鼻 和 
眉 长 5.6 米 ,嘴巴 和 眼 长 3.3 米 , 颈 高 3 米 , 肩 宽 24 米 ,手指 长 8.3 米 , 从 膝盖 到 脚背 28 米 ,脚背 宽 9 米 ,脚面 可 
围 坐 百 人 以 上 。</p></div> 

<div id = "tabs-2">< img src = "img/B179A. jpg" style= "float:left;"><p> 重 庆 中 央 公 园 是 西南 地 区 最 大 
的 开放 式 城市 中 心 公园 , 西 距 在 建 的 悦 来 重庆 国际 会 展 城 3 公里 , 东 距 江北 国际 机 场 5 公里 。 它 是 一 个 依托 重 
庆 山 水 风貌 特色 ,融会 中 西 文化 的 现代 城市 公园 ,将 成 为 重庆 新 地 标 。 开 网 后 ,将 与 年 底 投 用 的 国际 会 展 城 一 
起 ,成 为 两 江 新 区 重大 城市 功能 板块 。 这 是 国际 中 心 区 率先 启动 的 双核 ,这 里 也 将 成 为 重庆 新 中 心 最 大 的 休闲 
去 处 ,重庆 的 标志 性 公园 。</p></div></div></body ></html > 
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HTML5+CSS3 炫 酷 应 用 实例 集锦 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,$("#tabs"). tabs() 用 于 创建 一 个 
默认 风格 的 选项 卡 ,$(". ui-tabs-nav"). appendTo(". tabs-bottom") 用 于 将 默认 风格 的 选项 卡 的 导航 
标签 从 顶部 移动 到 底部 。 当 将 默认 风格 的 选项 卡 的 导航 标签 从 顶部 移动 到 底部 时 ,通常 需要 像 实例 
这 样 重新 设置 . tabs-bottom 、 ui-tabs-nav 等 类 的 CSS 样式 。 需 要 说 明 的 是 ,tabs() 方 法 是 选项 卡 部 件 
(Tabs Widget) 的 方法 ,因此 在 使 用 tabs() 方 法 时 必须 添加 jquery-ui. min. js 和 jquery-ui. min. css 两 
个 文件 

此 实例 的 源 文件 名 是 myHtmlA145. html。 


436 ”实现 鼠标 指针 悬浮 在 选项 卡 标签 上 时 切换 对 应 内 容 


此 实例 主要 在 jquery-ui. min.js 和 jquery-ui. min. css 的 tabs() 方 法 中 传递 {event: "mouseover"} 
参数 ,从 而 实现 鼠标 指针 悬浮 在 选项 卡 标签 上 时 切换 对 应 的 内 容 。 当 在 Google Chrome 浏览 器 中 显 
示 该 页 面 时 ,如 果 鼠 标 指针 悬浮 在 “乐山 大 佛 ” 标 签 上 . 则 将 显示 对 应 的 内 容 , 如 图 436-1 所 示 ; 如 果 鼠 
标 指针 悬浮 在 “中 央 公 园 " 标 签 上 ,也 将 显示 对 应 的 内 容 , 如 图 436-2 所 示 。 有 关 此 实例 的 主要 代码 
如 下 。 
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临 江 危 坐 。 大佛 通 高 71 米 ， 头 高 147 米 ， 头 宽 10 
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图 436-1 


<! doctype html >< html >< head >< meta charset = "UTF — 8"> 

< script src= "js/jquery - 3.1.1.min. js"></script> 

<script src= "js/jquery — ui.min. js"></script>< script type = "text/javascript"> 
$ (function() { // 鼠 标 指针 悬浮 在 选项 卡 标签 上 时 切换 对 应 的 内 容 

$("#tabs" ).tabs({ event: "mouseover" }); }); 

</script> 

<link rel = "stylesheet" href = "css/jquery — ui.min. css">< style type = "text/css"> 
.mybox { background - color: white; border: none; } 
#tabs { border: none; width: 400px; } 
#tabs—1, #tabs—2 { border: lpx solid gray; border - radius: 5px; } 
/* 设 置 图 像 的 基本 样式 */ 
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img {float: left; border- radius: 10px; padding: 5px; width: 210px;height: 135px; 

box- shadow: 2px 2px 10px black; margin - right: 12px; margin - top:17px; margin - bottom: 5px; margin— 
left:2px; } 

</style></head> 
<body><div id = "tabs"> 

<ul class = "mybox"><1i><a href ="#tabs- 1"> 乐 山大 佛 </a></1i> 

<1i><a href="#tabs- 2"> 中 央 公 园 </a></1i></ul> 

<div id= "tabs- 1">< img src= "img/B118.jpg" style= "float:left;"><p> 乐 山大 佛 , 地 处 四 川 省 乐山 市 , 岷 
江 、 青 衣 江 和 大 渡河 三 江 汇流 处 ,是 世 界 上 最 大 的 石刻 大 佛 。 乐 山大 佛 头 与 山 齐 , 足 踏 大 江 , 双手 抚 膝 , 大佛 体态 
匀称 , 神 势 击 称 , 依 山 间 成 , 临 江 危 坐 。 大 佛 通 高 71 米 , 头 高 14.7 米 , 头 宽 10 米 ,发 医 1051 个 , 耳 长 6.7 米 , 鼻 和 
眉 长 5.6 米 ,嘴巴 和 眼 长 3.3 米 , 颈 高 3 米 , 肩 宽 24 米 ,手指 长 8.3 米 ,从 膝盖 到 脚背 28 米 ,脚背 宽 9 米 , 脚面 可 
围 坐 百 人 以 上 。</p></div> 

<div id="tabs- 2">< img src= "img/B179A. jpg" style= "float:left;i"><p> 重 庆 中 央 公 园 是 西南 地 区 最 大 
的 开放 式 城市 中 心 公园 , 西 距 在 建 的 悦 来 重庆 国际 会 展 城 3 公里 , 东 距 江北 国际 机 场 5 公里 。 它 是 一 个 依托 重 
庆 山 水 风貌 特色 ,融会 中 西 文 化 的 现代 城市 公园 ,将 成 为 重庆 新 地 标 。 开 网 后 ,将 与 年 底 投 用 的 国际 会 展 城 一 
起 ,成 为 两 江 新 区 重大 城市 功能 板块 。 这 是 国际 中 心 区 率先 启动 的 双核 , 这 里 也 将 成 为 重庆 新 中 心 最 大 的 休闲 
去 处 ,重庆 的 标志 性 公园 。</p></div></div></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , $("# tabs"). tabs ({event: 
"mouseover")) 用 于 鼠标 指针 悬浮 在 选项 卡 标签 上 时 切换 对 应 的 内 容 , 如 果 此 方法 没有 {event: 
"mouseover") 参 数 , 直 接 调用 $("#tabs"). tabs(), 则 选项 卡 的 内 容 只 有 在 鼠标 单 击 标签 时 才 会 进行 
切换 。tabs() 方 法 主要 用 于 实现 单 击 选 项 卡 的 标签 页 切换 到 标签 页 对 应 的 内 容 ,该 方法 是 选项 卡 部 件 
(Tabs Widget) 的 方法 ,因此 在 使 用 tabs() 方 法 时 必须 添加 jquery- ui. min. js 和 jquery-ui. min. css 两 
个 文件 。 

此 实例 的 源 文 件 名 是 myHtmlAl143. html。 


437 ”以 拖 旧 方式 在 选项 卡 中 增加 、 移 除 选项 


此 实例 主要 使 用 jquery-ui. min. js 和 jquery-ui. min. css 中 的 sortable() 方 法 ,从 而 实现 以 拖 电 的 
方式 将 选项 卡 的 一 个 标签 列表 中 的 选项 移动 到 另 一 个 标签 列表 中 。 当 在 Google Chrome 浏览 器 中 显 
示 该 页 面 时 ,“ 数 学 基础 教材 "标签 中 的 列表 项 如 图 437-1 所 示 ,“ 计 算 机 专业 教材 "标签 中 的 列表 项 如 
图 437-2 所 示 。 使 用 鼠标 拖 动 “数学 基础 教材 "标签 列表 中 的 “ 常 微分 方程 "列表 项 到 “计算 机 专业 教 
材 ” 标 签 , 如 图 437-3 所 示 ; 然后 松 开 鼠标 , 则 “ 常 微分 方程 "列表 项 就 会 被 插入 “计算 机 专业 教材 "标签 
的 列表 中 ,如 图 437-4 所 示 。 改 变 之 后 的 “数学 基础 教材 "标签 中 的 列表 项 如 图 437-5 所 示 。 反 之 亦 
然 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 437-5 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<script src= "js/jquery - 3.1.1.min. js"></script> 
< script src= "js/jquery - ui.min. js"></script>< script type = "text/javascript"> 
$ (function() { 
// 拖 中 列 表 项 到 选项 卡 的 标签 ,从 而 实现 把 列表 项 从 一 个 标签 移 到 另 一 个 标签 
$("##sortablel, #sortable2" ). sortable().disableSelection(); 
var $ tabs=$ ( "#tabs" ).tabs(); 
var $ tab items=$ ( "ul:first li", $ tabs ).droppable({ 
accept: ".connectedSortable 1i", 
hoverClass: "ui— state— hover", 
drop: function( event, ui ) { 
var $ item=$ ( this ); 
var $1list=$( $item.find( "a" ).attr( "href" ) ) 
-find( ".connectedSortable” ); 
ui.draggable. hide( "slow", function() { 
$ tabs. tabs( "option", "active", $ tab items. index( $ item ) ); 
$ (this ).appendTo( $ list ).show( "slow" ); 
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D);} DD;D); 
</script> 
<link rel = "stylesheet" href = "css/jquery — ui.min.css"><style type = "text/css"> 

. mybox{background - color: white; border: none; } 

#tabs— 1,#tabs— 2{border: 1px solid gray;border - radius: 5px;} 

# tabs{ border:none; width: 400px;} 

/x 设置 列表 项 的 基本 样式 */ 

提 sortablel li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font - size: 1.2em; width: 180px; 
} 

/* 设 置 列表 项 超 链接 的 基本 样式 * / 

# sortablel li a，# sortable2 lia { - webkit - transition: 0.3s ease- out; background: lightgreen; 
color: black; padding: 7px 15px 7px 10px; border - radius: Spx; width: 150px; display: block; text — 
decoration: none; font - size: 14px; - webkit - box - shadow: 2px 2px 4px #888; } 

</style></head> 
<body><div id = "tabs" > 
<ul class = "mybox"><1i><a href ="#tabs 1"> 数 学 基础 教材 </a></1i> 
<1i><ahref="#tabs- 2"> 计 算 机 专业 教材 </a></1i></ul> 
<div id= "tabs-1l" ><ul id="sortablel" class= "connectedSortable ui - helper ~ reset "> 
<1i><a href ="javascript:void(0)"> 数 学 分 析 </a></1i> 
<1i><a href = "javascript:void(0)"> 常 微分 方程 </a></1i> 
<1i><a href = "javascript:void(0)"> 复 变 函 数 </a></li></ul></div> 
<div id= "tabs -2"><ul id= "sortable2" class= "connectedSortable ui - helper - reset"> 
<1i><a href ="javascript:void(0)"> 数 据 结构 </a></1i> 
<1i><ahref ="javascript:void(0)"> 数 据 库 系统 概论 </a></1i> 
<1i><a href ="javascript:void(0)"> 操 作 系统 设计 与 实现 </a></1i> 
<1i><a href ="javascript:void(0)"> 离 散 数 学 </a></1i></ul ></div></div> 
</body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,$ (function() ()) 内 部 的 代码 用 于 
实现 拖 中 一 个 标签 中 的 列表 项 到 选项 卡 的 男 一 个 标签 ,从 而 实现 把 一 个 标签 中 的 列表 项 移动 到 另 一 
个 标签 中 。sortable() 方 法 是 jQuery UI 的 可 排序 小 部 件 (Sortable Widget) 的 方法 ,在 任意 的 DOM 
元 素 上 启用 sortable 功能 ,通过 鼠标 单 击 并 拖 电 元 素 到 列表 中 的 一 个 新 的 位 置 ,其 他 条 目 就 会 自动 调 
整 。 在 默认 情况 下 ,sortable 的 各 个 条 目 共享 draggable 属性 。 注 意 ,在 使 用 sortable() 方 法 实现 拖 动 
排序 前 必须 添加 jdquery-ui，min. js 和 jquery-ui. min. css 两 个 文件 。 

此 实例 的 源 文件 名 是 myHtmlA135. html。 


438 ”使 用 方向 键 在 表格 的 输入 框 间 跳 转 


此 实例 主要 通过 添加 表格 的 keydown 事件 的 自 定义 方法 实现 使 用 键盘 上 的 上 、 下 、 左 、 右 方向 键 
在 表格 单元 格 内 置 的 多 个 输入 框 之 间 跳 转 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 即 可 使 用 键 
盘 上 的 上 、 下 ,左右 方向 键 在 表格 单元 格 内 置 的 多 个 输入 框 之 间 跳 转 ,如 果 使 用 左 方向 键 , 当 到 达 每 
行 的 左 端 时 自动 跳 转 到 上 一 行 右 端的 输入 框 ; 如 果 使 用 右 方向 键 , 当 到 达 每 行 的 右 端 时 自动 跳 转 到 下 
一 行 左 端的 输入 框 ,如 图 438-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 





<!doctype html ><html >< head ><meta charset = "UTF - 8"> 
< script src= "js/jquery - 3.1.1.min. js"></script >< script type = "text/javascript"> 
var myInputs = document. getElement sByTagName(" input"); 
function keyDown(event) { 
Var myFocus = document. act iveElement; 
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证 (!document. contains(myFocus) ) return; 
Var myEvent = window. event | | event; 
var myKey = myEvent. keyCode; 
for (var i= 0; i<myInputs. length; i++) { 
if (myInputs[ i] === myFocus) break; 
上 
switch (myKey) {// 处 理 上 、 下 、 左 、 右 方向 键 跳 转 
case 37:// 方 向 键 (=<): VK_LEFT (37) 
if (i>0) myInputs[i—1].focus(); break; 
case 38:// 方 向 键 ( 和): VK_UP (38) 
if (i—-3>=0) myInputs[i- 3].focus(); break; 
case 39:// 方 向 键 (一 ): VK_RIGHT (39) 
if (i<myInputs. length— 1) myInputs[i+1]. focus(); break; 
case 40:// 方 向 键 ( 4 ): VK_DOWN (40) 
if (i+3<myInputs. length) myInputs[i+ 3]. focus(); break; 
}} 
</script> 
<style type= "text/css"> 
* { font- size: 14px; text — align: center; } 
table, tr, td { border: 1px solid green; } 
td { width: 130px; } 
input { width: 70px; } 
</style></head> 
<body >< form>< table onkeydown = "keyDown(event)"> 
<tr><td> 数 据 列 1 </td><td> 数 据 列 2</td>< td> 数 据 列 3 </td></tr> 
<tr><td> 数 据 1- 1:< input type = "text" name= "myDatal - 1" autofocus = "on"/></td> 
<td> 数 据 1 - 2:< input type= "text" name = "myDatal - 2"/></td> 
<td> 数 据 1 - 3:< input type= "text" name = "myDatal - 3"/></td></tr> 
<tr><td> 数 据 2- 1:< input type = "text" name= "myData2 - 1"/></td> 
<td> 数 据 2 - 2:< input type= "text" name = "myData2 - 2" 人 ></td> 
<td> 数 据 2- 3:< input type = "text" name = "myData2 - 3" 人 /></td></tr> 
<tr><td> 数 据 3- 1:< input type = "text" name= "myData3 - 1"/></td> 
<td> 数 据 3 - 2:< input type= "text”name = "myData3 一 2"/></td> 
<td> 数 据 3 - 3:< input type= "text" name= "myData3 - 3"/></td></tr> 
<tr><td> 数 据 4- 1:< input type = "text" name= "myData4 - 1"/></td> 
<td> 数 据 4- 2:< input type= "text" name= "myData4 -2"/></td> 
<td> 数 据 4- 3:< input type= "text”name = "myData4 -3"/></td></tr> 
<tr><td> 数 据 5- 1:< input type = "text" name= "myData5 - 1"/></td> 
<td> 数 据 5 - 2:< input type= "text”name = "myData5 - 2"/></td> 
<td> 数 据 5 - 3:< input type= "text”name = "myData5 -3"/></td></tr> 
<tr><td> 数 据 6- 1:< input type = "text" name= "myData6 - 1"/></td> 
<td> 数 据 6- 2:< input type= "text”name = "myData6 -2"/></td> 
<td> 数 据 6- 3:< input type= "text”name = "myData6 -3"/></td></tr ></table> 
</form></body ></html > 





百 - 6 x 


DY myHemlA116 html x \ 
SS 3 CC 口 fle//DVmyWorwmyHtmlA116 三 
数据 列 1 数据 列 2 | 数据 5 汉 
岗 据 1-1: 罗 斌 周扬 1-2 宙 | 站 据 1-3: 
陨 据 2-1: 区 2 蕊 3 
周 据 3-1: 内 所 3-2; | 关 据 4-3: 
涩 所 41: 周 据 4-2: | 有 鞭 据 4-3: 
鞭 所 5-1: 把 5-2: | 所 5-3: 

















































































































购 据 6-1: 6-2: 数据 6-3: 

















图 438-1 





第 5 部 分 >》 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,document. activeElement 属性 返回 
文档 中 当前 获得 焦点 的 元 素 , 如 果 需 要 为 元 素 设置 焦点 ,可 以 使 用 element. focus() 方 法 ,也 可 以 使 用 
document. hasFocus() 方 法 来 查看 当前 元 素 是 否 获取 焦点 ; var myKey 一 myEvent. keyCode 用 于 获取 


当前 按键 的 键 值 ,并 据 此 在 switch(myKey) 中 确定 上 、 下 ,左右 方向 键 应 该 执行 的 动作 。 
此 实例 的 源 文件 名 是 myHtmlA116. html。 


439 使 用 固定 算法 等 距 分 配 表格 的 列 宽 





此 实例 主要 设置 表格 的 table-layout 属性 为 fixed, 从 而 实现 等 距 分 配 表格 的 列 宽 。 当 在 Google 
Chrome 浏览 器 中 显示 该 页 面 时 , 单 击 " 等 距 分 配 列 宽 ” 按 钮 , 则 表格 等 距 分 配 列 宽 的 效果 如 图 439-1 


所 示 ; 单 击 “ 自 动 调整 列 宽 ” 按 钮 , 则 表格 自动 调整 列 宽 的 效果 如 图 439-2 所 示 。 有 关 此 实例 的 主要 代 


码 如 下 。 
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等 距 分 杷 列 克 | | 自动 调整 列 克 [ 等 中 分 本 列 克 ] | 自动 调整 列 更 

图 书 名 称 出 版 社 图 书 名 称 出 版 社 
HmIL5 从 入 门 型 | 精通 清华 大 学 出 版 社 Hm 5 从 入 站 加 精通 清华 大 学 出 版 社 
TL5+C553 从 入 门 一 精通 清华 大 手 出 版 社 HmIL5+CSS3 从 入 门 到 精通 清华 大 学 出 版 社 
TL5 经 典 立 例 中 国电 力 出 版 社 HmCL5 经 典 广 例 中 国电 力 出 版 社 
HTML5 入 门 经 典 机 械 工业 出 版 社 HL5 入 门 经 典 机 械 工 业 出 版 社 
深入 浅 出 ma_5 编 程 东南 大 学 出 版 社 深入 浅 出 Hng 5 编程 东南 大 学 出 版 社 

图 439-1 图 439-2 








<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<script src= "js/jquery - 3.1.1.min. js"></script >< script type = "text/javascript"> 


$ (function() { 


var myData=[{"HTML5 从 入 门 到 精通 ":" 清 华 大 学 出 版 社 "}， 
{"HTML5 + CSS3 从 入 门 到 精通 ":“" 清 华 大 学 出 版 社 "},， 
{"HTML5 经 典 实例 ":“ 中 国电 力 出 版 社 "}， 
{"BTML5 人 门 经 典 ": “机 械 工业 出 版 社 "}， 
{" 深 入 浅 出 HTML5 编程 ":" 东 南大 学 出 版 社 "}]; 


for (var i in myData) { 


for (var key in myData[i]) { 
$("table").append("<tr><td>"+key+ "</td><td>"+myData[i][key] + "</td></tr>"); 


J 


$ ("button# fixed").click(function() { 
$ ("table").css("table — layout", "fixed"); 


DD); 


$ ("button# normal").click(function() { 
$ ("table").css("table - layout", "auto"); 


D7}); 
</script> 


<style type= "text/css"> 


// 等 距 分 配 列 宽 


// 自 动 调整 列 宽 





table, table tr td { border: 1px solid darkgreen; border — collapse: collapse; text - align: center; font 


— size: 14px; 


button{ width:190px; margin: 5px;} 


padding: 3px; table— layout:auto; } 
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</style></head> 
<body>< div align = "center"> 

<button id= "fixed"> 等 距 分 配 列 宽 </button> 

<button id= "normal"> 自 动 调整 列 宽 </button > 

<table width = "400px"><tr><td> 图 书 名 称 </td><td> 出 版 社 /td></tr></table></div> 
</body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,table-layout:auto 表示 元 素 (table) 采 
用 默认 的 自动 算法 计算 表格 每 列 的 列 宽 。 在 CSS3 中 ,table-layout 属性 用 于 设置 或 检索 表格 的 布局 
算法 ,该 属性 包含 两 个 属性 值 一 一 fixed 和 auto。auto 表示 使 用 默认 的 自动 算法 ,布局 将 基于 各 单元 
格 的 内 容 , 换 而 言 之 ,可 能 给 某 个 单元 格 定义 宽度 为 100px, 但 结果 可 能 并 不 是 100px, 并 且 需 要 表格 
在 每 一 单元 格 读 取 计算 之 后 才 会 显示 出 来 ,速度 很 慢 ; fixed 表示 使 用 固定 布局 的 算法 。 在 该 算法 中 
水 平 布局 仅仅 基于 表格 的 宽度 、 表 格 边 框 的 宽度 、 单 元 格 间距 、 列 的 宽度 ,而 和 表格 内 容 无 关 , 也 就 是 
说 内 容 可 能 被 裁 切 。 

此 实例 的 源 文件 名 是 myHtmlB361. html。 


440 使 用 省 略 号 代替 固定 表格 列 宽 的 长 字符 


此 实例 主要 通过 设置 表格 单元 格 的 width ,table-layout .textroverflow overflow 等 属性 实现 使 用 
省 略 号 代替 固定 表格 列 宽 的 超 长 字符 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 将 自动 根据 单元 
格 的 字符 串 长 度 确 定 表格 的 列 宽 , 单 击 “ 省 略 号 代替 超 长 字符 "按钮 , 则 表格 的 第 2 行 和 第 4 行 由 于 书 
名 的 长 度 超出 设置 的 列 宽 , 将 在 末尾 以 省 略 号 代替 超 长 的 部 分 ,如 图 440-1 所 示 ; 单 击 “自动 调整 列 
宽 " 按 钮 , 则 表格 自动 调整 列 宽 ,效果 如 图 440-2 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 书 名 称 出 版 社 图 书 名 称 出 版 社 
HTML5 从 入 站 加 精通 清华 大 学 出 版 社 ETL.5 从 入 门 到 精通 清华 大 学 出 版 社 
HDL54+CSS3 从 入 门 型 |… 清华 大 学 出 颇 社 HDL5+CSS3 从 入 门 到 精通 清华 大 学 出 版 社 
HDL5 经 典 文 例 中 国电 力 出 版 社 HmEL5 经 典 交 例 中 国电 力 出 版 社 
现代 企业 可 扩展 的 web*… 机 械 工业 出 版 社 现代 企业 可 扩展 的 web 架构、 流程 和 组 织 | 机 械 工 业 出 版 社 
深入 浅 册 Fma_5 编 程 东南 大 学 出 版 社 深入 活 册 Fa 5 编程 东南 大 学 出 版 社 



































图 440-1 图 440-2 


<!doctype html >< html >< head>< meta charset = "UTF — 8"> 
< script src= "js/jquery - 3.1.1.min. js"></script >< script type = "text/javascript"> 
$ (function() {// 加 载 表 格 数据 
var myData= [{"HTML5 从 和 人 门 到 精通 " : "清华 大 学 出 版 社 "}， 
{"HTML5 + CSS3 从 入 门 到 精通 ": "清华 大 学 出 版 社 "}， 
{"HTML5 经 典 实例 ": “中 国电 力 出 版 社 "}， 
{" 现 代 企业 可 扩展 的 Web 架构 流程 和 组 织 ": “机械 工 业 出 版 社 "}, 
{ "深入 浅 出 HTML5 编程 ":" 东 南大 学 出 版 社 "}]; 
for (var i in myData) { 
for (var key in myData[i]) { 
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$ ("table").append("<tr><td>"+key+ "</td><td>" +myData[i][key] + "</td></tr>"); }} 
$ ("myBtnEllipsis").click(function() {  // 省 略 号 代 蔡 超 长 字符 
$ ("table, table tr td").each(function() { 
$ (this)[0].className = "myEllipsis"; });}); 
$ ("#myBtnNormal"). click(function() { // 自 动 调整 列 宽 
$ ("table, table tr td"). each(function() { 
$ (this)[0]. className = "myAutomatic"; });});}); 

</script> 
<style type= "text/css"> 

/* 设 置 表格 的 基本 样式 */ 

table, table tr td { border: 1px solid darkgreen; border - collapse: collapse; 

text — align: center; font- size: 14px; padding: 3px; table— layout: auto; white— 
space: nowrap; } 

.myAutomatic { table- layout: auto;} /x 自动 设置 列 宽 * / 

/* 设 置 列 宽 并 用 省 略 号 代替 超 长 字符 * / 

.myEllipsis { width: 150px; table— layout: fixed; 

text - overflow: ellipsis; overflow: hidden; } 

button { width: 145px; margin: 5px;} /* 设置 按钮 的 基本 样式 * / 

</style></head> 
<body>< div align = "center"> 

<button id = "myBtnEllipsis"> 省 略 号 代替 超 长 字符 </button> 
<button id = "myBtnNormal"> 自 动 调整 列 宽 </button> 
<table ><tr><td> 图 书 名 称 </td><td> 出 版 社 </td></tr></table></div></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,实现 使 用 省 略 号 代替 固定 表格 列 宽 
的 超 长 字符 主要 使 用 了 width、table-layout、text-overflow、overflow 几 个 属性 ,width:150px 表示 表格 
每 列 的 宽度 是 150px; table-layout: fixed 表示 列 宽 由 表格 宽度 和 列 宽度 设 定 ; text-overflow: ellipsis 
表示 显示 省 略 号 来 代表 被 修剪 的 文本 ; overflow: hidden 表示 单元 格 中 的 超 长 内 容 会 被 修剪, 并 且 其 
余 内 容 是 不 可 见 的 。 

此 实例 的 源 文件 名 是 myHtmlB376. html。 


441 在 表格 的 标题 及 单元 格 上 添加 阴影 效果 


此 实例 主要 在 CSS 样式 中 设置 table、td、th 元 素 的 box-shadow 属性 值 ,从 而 实现 在 表格 的 标题 
及 单元 格 上 添加 阴影 效果 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,在 表格 的 标题 及 单元 格 上 
添加 的 阴影 效果 如 图 441-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 








DD) myHerml8054 html x 
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mwasn | srom | mra| amen | 
罗 博 克 葡 写 酒 | size| ms | ws | 





和 汉文 红 六 | 2015. | 法 国 | 丹 强 | 
马鞍 尔 葡 敬酒 | 2014. 6.9 | 重大 利 | B 布 8 斯 | 


图 441-1 
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<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
< style type= "text/css"> 
table{ border - spacing:10px;box- shadow:0px 0px 8px 7px gray; 
background ~ color: lightcyan; margin: 20px;} 
td, th{ background - color: 1ightcyan;box- shadow:5px 5px 6px gray;padding:10px;} 
</style></head> 
<body><table> 
<thead >< tr>< th> 葡 萄 酒 名 称 </th><th> 生 产 日 期 </th> 
<th> 原 产地 </th>< th> 葡 菊 品 种 </th></tr ></thead> 
<tr><td> 罗 博克 葡萄 酒 </td><td> 2015.12.6</td> 
<td> 西 班 牙 </td >< td> 歌 海 娜 </td></tr> 
<tr><td> 科 洛 文 红 葡 葡 酒 </td><td> 2015.10.5</td> 
<td> 法 国 </td><td> 丹 魄 </td></tr> 
<tr><td> 马 蒂 尔 葡萄 酒 </td><td>2014.6.9 </td> 
<td> 意 大 利 </td><td> 朗 布 罗 斯 科 </td></tr></table></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,box-shadow:0px 0px 8px 7px gray 
用 于 设置 表格 的 阴影 样式 ,两 个 0px 分 别 代表 阴影 的 水 平 偏 移 量 和 垂直 偏 移 量 ,8px 表示 阴影 的 模糊 
半径 ,7px 表示 阴影 的 扩散 半径 ,gray 表示 阴影 的 颜色 ;: box-shadow:5px 5px 6px gray 用 于 设置 表格 
标题 栏 th 和 单元 格 td 的 阴影 样式 ,两 个 5px 分 别 代表 阴影 的 水 平 偏 移 量 和 垂直 偏 移 量 ,6px 表示 阴 
影 的 模糊 半径 ,gray 表示 阴影 的 颜色 。 

此 实例 的 源 文件 名 是 myHtmlB054. html。 


442 使 用 JSON 传递 的 天 气 数据 自动 填充 表格 


此 实例 主要 实现 使 用 jQuery 的 ajax() 方 法 查询 远程 数据 ,并 通过 远程 传递 的 JSON 格式 的 天 气 
数据 自动 填充 表格 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 , 单 击 "获取 用 户 IP 值 并 根据 IP 查 














询 当 地 天 气 信息 "按钮, 则 将 自动 从 远程 服务 器 查询 到 当地 的 天 气 信息 ,并 显示 在 表格 中 ,如 图 442-1 
所 示 ; 单 击 “清除 数据 "按钮 , 则 将 清除 表格 中 的 所 有 数据 。 有 关 此 实例 的 主要 代码 如 下 。 
百 - Le| x 
[DY myHemlAT75 html x 
3 © Dfile///D/myWork/myHtmIA175.html 安县 
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图 442-1 


<!doctype html ><html >< head ><meta charset = "UTF — 8"> 
<script src= "js/jquery - 3.1.1.min. js"></script>< script type= "text/javascript"> 
$ (function() { 
$ ("myBtnGetdata").click(function() { // 获 取 用 户 IP 值 并 根据 IP 查询 当地 天 气 信息 





第 5 部 分 天 人》 
$ ("table"). html(""); 


var url = 'http://chaxun. 1616. net/s. php?type = ip&output = jsongcallback = ?& ="'+Math. random(); 
$ .getJSON(url, function (data) { var myCity= data. Isp; 
$ ("pmyLocation").text(" 您 所 在 的 位 置 : " + myCity. substr(0, 3)); 
$ .ajax({ 
url: "http://api. map. baidu. com/telematics/v3/weather", 
type: "get", 
data: {location: myCity. substr(0, 3),output: 'json', 
ak: "6tYzTvGZSOpYB50c2YGGOKt8' }, 
dataType: "jsonp", 
success: function (data) { // 获 取 天 气 数 据 
var myData = data. results[0]. weather data; 
for (var i=0; i<myData. length; i++) { 
$ ("table").append("<tr></tr>"); 
} 
$ ("table tr").each(function (index) { 
$ (this).append( "< td >" + myData[ index]. date + "</td >< td>< img src = " + myData[ index]. 
dayPictureUrl + "/></td>< td >< img src =" + myData[ index]. nightPictureUrl + "/></td><td>"+ myData 
[index]. temperature+ "</td > < td >" + myData[ index]. weather + "</td> < td >" + myData[ index]. wind + 
Sed) 
D7} DD) D7); 
$ ("#myBtnClear"). click(function( ){ // 清 除数 据 
$ ("table"). html(""); 
1) ;1); 
</script> 
< style type= "text/css"> 
#myBtnGetdata { width: 350px; 上 
#myBtnClear { width: 130px;} 
</style></head> 
<body>< div align = "center"> 
<button id= "myBtnGetdata"> 获 取 用 户 IP 值 并 根据 IP 查询 当地 天 气 信息 </button> 
<button id = "myBtnClear"> 清 除数 据 </button> 
<p id= "myLocation"></p> <table></table></div ></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,ajax() 方 法 用 于 通过 HTTP 请 求 加 
载 远程 数据 ,该 方法 是 jQuery 底层 AJAX 实现 ,简单 易 用 的 高 层 实现 有 $. get()、$. post() 等 方法 。 
$. ajax() 方 法 返回 其 创建 的 XMLHttpRequest 对 象 。 在 大 多 数 情况 下 无 须 直 接 操 作 该 函数 ,除非 需 
要 操作 不 常用 的 选项 ,以 获得 更 多 的 灵活 性 。 在 最 简单 的 情况 下 , $ .ajax() 可 以 不 带 任何 参数 直接 使 
用 。 下 面 是 此 实例 已 经 使 用 的 ajax( ) 方 法 的 参数 的 相关 说 明 。 

(1) url: 表示 发 送 请 求 的 地 址 。 

(2) type: 表示 请 求 方式 ,例如 post 或 get ,默认 为 get。 

(3) data: 要 求 为 Object 或 String 类 型 的 参数 .发送 到 服务 器 的 数据 。 如 果 已 经 不 是 字符 串 , 将 
自动 转换 为 字符 串 格式 。 在 get 请 求 中 将 附加 在 url 后 。 为 防止 这 种 自动 转换 ,可 以 查看 processData 
选项 。 对 象 必须 为 key/value 格式 ,例如 {fool:"barl".foo2:"bar2"} 转 换 为 &fool 二 barl&fo02 王 
bar2。 如 果 是 数组 ,jQuery 将 自动 为 不 同 值 对 应 同一 个 名 称 , 例 如 {foo:["barl","bar2"]) 转换 为 
&.fo0= barl &fo00= bar2。 

(4) dataType: 要 求 为 String 类 型 的 参数 ,预期 服务 器 返回 的 数据 类 型 。 如 果 不 指定 ,jQuery 将 
自动 根据 http 包 mime 信息 返回 responseXML 或 responseText ,并 作为 回调 函数 参数 传递 。 其 可 用 
的 类 型 如 下 。 
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@ xml: 返回 XML 文档 ,可 用 jQuery 处 理 。 
@ html: 返回 纯 文本 HTML 信息 ,包含 的 script 标签 会 在 插入 DOM 时 执行 。 


@ script: 返回 纯 文 本 JavaScript 代码 ,不 会 自动 缓存 结果 ,除非 设置 了 cache 参数 。 注 意 在 远程 
请 求 时 (不 在 同一 个 域 下 ) 所 有 post 请 求 都 将 转 为 get 请 求 。 
田 json: 返回 JSON 数据 。 


@ jsonp: JSONP 格式 ,在 使 用 JSONP 形式 调用 函数 时 ,例如 myurl? callback 一 ? ,jQuery 将 自 
动 蔡 换 后 一 个 “?” 为 正确 的 函数 名 ,以 执行 回调 函数 。 
@ text: 返回 纯 文本 字符 串 。 





(5) success: 要 求 为 Function 类 型 的 参数 ,请求 成 功 后 调用 的 回调 函数 ,有 两 个 参数 ,一 是 由 服 
务 器 返回 ,并 根据 dataType 参数 进行 处 理 后 的 数据 ; 二 是 描述 状态 的 字符 串 。 

此 实例 的 源 文件 名 是 myHtmlA175. html。 

443 ”以 模 态 方式 显示 对 话 框 并 获取 其 返回 值 


此 实例 3 





要 实现 使 用 < dialog > 标签 创建 对 话 框 ,并 通过 dialog 元 素 的 showModal() 方 法 以 模 态 
方式 显示 此 对 话 框 。 当 在 浏览 器 中 显示 该 页 面 时 . 单 击 “ 显 示 对 话 框 "按钮 , 则 将 以 模 态 方式 显示 弹出 


的 对 话 框 ,如 图 443-1 所 示 ; 在 模 态 对 话 框 中 单 击 “ 是 ”按钮 , 则 将 在 消息 框 中 显示 单 击 按钮 的 返回 值 ， 
如 图 443-2 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 





国 localhost63342/myWor x 站 


0 x 
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3 CD localhost63342/myWork/myHtm 安 三 





于 地 对 ”localhost:63342 上 的 网 页 显示 : 


所 3 © DIlocalhost63342/myWork/myHtm 安 


现在 确认 诅 出 HTIL5 对 话 框 吗 ? 
[mw | 


MT ES 了 : 旦 


村 止 此 页 再 旦 示 对 笑 程 - 





图 443-1 图 443-2 


<!doctype html >< html >< head >< meta charset = UTF -8> 
< script src= "js/jquery -3.1.1.min. js"></script>< script language = "javascript"> 
$ (document). ready(function() { 
$ ("#myBtn").click(function() { 


// 显 示 对 话 框 
$ ("#myDlg"). get(0). showModal();}); 
myClose = function() { // 响 应 关闭 对 话 框 
alert(" 您 刚才 选择 了 : "+$ ("#myD1g").get(0). returnValue); } }); 
</script > 
< style > 


dialog {background: 井 FOF0F0; border: lpx solid gray; border - radius: 5px;box— shadow: 0 1px 10px gray;} 
dialog: :backdrop {background: rgba(173, 216, 230, 0.7);} 
button{ width:120px;} 
</style></head> 
<body><button id = "myBtn"> 显 示 对 话 框 </button > 
<dialog id= "myD1g”onclose= "myClose()"> 


<form method = "dialog"><p> 现 在 确认 退出 HTML5 对 话 框 吗 ?</p> 
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<p align = "center">< button type = "submit” value = "是 "> 是 </button > 


<button type = "submit" value = " 否 "> 否 </button></p></form></dialog></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,< dialog > 标签 是 HTML5 中 的 新 标 
签 , 该 标签 对 应 dialog 元 素 。 在 使 用 < dialog > 标签 创建 对 话 框 时 通常 需要 操作 dialog 元 素 的 下 列 属 
性 方法 及 事件 。 

dialog 元 素 的 open 属性 用 于 设置 其 可 见 性 , 当 其 值 为 true 时 dialog 元 素 可 见 ,为 false 时 不 可 
见 。dialog 元 素 的 returnValue 属性 表示 对 话 框 被 关闭 时 的 返回 值 , 当 dialog 元 素 的 close() 方 法 被 调 
用 并 传人 参数 时 ,returnValue 属性 值 将 被 设置 为 close() 方 法 的 参数 值 。 

dialog 元 素 的 show() 方 法 用 于 显示 对 话 框 ,此 时 页 面 上 的 其 他 元 素 仍 可 交互 。dialog 元 素 的 
showModal() 方 法 则 能 够 以 模 态 方式 显示 对 话 框 :此 时 页 面 上 的 其 他 元 素 不 可 交互 ,与 show() 方 法 
不 同 的 是 ,如 果 dialog 元 素 的 open 属性 值 为 true, 调 用 此 方法 将 报错 。dialog 元 素 的 close( ) 方 法 用 
于 关闭 (隐藏 ) 对 话 框 ,该 方法 接受 一 个 可 选 参数 ,如果 传人 参数 , 则 dialog 元 素 的 returnValue 属性 将 
会 被 设置 为 参数 值 , 如 果 dialog 元 素 的 open 属性 值 为 false 或 未 设置 ,调用 此 方法 将 报错 。 

dialog 元 素 的 close 事件 在 关闭 dialog 元 素 时 触发 。dialog 元 素 的 cancel 事件 在 按键 盘 的 Esc 键 
关闭 模 态 对 话 框 时 触发 。 

此 实例 的 源 文件 名 是 myHtmlA005. html。 


444 ”创建 包含 “确认 ”和 “取消 "按钮 的 模式 对 话 框 


此 实例 主要 在 jquery-ui. min. js 和 jquery-ui. min. css 的 dialog() 方 法 中 设置 modal 参数 为 true， 
从 而 创建 包含 “确认 ”和 "取消 "按钮 的 模式 对 话 框 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 , 单 
击 “ 显 示 模式 对 话 框 ”按钮 , 则 将 显示 模式 对 话 框 ,此 时 页 面 的 其 他 部 分 变 为 灰色 ,不 可 操作 ,如 图 444-1 
所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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全 这 些 项 目 将 被 永久 删除 ， 并 且 无 法 恢复 。 
您 确定 吗 ? 





图 444-1 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<script src= "js/jquery- 3.1.1.min. js"></script> 
< script src= "js/jquery - ui.min. js"></script>< script type = "text/javascript"> 
$ (function() { 
$("#myBtnDlg"). click( function( ){ // 显 示 模式 对 话 框 
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$ ("#myDlg"). dialog ({resizable: false, height:220, width:350, modal: true, buttons: { "确认 ": 
function() { $( this ).dialog( "close”); }, "取消 ": function() { $ (this ).dialog( "close" ); } 
} 7);});}); 


</script> 

<link rel = "stylesheet" href = "css/jquery — ui.min.css">< style type = "text/css"> 
#myBtnDlg { width: 355px; } /* 设 置 显示 自 定义 可 拖 中 对话 框 按钮 的 基本 样式 * / 
#myDlg { display: none;} /x* 初始 时 隐藏 模式 对 话 框 * / 

</style></head> 


<body>< div align = "center"><button id= "myBtnD1g"> 显 示 模 式 对 话 框 </button></div> 
<div id= "myDlg" title= "模式 确认 对 话 框 "> 

<p><span class = "ui- icon ui- icon-alert" style= "float:left; margin:0 7px 20px 0;"></span> 这 些 项 
目 将 被 永久 删除 ,并 且 无 法 恢复 。 您 确定 吗 ?</p></div></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , $ ("#myDlg"). dialog ({resizable: 
false,height:220,width:350 ,modal:true,buttons: { "确认 ": function () { $ (this). dialog("close")，} ， 
"取消 ": function() {$$ (this). dialog("close");)))) 用 于 设置 模式 对 话 框 的 属性 值 ,例如 禁止 用 户 拖 
动 边框 线 改 变 尺寸 宽度 和 高 度 ,以 及 在 对 话 框 中 添加 按钮 等 ,其 中 最 重要 的 是 设置 modal:true, 这 是 
区 分 模式 对 话 框 和 非 模 式 对 话 框 的 参数 。 

模式 (modal) 对 话 框 即 模 态 对 话 框 ,是 指 用 户 在 页 面 中 想 要 对 对 话 框 以 外 的 内 容 进 行 操作 时 必须 
首先 对 该 对 话 框 进行 响应 ,例如 单 击 “ 确 定 " 或 “取消 "按钮 等 将 该 对 话 框 关闭 ,与 之 相对 应 的 就 是 非 模 
式 对 话 框 。 需 要 说 明 的 是 ,dialog() 方 法 是 对 话 框 部 件 (Dialog Widget) 的 方法 ,因此 在 使 用 dialog() 
方法 时 必须 添加 jquery-ui. min. js 和 jquery-ui，min. css 两 个 文件 。 此 外 ,由 于 对 话 框 的 图 标 源 自 默 
认 图 标 文件 ui-icons_ 777777_256x240. png 和 ui-icons_444444_256x240. png(images 文件 夹 下 ), 因 
此 需要 添加 这 些 文件 才能 正确 显示 ,和 否则 在 图 标 位 置 会 显示 空白 。 

此 实例 的 源 文件 名 是 myHtmlA166. html。 


445 ”创建 可 自 定义 标题 栏 的 “关闭 ”按钮 的 对 话 框 


此 实例 主要 通过 使 用 jquery-ui. min. js 和 jquery-ui. min. css 的 dialog() 方 法 创建 带 “ 关 闭 ” 按 钮 
的 可 自由 拖 忠 的 对 话 框 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 , 单 击 “ 显 示 自 定义 可 拖 跑 对 话 
框 "按钮 , 则 将 显示 自 定义 可 拖 忠 对 话 框 ,此 时 即 可 拖 动 自 定义 对 话 框 的 灰色 标题 栏 任 意 移动 ,也 可 以 
单 击 右上 角 的 “关闭 "按钮 或 下 面 的 “关闭 自 定义 可 拖 忠 对 话 框 "按钮 关闭 该 对 话 框 ,如 图 445-1 所 示 。 
有 关 此 实例 的 主要 代码 如 下 。 
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<!doctype html >< html >< head >< meta charset = "UTF — 8"> 
<script src= "js/jquery - 3.1.1.min. js"></script> 
<script src= "js/jquery - ui. min. js"></script>< script type = "text/javascript"> 
$ (function() { 


$ ("#myBtnDlg"). click(function() { // 显 示 自 定义 可 拖 中 对话 框 
$("#myDlg"). dialog(); }); 
$ ("#myBtnClose"). click(function() { // 关 闭 自 定义 可 拖 忠 对话 框 
$ ("#myDlg"). dialog("close"); });}); 

</script> 


<link rel = "stylesheet" href = "css/jquery— ui.min. css"> 
<style type= "text/css"> 
* { —webkit — user— select: none; } 
.ui- dialog{ width:350px ! important; } /x* 设置 自 定 义 可 拖 电 对 话 框 的 基本 样式 * / 
/x* 设 置 自 定义 可 拖 揣 对话 框 标题 栏 的 基本 样式 */ 
.ui- dialog- title { text ~ align: center; color: navy; } 


#myBtnDlg{ width:355px; } /* 设 置 "显示 自 定义 可 拖 忠 对话 框 "按钮 的 基本 样式 */ 
#myBtnClose{ width:250px; } /* 设置 "关闭 自 定义 可 拖 鬼 对 话 框 "按钮 的 基本 样式 */ 
#myDlg{ display: none; } /* 初始 时 隐藏 可 拖 电 对 话 框 * / 

</style></head> 


<body>< div align = "center"> 

<button id= "myBtnD1g"> 显 示 自 定义 可 拖 电 对 话 框 </button ></div> 
<div id= "myDlg" title= " 自 定义 可 拖 电 对 话 框 "> 

<p> jQuery UI 是 以 jQuery 为 基础 的 开源 JavaScript 网 页 用 户 界面 代码 库 。 包 含 底层 用 户 交互 .动画 ,特效 和 
可 更 换 主题 的 可 视 控 件 。 我 们 可 以 直接 用 它 来 构建 具有 很 好 交互 性 的 web 应 用 程序 。 所 有 插件 测试 能 兼容 IE 
6.0+、 Firefox 3+ 、Safari 3.1+ 、 Opera 9.6+ 和 Google Chrome。</p> 

<div align= "center">< button id= "myBtnClose"> 关 闭 自 定义 可 拖 电 对 话 框 </button > </div></div></body> 
</html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,dialog() 方 法 用 于 显示 默认 的 对 话 


框 ,此 对 话 框 由 一 个 标题 栏 和 一 个 内 容 区 域 组 成 ,并 且 可 以 移动 ,调整 尺寸 ,默认 可 通过 右上 角 的 “ 关 
闭 ” 按 钮 关闭 。dialog("close") 用 于 关闭 默认 的 对 话 框 。 需 要 说 明 的 是 , dialog() 方 法 是 对 话 框 部 件 
(Dialog Widget) 的 方法 ,因此 在 使 用 dialog() 方 法 时 必须 添加 jquery-ui. min. js 和 jquery-ui. min. css 
两 个 文件 。 此 外 ,由 于 对 话 框 的 图 标 源 自 默 认 图 标 文件 ui-icons_777777_256x240. png(images 文件 夹 
下 ) ,因此 需要 添加 此 文件 才能 显示 ,否则 在 图 标 位 置 会 显示 空白 。 


此 实例 的 源 文 件 名 是 myHtmlA165. html。 


446 ”为 超 链接 创建 自 定义 风格 的 工具 提示 框 


此 实例 主要 通过 使 用 jquery-ui. min. js 和 jquery-ui. min. css 的 tooltip() 方 法 实现 为 超 链接 创建 


自 定义 风格 的 工具 提示 框 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,如 果 将 鼠标 指针 悬浮 在 “ 量 
子 力 学 ” 超 链接 上 , 则 显示 的 自 定义 工具 提示 框 效果 如 图 446-1 所 示 ; 如 果 将 鼠标 指针 悬浮 在 “ 测 不 准 
原理 ” 超 链 接 上 , 则 显示 的 自 定义 工具 提示 框 效果 如 图 446-2 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 


<!doctype html >< html >< head >< meta charset = "UTF — 8"> 
<script src= "js/jquery —3.1.1.min.js"></script> 
<script src= "js/jquery — ui.min. js"></script >< script type = "text/javascript"> 


$ (function() { // 创 建 自 定义 风格 的 提示 框 
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$ (document). tooltip({ 
position: { my: "center bottom— 20"， at: "center top", 
using: function (position, feedback) { 
$ (this). css(position); $ ("<div>").addClass("arrow"). addClass(feedback. vertical). addClass 
(feedback. horizontal).appendTo(this); 
PH 
</script > 
<link rel = "stylesheet" href = "css/jquery — ui.min.css">< style type = "text/css"> 
/* 设置 提示 框 和 箭头 的 背景 及 边框 线 * / 
.ui- tooltip, .arrow:after { background: black; border: 2px solid white;} 
/* 设 置 提示 框 的 基本 样式 */ 
.ui- tooltip {padding: 10px 20px; color: white; border - radius: 20px; 
font: bold 14px "Helvetica Neue"，Sans - Serif; 
text — transform: uppercase; box - shadow: 0 0 7px black; } 
/* 设 置 箭头 的 基本 样式 * / 
.arrow { width: 70px; height: 16px; overflow: hidden; position: absolute; 
left: 50%; margin - left: -35px; bottom: - 16px; } 


.arrow. top { top: - 16px; bottom: auto; } /* 设置 箭头 顶端 的 基本 样式 * / 
.arrow. left {left: 20% ; } /* 设置 箭头 左 端的 基本 样式 * / 
/* 将 正方 形 旋转 45 "使 之 成 为 箭头 * / 


.arrow:after { content: ""; position: absolute; left: 20px; top: — 20px; width: 25px; height: 25px; 
box - shadow: 6px 5px 9px - 9px black; —webkit — transform: rotate(45deg); } 
.arrow. top:after { bottom: -20px; top: auto;} /* 调整 箭头 顶端 的 样式 * / 
/* 设 置 盒子 的 基本 样式 * / 
. myBox{ display: inline - block; width: 450px; padding: 15px; margin: 10px; background - color: 
# FFF; border: 1px solid # EEE; box — shadow: 5px 5px 5px lpx #999, 0 0 40px rgba(0, 0, 0, 
0. 06) inset; position: relative; border — radius: 5px; } 
body { background - color: lightgray; } 
</style></head> 
<body ><div class = "myBox"><p> 有 关 现 实 存在 的 真正 意义 ,长 期 以 来 是 一 个 热烈 讨论 的 问题 。 直 到 <a href 
= "http://baike. so. com/doc/2737738 - 2889635.html" title= "量子 力学 是 研究 微观 粒子 的 运动 规律 的 物理 
学 分 支 学科 , 它 提供 粒子 " 似 - 粒 "、" 似 - 波 "双重 性 ( 即 " 波 粒 二 象 性 ") 及 能 量 与 物质 相互 作用 的 数学 描述 。"> 量 
子 力学 </a>, 以 及 海 森 堡 的 <a href = "http://baike. so. com/doc/6631264 - 7603760. html" title = "粒子 的 位 
置 与 动量 不 可 同时 被 确定 "> 测 不 准 原理 </a> 的 出 现 ,争议 才 在 于 是 否 我 们 所 观察 到 的 事物 存在 于 我 们 的 心智 之 
外 ,或 是 如 同 理想 主义 者 所 认为 的 是 我 们 心智 感知 之 物 。 根 据 这 个 宇宙 的 概念 ,近来 的 实验 皆 显 示 出 ,现实 境况 
除非 是 在 观测 之 下 ,否则 实际 上 可 能 并 不 存在 。 一 项 由 澳洲 国立 大 学 研究 人 员 所 进行 的 波 粒 二 象 性 研究 中 指 
出 ,粒子 或 波 在 它们 被 观测 之 后 呈现 存在 的 状态 。 换 句 话说 ,观测 就 是 一 切 , 而 现实 的 境况 只 有 在 观测 发 生 时 才 
会 存在 。</p></div> 
</body></html > 
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图 446-2 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 .$ (document). tooltip({ )) 用 于 创建 
一 个 工具 提示 框 ,但 是 自 定义 样式 必须 自己 设置 , 即 设置 . ui-tooltip 和 . arrow 类 的 样式 。 需 要 说 明 的 
是 ,tooltip() 方 法 是 工具 提示 框 部 件 (Tooltip Widget) 的 方法 ,因此 在 使 用 tooltip() 方 法 时 必须 添加 
jquery-ui, min, js 和 jdquery-ui. min. css 两 个 文件 。 

此 实例 的 源 文件 名 是 myHtmlA147. html。 


447 ”使 用 阴影 滤 镜 创建 带 指示 箭头 的 提示 框 


此 实例 主要 通过 设置 元 素 的 filter 属性 值 为 drop-shadow 创建 带 阴 影 特效 的 箭头 提示 框 。 当 在 
Google Chrome 浏览 器 中 显示 该 页 面 时 , 带 阴影 特效 的 箭头 提示 框 如 图 447-1 所 示 。 有 关 此 实例 的 主 
要 代码 如 下 。 
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图 447-1 


<!doctype html ><html ><head><meta charset = "UTF — 8"> 
<style type= "text/css"> 
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.box {margin: 40px; padding: 50px;background - color: lightseagreen; position: relative; width:350px; 
height :200px; border - radius: 10px; — webkit ~ filter: drop— shadow(5px 5px 10px black);} 
.cor {position: absolute; left: - 40px; width: 0; height: 0; overflow: hidden; border: 20px solid 
transparent; border - right - color: lightseagreen;} 
ha { text - align: center;} 
p{text — indent: 30px;} 
</style></head > 
<body><div class = "box"> <i class = "cor"></i><h3 > 磁器 口 古 镇 </h3 ><p> 磁 器 口 古 镇 始 建 于 宋代 ,作为 嘉 
陵 江 边 重要 的 水 陆 码 头 , 曾 经 " 白 日 里 千 人 拱手 , 入 夜 后 万 荔 明 灯 " 繁 盛 一 时 , 被 赞誉 为 "小 重庆 "。1998 年 磁器 口 
古镇 被 国务 院 确定 为 重庆 市 重点 保护 传统 街 ,2010 年 人 选中 国 历史 文化 名 街 , 是 历经 千年 变迁 而 保存 至 今 的 重 
庆 市 重点 保护 传统 街 。</p></div></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,-webkitrfilter: drop- shadow (5px 
5px 10px black) 用 于 为 元 素 ( 提 示 框 ) 设 置 阴影 效果 ,drop-shadow 滤 镜 添加 的 阴影 效果 就 好 像 太 阳 照 
在 提示 框 上 使 其 产生 影子 一 样 。 该 滤 镜 为 提示 框 产生 一 个 快照 ,使 其 颜色 单一 化 并 将 之 模糊 ,然后 将 
模糊 结果 进行 偏离 ,使 其 看 起 来 就 像 提示 框 的 一 个 阴影 。 在 样式 属性 中 使 用 多 个 可 选 参数 ,分别 用 于 
指定 阴影 的 水 平方 向 偏 移 距 离 ,垂直 方向 偏 移 距离 .阴影 的 模糊 半径 和 阴影 的 颜色 , 即 filter: drop- 
shadow(x 偏 移 量 , y 偏 移 量 ,模糊 半径 ,颜色 值 ) 。 

filter 属性 支持 的 滤 镜 有 grayscale( 灰 度 )、saturate (饱和 度 )、hue-rotate( 色 相 旋 转 )、sepia( 复 
十 ) ,invert( 反 色 ) 、opacity( 透 明度 )、brightness (亮度 )、contrast (对比 度 )、blur (模糊 ) 、drop-shadow 
(阴影 ) 。 

此 实例 的 源 文件 名 是 myHtmlB109. html。 


448 ”通过 图 形 拼接 的 方式 创建 气泡 式 提示 框 


此 实例 主要 通过 创建 一 个 三 角形 和 一 个 圆 角 和 矩形 实现 以 图 形 拼接 的 方式 创建 气泡 式 提示 框 。 当 
在 Google Chrome 浏览 器 中 显示 该 页 面 时 , 带 尖 角 指示 的 气泡 提示 框 的 显示 效果 如 图 448-1 所 示 。 
有 关 此 实例 的 主要 代码 如 下 。 
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<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<style type= "text/css"> 
. myBox{ border — radius: 10px; width: 150px; height:200px; background - image: url(img/BO05A. jpg) ; box 
一 shadow: 5px 5px 5px 1px #999,0 0 40px rgba(0, 0, 0, 0.06) inset; } 
/x* 三 角形 */ 





5 部 分 元 来 《3》》 
.triangle { position: absolute; top: 60px; left: 160px; width: 0;height: 0; 


border - right: 50px solid #99FFFF; border — bottom: 25px solid transparent;} 
/* 圆 角 和 矩形 */ 
.radius - rect { position: absolute; top: 40px; left: 185px; width: 250px; height: 115px; padding: 
10px; border - radius: 10px; background— color: #99FFFF; } 
</style></head> 
<body><div class = "myBox"><div class= "triangle"></div><div class = "radius - rect"> 中 央 电 视 台 (简称 
央视 ,英语 China Central Television, 简称 CCIV), 是 中 华人 民 共 和 国 国 家 电视 台 。1958 年 5 月 1 日 试播 ,9 月 2 
日 正式 播 出 。 初 名 北京 电视 台 ,1978 年 5 月 1 日 更 名 为 中 央 电 视 台 。</div></div></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,position: absolute 用 于 绝对 定位 ,以 
便 三 角形 和 圆 角 和 矩形 拼接 在 一 起 。 三 角形 则 主要 是 通过 border( 下 边框 线 和 右边 框 线 ) 透 明基 加 产生 
的 ,如 果 需 要 改变 三 角形 的 大 小 , 则 应 该 修改 border-right: 50px solid #99FFFF 和 border-bottom: 
25px solid transparent 这 两 个 属性 值 ,width: 0 和 height: 0 应 该 始终 为 0。 

此 实例 的 源 文件 名 是 myHtmlB200. html。 


449 ”使 用 透明 的 线性 渐变 创建 切 角 提 示 框 


此 实例 主要 通过 使 用 linear-gradient() 方 法 创建 线性 渐变 背景 进行 切 角 ( 即 透 明 ), 从 而 实现 提示 
框 的 4 个 角 被 切 掉 的 特殊 效果 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,被 切 角 的 提示 框 的 显 
示 效 果 如 图 449-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 





<! doctype html >< html >< head >< meta charset = "UTF — 8"> 
<style type= "text/css"> 
.myTips{ position: absolute; top: 50px; left: 50% ; transform: translate( — 50%, — 50%);width: 
396px; padding: 10px;text -align: left; font ~— size: 14px; } 
.myTips{ /x* 10px 即 4 个 渐变 长 度 ,按照 左上 、 右 上 、 右 下 、 左 下 的 顺序 切 角 */ 
/* 切 角 按 照 旋转 角度 并 控制 渐变 长 度 , 即 渐变 停止 位 置 * / 
background: linear - gradient (135deg, transparent 10px, cyan 0) top left, linear - gradient 
( -135deg，transparent 10px, cyan 0) top right, linear - gradient( - 45deg, transparent 10px, cyan 0) 
bottom right, linear - gradient (45deg, transparent 10px, cyan 0) bottom left; background - size: 50% 
50 % ;background - repeat: no— repeat; } 
/* 在 矩形 的 下 面 添加 三 角形 ( 即 指示 箭头 ) * / 
.myTips:after { content: ''; position: absolute; bottom: 0; left: 50% ;border: 20px solid transparent; 
border — top - color:cyan;border - bottom: 0; border - left: 0; margin: 0 0 — 20px — 10px; } 
.myBox{ margin: 105px auto 10px; width: 410px; height: 250px; box— shadow: 2px 2px 8px black; } 
img{ width: 410px; height: 250px;} 
</style></head> 
<body ><div class = "myTips"> 纽约 是 一 座 世界 级 城市 , 直接 影响 着 全 球 的 经 济 、 金 融 、 媒 体 政治 .教育 .娱乐 与 
时 尚 界 ,其 中 联合 国 总 部 也 位 于 该 市 ,因此 纽约 也 被 公认 为 世界 之 都 。</div>< div class = "myBox">< img src 
= "img/B266R. jpg"></div></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,lineargradient(135deg，transparent 
10px，cyan 0) top left 表示 以 135 的 方向 .以 transparent( 透 明 ) 渐 变 10px, 其 余 用 cyan 填充 , 即 创建 
提示 框 左 上 和 角 的 切 角 。 当 上 述 代 码 改 为 linear-gradient (135deg.red l0px. lightgray 0px) top left 
时 ,运行 效果 如 图 449-2 所 示 ,仔细 对 比 两 个 提示 框 左 上 角 的 变化 ,大 家 就 可 明白 渐变 透明 是 怎样 切 角 
的 。 整 个 切 角 的 提示 框 就 是 通过 类 似 的 4 个 部 分 拼接 而 成 的 。 

此 实例 的 源 文件 名 是 myHtmlB270. html。 


你 HTML5+CSS3 炫 酷 应 用 实例 集锦 








D myHtmlB270html x D myHtmlB270html x 
¢ 3 © Dfie///D/myWork/myHtmlB270.ht 字 








5 3 © Dfie///D/myWork/myHtmlB270.ht 窜 三 


和 Fr 于 


纽约 也 被 公认 为 世界 之 都 * 











图 449-1 图 449-2 


450 使 用 透明 的 径 向 渐变 创建 内 圆 角 提示 框 


此 实例 主要 通过 使 用 radial-gradient() 方 法 创建 径 向 渐变 背景 进行 内 圆 角 ( 即 透明 ), 从 而 实现 提 
示 框 的 4 个 角 被 切 掉 的 特殊 效果 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,被 内 圆 角 切 掉 的 提 
示 框 的 显示 效果 如 图 450-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<style type= "text/css"> 
.myTips { position: absolute; top: 50px; left: 50%;transform: translate( - 50%, - 50%); width: 
396px; padding: 10px; text- align: left; font— size: 14px; } 
.myTips { /*10px 即 渐变 长 度 , 按 照 左上 、 右 上 、 右 下 、 左 下 的 顺序 实现 内 圆 角 x / 
/* 内 圆 角 实际 上 是 将 径 向 渐变 的 圆心 设 在 4 个 项 点 上 ,透明 色 自 动产 生 切 掉 的 错觉 * / 
background: radial - gradient (circle at top left, transparent 10px, yellowgreen 0) top left, 
radial - gradient (circle at top right, transparent 10px, yellowgreen 0) top right, radial 一 
gradient( circle at bottom right, transparent 10px, yellowgreen 0) bottom right, radial 一 
gradient (circle at bottom left, transparent 10px, yellowgreen 0) bottom left; background 一 
size: 50% 50%; background - repeat: no— repeat; } 
/* 在 矩形 的 下 面 添 加 三 角形 ( 即 指示 箭头 ) * / 
.myTips:after { content: ''; position: absolute; bottom: 0; left: 50 % ;border: 20px solid transparent; 
border - top - color: yellowgreen; border - bottom: 0; border - left: 0; margin: 0 0 
一 20px — 10px; } 
.myBox { margin: 115px auto 10px; width: 415px; height: 250px; 
border - radius: 10px; box — shadow: 2px 2px 8px black; } 
img { width: 415px; height: 250px; border - radius: 10px;} 
</style></head> 
<body>< div class = "myTips"> 东 京 是 日 本 国 的 政治 .经 济 \ 文 化 中 心 , 海 陆 空 交 通 枢纽 , 根据 建成 区 面积 、 人 口 
以 及 国民 生产 总 值 等 指标 , 东京 是 世界 第 一 大 城市 ,全 球 最 大 的 经 济 中 心 之 一 。 在 2014 全 球 城市 综合 实力 排名 
中 位 于 世界 第 四 。</div> 
<div class = "myBox">< img src = "img/B266E. jpg"></div ></body ></html > 








六 5 部 分 元素 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , radial-gradient (circle at top left， 
transparent 10px，yellowgreen 0) top left 表示 根据 4 个 顶点 将 提示 框 划分 为 4 个 等 份 ,然后 以 左上 
角 为 圆心 ,并 用 透明 色 创 建 一 个 半径 为 10px 的 圆 ,这 样 此 圆 与 提示 框 左上 角 重 释 的 部 分 就 被 透明 掉 ， 
其 他 部 分 则 用 绿色 填充 。 在 CSS3 中 ,radial-gradient() 方 法 的 主要 作用 是 在 颜色 与 颜色 之 间 产 生 径 
向 渐变 ,此 实例 将 渐变 半径 设置 为 0, 因此 没有 颜色 在 径 向 上 渐变 的 效果 ,如 果 将 以 上 代码 改 为 radial- 
gradient(circle at top left,transparent 10px，yellowgreen 150px) top left, 则 会 产生 径 向 的 颜色 渐变 
效果 ,如 图 450-2 所 示 。 

此 实例 的 源 文件 名 是 myHtmlB271. html。 
西 - 5 x 一 oo Xx 

D myHtmlB271.html x D myHs x DD mytt Wy D myhe x 
© Dfiley/DVmywWorwmyHtmlB271ht 三 © Difile//DVymyworkwymyHtmlB271.htw 三 


心 之 一 * 在 201 赂 
































图 450-1 图 450-2 


451 通过 每 加 的 方式 创建 箭头 风格 的 提示 框 


此 实例 主要 通过 合理 地 设置 bordercolor、 width .height 等 属性 值 创建 两 个 大 小 不 同 的 三 角形 ， 
用 其 琶 加 之 后 露出 的 部 分 作为 箭头 线条 .从 而 创建 箭头 风格 的 提示 框 。 当 在 Google Chrome 浏览 器 
中 显示 该 页 面 时 ,如 果 鼠 标 指针 悬浮 在 图 像 上 , 则 将 在 下 面 出 现 一 个 带 箭头 的 提示 框 ' 如 图 451-1 所 
示 。 有 关 此 实例 的 主要 代码 如 下 。 


<!doctype html ><html >< head>< meta charset = "UTF - 8"> 
<script src= "js/jquery -3.1.1.min.js"></script >< script type = "text/javascript"> 
$ (function() { 
$ ("img"). hover(function( ){ // 在 鼠标 指针 基 浮 于 图 像 上 时 显示 提示 框 
$ (".myTooltip").css("display", "block"); 
},function( ){ // 在 鼠标 指针 离开 图 像 时 隐藏 提示 框 
$ (".myTooltip").css("display", "none”"); 
1);); 
</script > 
<style type= "text/css"> 
/* 设 置 提示 框 的 基本 样式 */ 
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.myTooltip { display: none; width: 400px; border: lpx solid black; border - radius: 5px;background — 
color: cyan;position: relative; text — align: center; left:calc(50% - 200px); top:25px; 
font - size: 14px;text — align: left; - webkit — transform:rotate(180deg); } 

.myTooltip p{ - webkit - transform:rotate(180deg); }/* 箭头 向 上 、 向 下 与 此 相关 * / 
/* 设 置 黑色 和 青色 三 角形 的 基本 样式 ,用 于 裁剪 箭头 * / 
.myTooltip span { width: 0; height: 0; overflow: hidden; position: absolute; } 
/* 设 置 黑色 三 角形 的 样式 * / 
.myTooltip span. myInnerTriangle { border - width: 20px; border - style: solid dashed dashed; border— 
color: black transparent transparent; left: 80px; bottom: — 40px; } 
/* 设 置 青 色 三 角形 的 样式 * / 
/* 青 色 和 黑色 三 角形 三 加 在 一 起 ,露出 的 黑色 部 分 即 为 箭头 的 线条 宽度 * / 
.myTooltip span. myOuterTriangle {border - width: 20px; border - style: solid dashed dashed; border — 
color: cyan transparent transparent; left: 80px; bottom: — 39px; } 
/* 设 置 图 像 的 基本 样式 * / 
img{ width:400px; height:200px;border ~ radius:10px; 
box — shadow: 2px 2px 8px black;} 
</style></head> 
<body>< div align = "center">< img src = "img/B373. jpg"></div> 
<div class = "myTooltip">< span class = "myInnerTriangle"></span> 
<span class= "myOuterTriangle"></span><p> 卢 浮 宫 始 建 于 1204 年 , 原 是 法 国 的 王宫 ,居住 过 50 位 法 国 
国王 和 王后 ,是 法 国文 艺 复兴 时 期 最 珍贵 的 建筑 物 之 一 ,以 收藏 丰富 的 古典 绘画 和 雕刻 而 闻名 于 世 。</p></div> 
</body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,border-color: black transparent 
transparent 用 于 创建 一 个 黑色 的 三 角形 .如 图 451-2 所 示 ; border-color: cyan transparent 
transparent 用 于 创建 一 个 青色 的 三 角形 .因为 青色 三 角形 的 bottom 为 一 39px, 黑 色 三 角形 的 bottom 
为 一 40px, 当 它们 县 加 在 一 起 的 时 候 就 会 露出 黑色 的 边缘 ,并 与 青色 提示 框 的 黑色 边框 线 连接 在 一 
起 ,起 到 箭头 的 指示 作用 。 在 CSS3 中 ,border-color 属性 用 于 设置 4 个 边框 线 的 颜色 ,此 属性 可 设置 
一 个 元 素 的 所 有 边框 中 可 见 部 分 的 颜色 .或 者 为 4 个 边框 线 分 别 设置 不 同 的 颜色 。 

此 实例 的 源 文 件 名 是 myHtmlB373. html。 
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452 使 用 attr( ) 方 法 将 属性 值 传递 给 提示 框 


此 实例 主要 通过 使 用 选择 器 的 content 属性 的 可 读 取 attr() 特 性 实现 将 自 定义 属性 值 传递 给 提 
示 框 的 效果 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 将 显示 一 幅 图 像 , 如 图 452-1 所 示 。 如 果 
将 鼠标 指针 悬浮 在 图 像 上 , 则 将 在 图 像 的 项 部 显示 内 容 来 自 自 定义 属性 myMsg 的 提示 框 , 如 图 452-2 
所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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文化 。 


攻守 合 性 博物 馆 ， 也 是 中 | 的 古代 

















<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
< style type= "text/css"> 
.myTips{ position: absolute; top: 60% ;left: 50%; 
transform: translate( - 50%, —50%);} 
/* 创建 提示 框 * / 
.myTips:hover: :before{content:attr(myMsg); position:absolute; top: - 68px; left:1px; display: inline 
— block; background - color: cyan; border - radius: 5px; font - size: 14px; 
width: 388px; text - align: left; cursor:pointer; padding: 5px;} 
/* 创建 提示 框 下 面 的 三 角形 箭头 * / 
.myTips:hover: :after{ content:""; border- top:10px solid cyan; border - left:10px solid transparent; 
border - right: 10px solid transparent; position: absolute; top: - 10px; left: 
40%;} 
img{ width:400px; height:250px;border — radius: 10px; } 
</style></head> 
<body >< div class = "myTips” myMsg = "故宫 博物 院 建立 于 1925 年 ,是 在 明 朝 .清朝 两 代 皇 宫 及 其 收藏 的 基础 上 


建立 起 来 的 中 国 综合 性 博物 馆 , 也 是 中 国 最 大 的 古代 文化 艺术 博物 馆 。">< span >< img src = " img/B301. jpg"> 
</span></div></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,content 属性 用 于 插 和 人 生成 内 容 ， 
content 属性 与 before 选择 器 及 after 选择 器 配合 使 用 .将 生成 内 容 放 在 一 个 元 素 内 容 的 前 面 或 后 面 。 
content 属性 的 语法 格式 如 下 。 





content:normal| string|attr()|uri()|counter() 
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其 中 ,normal 是 默认 值 ; string 表示 插入 文本 内 容 ; attr() 表 示 插 和 元素 的 属性 值 , 当 使 用 attr() 
获取 标签 属性 名 的 时 候 千 万 不 要 添加 引号 ; uri() 表 示 插 和 人 一 个 外 部 资源 (图 像 . 声 音 、 视 频 或 浏览 器 
支持 的 其 他 任何 资源 ); counter() 表 示 计 数 器 ,用 于 插入 排序 标识 。 

此 实例 的 源 文件 名 是 myHtmlB301. html。 


453 ”通过 可 选 数 据 列表 在 文本 框 中 插入 内 容 


此 实例 主要 通过 在 < input > 标签 中 指定 list 属性 实现 通过 可 选 数据 列表 在 文本 框 中 插入 内 容 。 
当 在 浏览 器 中 显示 该 页 面 时 ,如 果 在 “所 学 专业 :" 文 本 框 中 输入 “计算 机 ”, 则 将 滑 出 一 个 自动 匹配 的 
可 选 列表 ,如 图 453-1 所 示 , 选 择 其 中 的 某 一 选项 , 则 该 选项 将 插入 文本 框 中 。 有 关 此 实例 的 主要 代码 
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图 453-1 


<!doctype html >< html >< head >< meta charset = UTF - 8></head> 
<body >< section align = "center"> 所 学 专业 : < input id = "myMajor”" list = "myData"/> 
<datalist id = "myData"> 
<option value= "计算 机 应 用 "> <option value = "计算 机 网 络 "> 
<option value= "计算 机 教育 "> <option value= "视觉 传达 设计 "> 
<option value= "信息 与 计算 科学 "></datalist></section></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,< input > 标签 的 list 属性 指定 即将 引 
用 的 数据 列表 标签 < datalist > 的 id,< datalist > 标签 中 的 < option > 标签 定义 可 选 数据 的 列表 选项 。 需 
要 说 明 的 是 ,list 属性 是 < input > 标签 在 HTML5 中 的 新 属性 。 

此 实例 的 源 文件 名 是 myHtmlA001. html。 


454 ”使 用 数据 源 实现 文本 框 的 自动 完成 功能 


此 实例 主要 使 用 jquery-ui. min. js 和 jquery-ui. min. css 的 autocomplete( ) 方 法 实现 通过 数据 源 
自动 完成 文本 框 的 输入 功能 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,如 果 在 文本 框 中 输入 字 
母 ,例如 “J”, 则 将 显示 数据 源 中 所 有 包含 字母 ] 的 选项 供用 户 选 择 , 如 图 454-1 所 示 。 如 果 选 择 
“JavaScript”, 则 该 选项 将 自动 填充 到 文本 框 中 ,如 图 454-2 所 示 。 当 然 , 用 户 也 可 以 使 用 其 他 字母 进 
行 测试 。 有关 此 实例 的 主要 代码 如 下 。 





<!doctype html >< html >< head >< meta charset = "UTF — 8"> 
<script src= "js/jquery -3.1.1.min. js"></script> 
< script src= "js/jquery - ui.min. js"></script>< script type = "text/javascript"> 


$ (function() {// 通 过 数组 对 象 设置 数据 源 的 数据 





var mySource = [ "ActionScript", "AppleScript", "ASP", "BASIC", "C", "C++", "Fortran", "Java”, 
"JavaScript", "Perl", "PHP", "Python", "Ruby"]; 
// 在 source 属 性 中 将 数据 作为 参数 传人 ,供用 户 进行 选择 
$ ("#myAuto").autocomplete({ source: mySource}); }); 
</script > 
< link rel = "stylesheet" href = "css/jquery— ui.min.css"> 
</head> 
<body> 
<div align = "center"> 
< label for = "myAuto"> 请 输入 您 最 喜爱 的 编程 语言 : </label > 
<input id= "myAuto"></div> 
</body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 .autocomplete() 方 法 用 于 根据 用 户 的 
输入 值 进行 搜索 和 过 滤 , 让 用 户 快速 找到 并 从 预 设 值 列表 中 选择 ,该 方法 中 的 source 属性 用 于 指定 数 
据 源 。 例 如 在 此 实例 中 , 当 在 文本 框 中 输入 ja 时 则 提供 Java 或 JavaScript 供用 户 选择 。 需 要 说 明 的 
是 ,autocomplete() 方 法 是 自动 完成 部 件 (Autocomplete Widget) 的 方法 ,因此 在 使 用 autocomplete() 
方法 时 必须 添加 jquery-ui. min. js 和 jquery-ui. min。 css 两 个 文件 。 

此 实例 的 源 文件 名 是 myHtmlA162. html。 
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455 ”为 自动 完成 文本 框 的 下 拉 列 表 框 添加 滨 动 条 


此 实例 主要 使 用 jquery-ui. min. js 和 jquery-ui. min. css 的 autocomplete () 方 法 ,并 定制 . ui- 
autocomplete 类 的 CSS 样式 ,从 而 实现 为 自动 完成 文本 框 的 下 拉 列 表 框 添加 滚动 条 。 当 在 Google 
Chrome 浏览 器 中 显示 该 页 面 时 ,如 果 在 文本 框 中 输入 字母 ,例如 “a”, 因 为 符合 字母 a 的 选项 较 多 , 超 
过 了 规定 的 下 拉 列 表 框 高 度 , 因 此 自动 出 现 了 垂直 滚动 条 ,如 图 455-1 所 示 。 如 果 在 其 中 选择 
“AppleScript”, 则 该 选项 将 自动 填充 到 文本 框 中 ,如 图 455-2 所 示 。 当 然 , 用 户 也 可 以 使 用 其 他 字母 
进行 测试 。 有 关 此 实例 的 主要 代码 如 下 。 
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<!doctype html >< html >< head>< meta charset = "UTF — 8"> 
<script src= "js/jquery - 3.1.1.min. js"></script> 
< script src= "js/jquery - ui.min. js"></script>< script type= "text/javascript"> 
$ (function() {// 通 过 数组 对 象 将 下 拉 候 选 列表 数据 存储 起 来 
var mySource = [ " ActionScript", "AppleScript", "ASP", "BASIC", "C", "C++", "Fortran", "Java”, 
"JavaScript", "Perl", "PHP", "Python", "Ruby"]; 
// 在 source 属性 中 将 数据 作为 参数 传人 , 供用 户 进行 选择 
$ ("#myAuto").autocomplete( {source: mySource}); }); 
</script> 
<link rel = "stylesheet" href = "css/jquery ~ ui.min.css">< style type = "text/css"> 
/* 设 置 自动 完成 文本 框 的 下 拉 列 表 框 的 基本 样式 */ 
.ui- autocomplete { max- height: 100px; overflow— y: auto; overflow— x: hidden; } 
</style></head> 
<body>< div align = "center">< label for = "myAuto"> 请 输入 您 最 喜爱 的 编程 语言 : </label >< input id = 
"myAuto"></div ></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 .autocomplete() 方 法 用 于 根据 用 户 的 
输入 值 进行 搜索 和 过 滤 , 让 用 户 快 速 找到 并 从 预 设 值 列表 中 选择 .该 方法 中 的 source 属性 用 于 指定 数 
据 源 。 如 果 需 要 对 自动 完成 文本 框 的 下 拉 列 表 框 进行 定制 , 则 应 该 设置 . ui-autocomplete 类 的 CSS 样 
式 。 需 要 说 明 的 是 ,autocomplete() 方 法 是 自动 完成 部 件 (Autocomplete Widget) 的 方法 ,因此 在 使 用 
autocomplete() 方 法 时 必须 添加 jquery-ui. min. js 和 jquery-ui. min. css 两 个 文件 。 

此 实例 的 源 文 件 名 是 myHtmlA163. html。 


456 ”对 自动 完成 文本 框 的 下 拉 选 项 进行 分 类 


此 实例 主要 通过 使 用 jquery-ui. min. js 和 jquery-ui, min. css 的 autocomplete() 方 法 实现 为 自动 
完成 文本 框 的 下 拉 列 表 框 添加 分 类 功能 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,如 果 在 文本 
框 中 输入 字母 ,例如 “p”, 则 将 在 下 拉 列 表 框 中 分 类 显示 包含 字母 “*p” 的 选项 ,如 图 456-1 所 示 。 如 果 
在 其 中 选择 “pineapple”, 则 该 选项 将 自动 填充 到 文本 框 中 ,如 图 456-2 所 示 。 当 然 , 用 户 也 可 以 使 用 
其 他 字母 进行 测试 。 有 关 此 实例 的 主要 代码 如 下 。 
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<! doctype html >< html >< head><meta charset = "UTF - 8"> 
<script src= "js/jquery- 3.1.1.min. js"></script > 
< script src= "js/jquery - ui. min. js"></script>< script type= "text/javascript"> 
// 对 自动 完成 文本 框 的 下 拉 列 表 框 进行 分 类 
$ .widget( "custom. catcomplete"，$ .ui.autocomplete, { 
_renderMenu: function( ul, items ) { 
var that = this, currentCategory= ""; 
$ .each( items, function( index, item ) { 
证 ( item. category != currentCategory ) { 
ul.append( "< li class ='ui- autocomplete— category'>" + item. category + "</1i>" ); 
currentCategory = item. category; 
} 
that._renderItemData( ul, item ); 
D271}); 
$ (function() { // 设 置 数据 源 
var myData= [{ label: "orange"，category: "水 果 类 " }, { label: "peach"，category: "水 果 类 " }, { label: 
"pear"，category: "水 果 类 ”}, { label:"pineapple"，category: "水 果 类 "” }, { label: "pomelo”, category: 
"水 果 类 "”}, { label: "pumpkin"，category: "蔬菜 类 ”},{ label: "spinach"，category: "蔬菜 类 " },{ label: 
"leek"，category: "蔬菜 类 "”},{ label: "cucumber"，category: "蔬菜 类 "”},{ label: "kale"，category: "蔬菜 
类 " },{ label: "cabbage"，category: "蔬菜 类 "”}, { label: "bologna"，category: "熟食 类 "”}, { label: 
"roast"，category: "熟食 类 " },{ label: "ham"，category: "熟食 类 " }, { label: "black pudding", category: 
"熟食 类 ”}, { label: "potato salad"，category: "熟食 类 "”},{ label: "pork burgers"，category: "熟食 类 "”}， 
{ label: "salami"，category: "熟食 类 " } ]; 
// 为 文本 框 添 加 带 分 类 的 自动 完成 功能 
$("#myItem" ).catcomplete({ delay: 0, source: myData}); }); 
</script> 
<link rel = "stylesheet" href = "css/jquery ~ ui.min. css">< style type = "text/css"> 
.ui- autocomplete - category { font - weight: bold;padding: 0.2em 0. 4em; margin: 0.8em 0 0.2em; line— 
height: 1.5;} /* 设 置 分 类 标签 的 基本 样式 */ 
</style></head> 
<body>< div align = "center">< label for = "myItem"> 日 常生 活 中 您 最 爱 吃 : </label > 
< input id = "myItem"></div></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,autocomplete( ) 方 法 用 于 根据 用 户 的 


输入 值 进行 搜索 和 过 滤 , 让 用 户 快速 找到 并 从 预 设 值 列表 中 选择 ,该 方法 中 的 source 属性 用 于 指定 数 
据 源 。 如 果 需 要 对 自动 完成 文本 框 的 下 拉 列 表 框 的 选项 进行 分 类 管理 , 则 应 该 像 实例 这 样 重新 处 理 
分 类 选项 在 下 拉 列 表 框 中 的 呈现 样式 。 需要 说 明 的 是 ,autocomplete( ) 方 法 是 自动 完成 部 件 
(Autocomplete Widget) 的 方法 ,因此 在 使 用 autocomplete() 方 法 时 必须 添加 jquery-ui. min. js 和 
jquery-ui. min. css 两 个 文件 。 


此 实例 的 源 文 件 名 是 myHtmlA164. html。 


457 ”启用 或 禁用 文本 框 的 自动 完成 功能 


此 实例 主要 通过 设置 < form > 标签 和 < input > 标签 的 autocomplete 属性 实现 启用 或 禁用 表单 或 





者 文本 框 的 自动 完成 功能 。 当 在 浏览 器 中 显示 该 页 面 时 ,双击 “公司 名 称 :" 或 “公司 地 址 :" 文 本 框 , 则 
将 向 下 滑 出 下 拉 列 表 框 ,显示 之 前 在 此 文本 框 中 输入 的 历史 记录 ,选择 其 中 的 选项 则 会 自动 将 其 填充 
到 文本 框 中 ,如 图 457-1 所 示 。“ 联 系 电话 :" 文 本 框 没有 自动 完成 功能 .因此 双击 此 文本 框 不 会 滑 出 下 
拉 列 表 框 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 457-1 


<!doctype html >< html >< head >< meta charset = UTF - 8></head> 
<body>< form autocomplete="on" align = "center" width = "300px"> 
公司 名 称 : < input type = "text" id = "myName"/><br><br> 
公司 地 址 : < input type = "text" id = "myAddress"/><br><br> 
联系 电话 : < input type = "text" id = "myPhone”autocomplete = "off"/><br><br> 
<button type = "submit" style= "width: 250px"> 提 交 登 记 信息 </button ></form> 
</body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,autocomplete 属性 是 < form > 标签 和 
<input > 标签 在 HTML5 中 的 新 属性 ,该 属性 规定 form 或 input 元素 应 该 拥有 自动 完成 功能 。 如 果 
设置 form 元 素 的 autocomplete 属性 为 on, 则 该 form 中 的 input 元 素 的 autocomplete 属性 自动 为 
on 除非 明确 设置 input 元 素 的 autocomplete 属性 为 off。 在 此 实例 中 ,公司 名 称 :” 和 ”公司 地 址 :" 文 
本 框 虽然 没有 设置 autocomplete 属性 ,但 这 两 个 文本 框 的 autocomplete 属性 自动 为 on, 因此 具有 自 
动 完成 功能 ;“ 联 系 电话 :" 文 本 框 重新 设置 了 autocomplete 属性 为 off .因此 没有 自动 完成 功能 。 这 种 
情形 通常 出 现在 登录 窗口 中 ,“ 用 户 名 称 :" 文 本 框 具 有 自动 完成 功能 ,但 “用户 密码 : "通常 没有 自动 完 
成 功能 。 

注意 , autocomplete 适用 于 < form > 标签 ,以 及 text、 search、 url, telephone、 email、 password、 
datepickers、range、color 类 型 的 < input > 标签 。 

此 实例 的 源 文件 名 是 myHtmlA018. html。 


458 ”禁止 用 户 在 文本 框 中 粘贴 剪 切 板 的 内 容 


此 实例 主要 通过 重新 处 理 (拦截 ) 文 本 框 < input > 的 paste 事件 响应 方法 实现 禁止 用 户 向 文本 框 
中 粘贴 剪 切 板 的 内 容 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,在 * 沪 市 账号 : "文本 框 获得 焦点 
时 ,如 果 试 图 向 其 粘贴 内 容 , 则 将 弹出 一 个 消息 框 提示 “ 抱 鞭 ,已 经 禁止 使 用 粘贴 方式 ! 请 手动 输 
人。”, 如 图 458-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 





<!doctype html ><html ><head><meta charset = "UTF - 8"> 
<script src= "js/jquery - 3.1.1.min. js"></script >< script type = "text/javascript"> 
$ (function(){// 在 用 户 对 输入 框 进行 粘贴 操作 时 拦截 用 户 操作 ,使 粘贴 内 容 无 效 

$ ("#myAccount").on("paste", function(){ 
alert(" 抱 菊 , 已 经 禁止 使 用 粘贴 方式 ! 请 手动 输入 ."); 
return false; });}); 

</script> 

<style type= "text/css"> 





5 部 分 元素 


div { margin— top: 2px; margin— left: 2px; } 
</style></head> 
<body>< div align = "center"> < label for = "myAccount"> 沪 市 账号 : </label >< input type = "text” id = 
"myAccount"/></div></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,以 下 内 容 是 文本 框 的 paste 事件 响应 
方法 。 


$ ("#myAccount"). on("paste", function(){ 
alert(" 抱 菊 , 已 经 禁止 使 用 粘贴 方式 ! 请 手动 输入 。) 


return false; }); 


注意 ,如 果 设 置 return true, 则 仍然 能 够 在 弹出 消息 框 之 后 进行 粘贴 操作 ,因此 必须 设置 return 
false。 根 据 同样 的 思路 ,如 果 需 要 禁止 用 户 复制 文本 框 中 的 内 容 , 则 代码 可 以 修改 为 如 下 。 
$ ("#myAccount").on("copy", function(){ 


alert(" 抱 菊 , 已 经 禁止 使 用 复制 此 部 分 内 容 ! 请 手动 输入 。)， 


return false; }); 


此 实例 的 源 文件 名 是 myHtmlA238. html。 
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图 458-1 


459 ”允许 或 禁止 对 文本 框 中 的 单词 进行 拼写 检查 


此 实例 主要 通过 设置 < textarea > 标签 和 < input > 标签 的 spellcheck 属性 实现 允许 或 禁止 对 用 户 
输入 的 英文 单词 进行 拼写 检查 。 当 在 浏览 器 中 显示 该 页 面 时 ,如 果 在 “中 文 名 称 :" 文 本 框 中 输入 错误 
的 英文 单词 ,将 不 会 出 现 错误 提示 ; 如 果 在 “英文 简历 :" 文 本 框 中 输入 错误 的 英文 单词 ,例如 
“dreamm”, 按 下 空格 键 后 将 会 在 该 英文 单词 下 面 添加 红色 的 波浪 线 ,如 图 459-1 所 示 。 有 关 此 实例 的 
主要 代码 如 下 。 





<!doctype html >< html >< head >< meta charset = UTF - 8></head> 
<body > 中 文 名 称 : < input type = "text" id = "myName" spellcheck = "false" 
style= "width:300px"/><br><br> 
英文 简历 : <textarea spellcheck = "true" rows = "5" cols= "40" 
id= "myBrief" ></textarea> </p></body ></html > 


HTML5+CSS3 炫 酷 应 用 实例 集锦 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,< textarea > 标签 和 < input > 标签 的 
spellcheck 属性 是 HTML5 新 增 的 属性 ,该 属性 规定 是 否 对 元 素 内 容 进行 拼写 检查 。 当 元 素 的 
spellcheck 属性 被 设置 为 true 时 将 对 元 素 的 文本 进行 拼写 检查 ; 当 元 素 的 spellcheck 属性 被 设置 为 
false 时 则 不 对 元 素 的 文本 进行 拼写 检查 。 

此 实例 的 源 文件 名 是 myHtmlA019. html。 
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460 设置 pattern 属性 规范 文本 框 中 数据 的 输入 


此 实例 主要 通过 设置 pattern 属性 实现 规范 用 户 在 文本 框 中 的 数据 输入 。 当 在 浏览 器 中 显示 该 
页 面 时 ,如 果 用 户 在 "身份 证 号 码 : "文本 框 中 输入 的 内 容 不 满足 18 位 居民 身份 证 号 码 的 格式 , 则 将 在 
该 文本 框 附近 滑 出 一 个 提示 框 ,提示 ”请 与 所 请 求 的 格式 保持 一 致 。 ,如 图 460-1 所 示 。 有 关 此 实例 的 
主要 代码 如 下 。 
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图 460-1 


<!doctype html >< html >< head >< meta charset = UTF - 8></head> 
<body >< form id= "myForm"> 

< label > 新 用 户 姓名 :< input type = "text" id= "myUser"></label ><br><br> 

< label > 身份 证 号 码 : < input type= "text”pattern= "^\d{18}$ ”required placeholder = "请 与 所 请 求 的 格 
式 保 持 一 致 ." id = "myID"/></label ><br><p>< input type = "submit”value = 提交 信息 " style = "width: 
270px"/> <p/></form></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,pattern 属性 是 HTML5 新 增 的 属 
性 。pattern 属性 规定 用 于 验证 输入 字段 的 模式 ,此 模式 是 正则 表达 式 ,例如 ““\d{18) $”。pattern 属 
性 适用 于 text search .url .telephone ,email ,password 等 <input > 类 型 。 

此 实例 的 源 文件 名 是 myHtmlA025. html。 


5 部 分 元素 





461 在 文本 框 中 设置 灰色 的 输入 提示 信息 


此 实例 主要 通过 设置 placeholder 属性 实现 在 文本 框 中 设置 默认 的 灰色 输入 提示 信息 。 当 在 浏 
览 器 中 显示 该 页 面 时 ,“ 用 户 名 称 :" 文 本 框 的 提示 信息 是 “不 支持 汉字 用 户 名 称 ”“ 用 户 密 码 : "文本 框 
的 提示 信息 是 “只 能 输入 字母 .数字 及 其 组 合 ”, 在 任意 一 个 文本 框 中 输入 字符 , 则 该 文本 框 的 提示 信 
息 自动 消失 ,如 图 461-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 461-1 


<! doctype html >< html >< head >< meta charset = UTF ~ 8></head> 
<body >< form action = "" method = "post" > 

< label id= "myUser"> 用 户 名 称 : < input type= "text" placeholder = "不 支持 汉字 用 户 名 称 "></label > 
<br><br> 


< label id= "myPassword"> 用 户 密 码 : < input type = "text"” maxlength = "11" placeholder = "只 能 输入 字 
母 ,数字 及 其 组 合 "> </label ></form></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,placeholder 属性 是 HTML5 新 增 的 
属性 。 对 input(text\search ,url telephone email、 password) ,textarea 指定 placeholder 属性 即 会 对 
用 户 的 输入 进行 提示 ,提示 用 户 此 文本 框 期 待 什么 样 的 输入 。 当 文本 框 获得 焦点 时 提示 字符 自动 
消失 。 

此 实例 的 源 文件 名 是 myHtmlA023. html。 


462 在 提交 表单 时 自动 检查 无 内 容 的 文本 框 


此 实例 主要 通过 设置 required 属性 实现 在 提交 表单 时 自动 检查 未 输入 内 容 的 文本 框 。 当 在 浏览 
器 中 显示 该 页 面 时 ,如 果 * 用 户 名 称 :" 文 本 框 中 未 输入 内 容 , 单 击 * 登 录 " 按 钮 , 则 将 在 “用 户 名 称 :" 文 
本 框 附近 滑 出 一 个 提示 框 ,提示 * 请 填写 此 字段 .”, 如 图 462-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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<!doctype html >< html >< head >< meta charset = UTF - 8></head> 
<body><formaction="" method = "post"> 
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<label id= "myUser"> 用 户 名 称 :< input type = "text" required></label ><br><br> 
< label id = "myPassword"> 用 户 密码 :< input type = "text" required/></label> 
<p><input type= "submit" value = "登录 "/></p></form></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,required 属性 是 HTML5 新 增 的 属 
性 。 对 input (text, search、 url, telephone, email, password, date pickers、 number, checkbox, radio、 
file) 元 素来 说 ,一 旦 设置 了 required 属性 , 则 将 在 提交 表单 时 自动 检查 该 元 素 是 否 为 空 。 

此 实例 的 源 文件 名 是 myHtmlA024. html。 


463 ”在 提交 表单 时 校 验 文本 框 中 的 电子 邮箱 


此 实例 主要 设置 < input > 标签 的 type 属性 为 email, 从 而 实现 在 提交 表单 时 自动 校 验 用 户 在 文本 
框 中 输入 的 电子 邮箱 格式 。 当 在 浏览 器 中 显示 该 页 面 时 .如果 在 "电子 邮箱 : "文本 框 中 输入 了 错误 的 
邮箱 ,例如 “binluobin #163. com”, 则 在 单 击 表单 的 "提交 注册 信息 "按钮 后 将 在 出 现 错误 的 文本 框 附 
近 显 示 错 误 信息 ,如 图 463-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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用 户 名 称 ，|lvobin 
电子 邮箱 ，[binluobing163 com 





提交 注册 信 回 请 在 电子 部 件 地 址 中 包 
括 "@". “binluobin#163.com" 中 
缺少 "@"， 








图 463-1 


<!doctype html >< html >< head >< meta charset = UTF - 8></head> 
<body > <form style = "width: 400px; "> 
用 户 名 称 : < input type = "text" name = "myName"/><br><br> 
电子 邮箱 : < input type = "email” name = "myEmail"/><br><br> 
<button type = "submit" value = "提交 ”style = "width: 250px"> 提 交 注 册 信 息 </button> 
</form></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,email 属性 值 是 HITML5 中 < input > 
标签 的 type 属性 的 新 值 ,该 属性 值 指 明文 本 框 应 该 包含 e-mail 地 址 ,在 提交 表单 时 将 会 自动 验证 该 
文本 框 中 的 内 容 是 否 符合 e-mail 的 标准 格式 。 

此 实例 的 源 文件 名 是 myHtmlA007. html。 


464 在 提交 表单 时 校 验 文本 框 中 的 网 址 格式 


此 实例 主要 设置 < input > 标签 的 type 属性 为 url, 从 而 实现 在 提交 表单 时 自动 校 验 用 户 在 文本 框 
中 输入 的 网 址 格式 。 当 在 浏览 器 中 显示 该 页 面 时 .如 果 在 “公司 网 站 : "文本 框 中 输入 了 错误 的 网 址 ， 
例如 “http. //www. 163. com”, 则 在 单 击 表单 的 “提交 注册 信息 ?按钮 后 将 在 出 现 错误 的 文本 框 附近 显 
示 错 误 信息 ,如 图 464-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 





5 部 分 元 来 < 
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公司 名 称 ， 阿 是 可 
公司 网 站 [hp jwww 163 com 
[让 四 请 输入 网 址 . 


图 464-1 








<!doctype html >< html >< head >< meta charset = UTF - 8></head> 
<body >< form style= "width: 400px;"> 
公司 名 称 : < input type = "text" name= "myName"/><br><br> 
公司 网 站 : < input type = "url" name= "myUrl"/><br><br> 
<button type = "submit" value = "提交 ”style = "width: 250px"> 提 交 注 册 信 息 </button > 
</form></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,url 属性 值 是 HTML5 中 < input > 标 
签 的 type 属性 的 新 值 ,该 属性 值 指明 文本 框 应 该 包含 URL 地 址 的 输入 字段 ,在 提交 表单 时 将 会 自动 
验证 该 文本 框 中 的 内 容 是 否 符 合 URL 地 址 的 标准 格式 。 

此 实例 的 源 文件 名 是 myHtmlA008. html 。 


465 ”在 提交 表单 时 校 验 文本 框 中 的 数字 范围 


此 实例 主要 设置 < input > 标签 的 type 属性 为 number, 从 而 实现 在 提交 表单 时 自动 校 验 用 户 在 文 
本 框 中 输入 的 数字 是 否 在 预 署 的 有 效 范围 内 。 当 在 浏览 器 中 显示 该 页 面 时 ,如 果 在 "年 龄 :" 文 本 框 中 
输入 的 数字 大 于 上 限 , 则 将 在 “年 龄 : "文本 框 附近 显示 如 图 465-1 所 示 的 错误 信息 ; 如 果 在 “年 龄 :" 文 
本 框 中 输入 的 数字 小 于 下 限 , 将 在 “年 龄 :" 文 本 框 附近 显示 如 图 465-2 所 示 的 错误 信息 。 有 关 此 实例 
的 主要 代码 如 下 。 
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姓名 ， 医 议 
年 前 , [ 癌 ”3S) 浓 (25-40 之 间 的 数字 ) 
| 加 全 必须 大 于 或 等 于 25. 


姓名 ， [法 
年 的, | 柯 ”3 及 (25-40 之 间 的 数字 ) 


EB 仁 必 须 小 于 或 等 于 40. 


图 465-1 图 465-2 











<! doctype html >< html >< head >< meta charset = UTF - 8></head> 
<body>< form style= "width: 400px;"> 

姓名 : < input type= "text" name = "myName"/><br><br> 

年 龄 : < input type= "number”name = "myAge”min = "25"” max = "40"/> 岁 (25- 40 之 间 的 数字 )<br><br > 
<button type= "submit”value = "提交 ”style = "width: 250px"> 提 交 注 册 信 息 </button > </form > </body > 
</html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,number 属性 值 是 HTML5 中 < input > 
标签 的 type 属性 的 新 值 , 该 属性 值 指明 文本 框 用 于 包含 数字 值 的 输入 字段 。 一 旦 将 < input > 标签 的 
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type 属性 设置 为 number, 则 应 该 参考 表 465-1 设置 <input > 标签 的 相关 属性 ,从 而 指定 文本 框 中 的 数 








字 的 有 效 范围 和 步 长 值 。 
表 465-1 设置 < input > 标签 的 相关 属性 
属 人 性 值 说 明 
max 数字 规定 允许 的 最 大 值 
min 数字 规定 允许 的 最 小 值 
step 数字 规定 合法 的 数字 间隔 (如 果 step 二 "3", 则 合法 的 数 是 一 3.0、3,6 等 ) 
value 数字 规定 默认 值 





此 实例 的 源 文件 名 是 myHtmlA009. html。 


466 ”在 文本 框 获 得 焦点 时 显示 发 光 的 边框 线 


此 实例 主要 在 CSS 样式 中 设置 文本 框 的 box-shadow 属性 ,从 而 实现 在 文本 框 获得 焦点 时 显示 发 
光 的 边框 线 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 , 单 击 任意 一 个 文本 框 , 则 将 在 该 文本 框 的 
四 周 出 现 蓝 色 的 光圈 ,如 图 466-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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用 户 名 称 : [ 
用 户 密码 : [ 





图 466-1 


<!doctype html >< html >< head ><meta charset = UTF -8> 
< style> 
input {transition: all 0. 30s ease — in - out; - webkit ~ transition: all 0.30s ease - in - out; — moz— 
transition: all 0.30s ease- in - out; border - radius: 4px; outline: none; border: #35A5E5 1px 
solid;} 
input:focus {box— shadow: 0 0 5px rgba(81, 203, 238, 1); - webkit - box — shadow: 0 0 5px rgba(81, 203, 
238, 1); — moz- box— shadow: 0 0 5px rgba(81, 203, 238, 1);} 
</style></head> 
<body >< form action="" method= "post">< label id = "myUser"> 用 户 名 称 :< input type = "text"></label > 
<br><br><1label id= "myPassword"> 用 户 密码 :< input type = "text"></label ></form></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,box-shadow: 0 0 5px rgba(81，203， 
238, 1) 用 于 为 文本 框 设置 发 光 的 边框 线 ,为 了 使 其 不 像 是 阴影 效果 而 达到 发 光 的 效果 ,这 里 采用 了 明 
亮 的 蓝 色 。 如 果 用 户 使 用 过 Twitter ,可 能 已 经 留意 到 在 输入 框 获得 焦点 后 它 的 边框 会 有 蓝 色 发 光 的 
效果 ,并 且 这 里 运用 了 transition 属性 ,使 得 发 光 效 果 有 很 平滑 的 过 渡 。 

此 实例 的 源 文件 名 是 myHtmlB045. html。 


467 ”通过 autofocus 属性 设置 当前 文本 框 


此 实例 主要 通过 设置 autofocus 属性 实现 文本 框 自动 获得 焦点 。 当 在 浏览 器 中 显示 该 页 面 时 ,由 
于 “用 户 密码 :文本 框 设置 了 autofocus 属性 .因此 该 文本 框 的 光标 处 于 闪烁 状态 ,如 图 467-1 所 示 。 











有 关 此 实例 的 主要 代码 如 下 。 
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用 户 名 称 : | 





用 户 密码 ; 








图 467-1 


<! doctype html >< html >< head >< meta charset = UTF - 8></head> 
<body >< form action = "" method = "post"> 

<label id= "myUser"> 用 户 名 称 :< input type= "text" maxlength = "20"></label><br><br><label id= 
"myPassword"> 用 户 密码 :< input type = "text"” maxlength = "11”autofocus = "autofocus"></label ></form> 
</body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,autofocus 属性 是 HTML5 新 增 的 属 
性 。 对 input( 所 有 类 型 ) select、textarea 指定 autofocus 属性 , 则 可 以 实现 让 元 素 在 页 面 加 载 后 自动 
获得 焦点 。 一 个 页 面 只 能 有 一 个 元 素 具 有 autofocus 属性 ,如 果 同 时 设置 多 个 , 则 第 一 个 生效 。 这 个 
属性 对 登录 页 面 很 有 用 ,可 提升 用 户 体验 ,有 时 登录 页 面 仅 有 用 户 名 称 和 密码 ,页 面 加 载 后 用 户 需要 
手动 定位 到 输入 框 才能 输入 ,有 了 autofocus ,在 页 面 打开 后 即 可 直接 输入 。 

此 实例 的 源 文件 名 是 myHtmlA022. html。 


468 ”通过 label 的 control 属性 访问 文本 框 


此 实例 主要 实现 通过 label 元 素 的 control 属性 访问 input 元 素 。 当 在 浏览 器 中 显示 该 页 面 时 , 单 
击 * 设 置 默认 值 ? 按 钮 , 则 将 在 “联系 电话 :" 文 本 框 中 显示 预 置 的 默认 值 "13996060872”, 如 图 468-1 所 
示 。 有 关 此 实例 的 主要 代码 如 下 。 
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联系 电话 : [13996060872 | [EV] 








图 468-1 


<!doctype html ><html ><head><meta charset = UIF -8> 
<script src= "js/jquery -3.1.1.min.js"></script >< script type = "text/javascript"> 
function setDefault(){// 设 置 默 认 值 
//var myLabel =$ ("#myLabel").get(0); 
Var myLabel = document. getElementById( 'myLabel'); 
Var myText = myLabel. control; 
myText. value ='13996060872'; } 
</script ></head> 
<body >< form action = "" method = "post"> 
< label id = "myLabel"> 联系 电话 : < input type = "text" name = "text" value ="" maxlength= "11"></label> 
< input type = "button" value = "设置 默认 值 " onclick = "setDefault()"></form></body></html > 
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上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 .label 元 素 的 control 属性 是 HTML5 
新 增 的 属性 ,通过 该 属性 可 以 简单 地 实现 访问 label 元 素 嵌 套 的 子 元 素 。 在 此 实例 中 input 元 素 是 
label 元 素 嵌 套 的 子 元 素 ,因此 label 元 素 的 control 属性 对 应 的 即 是 input 元 素 。 

此 实例 的 源 文件 名 是 myHtmlA021. html。 


469 ”使 段落 文本 实现 类 似 文本 框 的 编辑 功能 


此 实例 主要 通过 设置 <p > 标签 的 contenteditable 属性 使 段落 文本 实现 类 似 于 文本 框 的 编辑 功 

能 。 当 在 浏览 器 中 显示 该 页 面 时 ,段落 文本 中 的 “内 容 简介 :” 是 不 可 编辑 的 ,如 图 469-1 所 示 ; 单 击 

“允许 编辑 内 容 简介 ”按钮 “内容 简介 :” 则 处 于 可 编辑 状态 ,因此 可 以 在 此 段落 文本 中 直接 进行 编辑 ， 
如 图 469-2 所 示 ; 单 击 “ 禁 止 编 辑 内 容 简介 ”按钮 , 则 “内 容 简 介 : "恢复 为 不 可 编辑 状态 

百 -= 口 x 
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内 容 简介 ， > 内 一 部 中 四 粘 各 由 守 为 中 
国 “ 四 大 名 著 ” 之 一 。 唐 朝 法 师 西天 取经 的 故 


事 ,表现 了 i 。 


允许 编辑 内 容 简介 | 划 止 编辑 内 硅 简 介 








图 469-1 


有 关 此 实例 的 主要 代码 如 下 。 





<!doctype html >< html >< head >< meta charset = UTF -8> 
<script src= "js/jquery- 3.1.1.min. js"></script>< script> 
$ (document). ready(function() { 
$('#myBtnEnable'). click(function() { // 允 许 编辑 内 容 简介 
$ ('#myContent'). prop("contenteditable", true); 
$ ('#myContent').css("background", "lightgray"); 
$('#myContent'). focus( ); 
D); 
$ ('#myBtnDisable'). click(function() { // 禁 止 编辑 内 容 简介 
$ ('#myContent'). prop("contenteditable", false); 
$ ('#myContent').css("background", "white"); });}); 
</script ></head> 
<body>< div style = "width:400px"> 
<p id= "myContent”> 内 容 简介 : < 西游 记 * 是 一 部 中 国 古典 神 魔 小 说 , 为 中 国 "四 大 名 著 " 之 一 。 书 中 讲述 唐 
朝 法 师 西 天 取经 的 故事 ,表现 了 惩 恶 扬 善 的 古老 主题 。</p> 
< input class= "input”" type= "button” value= "允许 编辑 内 容 简介 " id= "myBtnEnable”style = "width: 
195px"/> 
<input class= "input" type="button” value= "禁止 编辑 内 容 简介 "id = "myBtnDisable" style = "width: 
195px"/></div></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , $(' # myContent'). prop 
("contenteditable" ,true) 用 于 设置 < p > 标签 的 contenteditable 属性 为 true, 即 允许 编辑 <p > 标签 的 内 
容 ; $$('#myContent'). prop("contenteditable" ,false) 用 于 设置 < p > 标签 的 contenteditable 属性 为 
false, 即 禁止 编辑 < p > 标签 的 内 容 。 在 HTML5 中 ,contenteditable 属性 规定 是 否 可 编辑 元 素 的 内 

容 , 该 属性 的 可 用 属性 值 如 表 469-1 所 示 。 


第 5 部 分 >》 





表 469-1 contenteditable 属性 的 可 用 值 








值 说 明 
true 规定 可 以 编辑 元 素 内 容 
false 规定 无 法 编辑 元 素 内 容 





此 实例 的 源 文件 名 是 myHtmlA002. html。 


470 在 单个 段落 中 使 用 省 略 号 代替 超 长 文本 


此 实例 主要 通过 设置 < p > 标签 的 text-overflow 属性 为 ellipsis 实现 在 单个 段落 中 使 用 省 略 号 代 
替 超 长 文本 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,第 一 个 和 倒数 第 二 个 段落 由 于 内 容 超 长 ， 
因此 在 末尾 自动 显示 省 略 号 ,如 图 470-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
百 - 5 
/ D myHemlB126 html x \W 
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x 














图 470-1 


<!doctype html >< html >< head><meta charset = "UTF - 8"> 
<style type= "text/css"> 
Pp { text - overflow: ellipsis; white— space: nowrap; width: 350px; overflow: hidden; 
padding: 8px; margin: 10px; background: lightblue; border - radius: 5px; font - weight: bold; } 
</style></head> 
<body ><p> 架 构 即 未 来 : 现代 企业 可 扩展 的 web 架构 ,流程 和 组 织 ( 原 书 第 2 版 )</p> 
<p> JavaScript DOM 编程 艺术 </p><p> Python 编程 从 入 门 到 实践 </p> 
<p> 深 入 分 析 Java Web 技术 内 幕 </p> 
<p> 数 据 结构 与 算法 分 析 : Java 语 言 描述 ( 原 书 第 3 版 )</p> 
<p> 用 户 体验 要 素 : 以 用 户 为 中 心 的 产品 设计 </p></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , text-overflow 属性 规定 当 文本 溢出 
包含 元 素 时 应 如 何 处 置 , 该 属性 的 语法 格式 如 下 。 

text - overflow: clip|ellipsis| string 

其 中 ,clip 表示 直接 剪 掉 超 长 的 文本 ; ellipsis 表示 使 用 省 略 号 来 代 蔡 超 长 部 分 的 文本 ， string 表 


示 使 用 给 定 的 字符 串 来 代替 超 长 部 分 的 文本 。 
此 实例 的 源 文件 名 是 myHtmlB126. html。 
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471 在 可 深 动 段落 底部 添加 渐变 逻 明 谈 旱 层 


此 实例 主要 通过 设置 < div > 元 素 的 -webkit-mask-image 属性 实现 在 滚动 段落 的 底部 添加 渐变 透 
明 的 遮 罩 层 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,无 论 是 否 滑动 滚动 条 ,在 段落 的 底部 始终 
有 一 个 渐变 透明 的 遮 四 层 , 如 图 471-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
VD mhemiazoahenl x\ 


面 - 0 x 
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图 471-1 


<!doctype html >< html >< head ><meta charset = "UTF - 8"> 
<style type= "text/css"> 
.myBox { display: inline- block; width: 200px; height: 218px; padding: 15px; margin: 20px 100px 20px 
100px; background - color: #FFF; border: lpx solid # EEE; overflow: auto; position: relative; border— 
radius: 2px; border: black solid lpx; - webkit — mask — image: linear - gradient (to bottom, rgba(0, 0, 0, 
1) 70%, rgba(0, 0, 0, 0) 100% ); } 
body { background: lightblue; } 
</style></head> 
<body > <div class = "myBox"> 天 宝 元 年 (公元 742 年 ), 由 于 玉 真 公主 和 贺 知 章 的 交口 称赞 ,玄宗 看 了 李白 的 诗 
赋 , 对 其 十 分 仰 莫 , 便 召 李白 进 宫 。 李 和 白 进 宫 朝见 那天 ,玄宗 降 禁 步 迎 ," 以 七 宝 床 赐 食 于 前 ,亲手 调 闽 "。 玄 宗 问 
到 一 些 当世 事务 , 李白 赁 半生 饱学 及 长 期 对 社会 的 观察 ,胸有成竹 , 对 答 如 流 。 玄 宗 大 为 鞠 赏 , 随即 令 李白 供奉 
翰林 ,职务 是 给 皇上 写 诗 文娱 乐 , 陪 侍 皇 帝 左右 。 玄 宗 每 有 宴请 或 郊游 , 必 命 李 白 侍从 ,使 用 他 敏捷 的 诗 才 , 赋 诗 
纪实 。 虽 非 记功 ,也 将 其 文字 流传 后 世 , 以 盛况 向 后 人 专 示 。 李 白 受 到 玄宗 如 此 的 宠信 , 同僚 不 胜 艳 闵 , 但 也 有 
人 因此 而 产生 了 嫉 恨 之 心 。</div ></body> </html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,-webkit-mask-image: linear-gradient 
(to bottom, rgba(0, 0, 0, 1) 70%, rgba(0. 0, 0, 0) 100%) 表 示 在 div 元 素 的 垂直 方向 的 70% 处 开 
始 至 100% 处 结束 创建 一 个 渐变 透明 的 遮 蛙 层 。 在 CSS 中 ,linear-gradient( ) 方 法 用 于 以 线性 渐变 的 
方式 创建 图 像 ,如 果 想 创建 以 对 角 线 方式 渐变 的 图 像 , 可 以 使 用 to top left 这 样 的 多 关键 字 方 式 来 实 
现 ,默认 的 渐变 方向 只 能 绘制 一 个 最 简单 的 线性 渐变 。linear-gradient() 方 法 的 语法 格式 如 下 。 

<linear - gradient > = linear - gradient ([ [ <angle> | to < side - or - corner > ] ,]? < color - stop> 

[, <color- stop>]+) 

<side—or- corner>= [left | right] || [top | bottom] 

<color - stop>=<color>[ <length> | <percentage> ]? 
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其 中 ,< angle > 表示 用 角度 值 指定 渐变 的 方向 (或 角度 ). 取 值 为 to left 表示 设置 渐变 为 从 右 到 
左 , 相 当 于 270deg; 取 值 为 to right 表示 设置 渐变 从 左 到 右 , 相 当 于 90deg; 取 值 为 to top 表示 设置 渐 
变 从 下 到 上 ,相当 于 0deg; 取 值 为 to bottom 表示 设置 渐变 从 上 到 下 ,相当 于 180deg。 这 是 默认 值 ,等 
同 于 留 空 不 写 。 

< colorstop > 用 于 指定 渐变 的 起 止 颜色 。< color > 指定 颜色 。< length > 用 长 度 值 指定 起 止 色 的 
位 置 ,不 允许 为 负 值 。< percentage > 用 百分比 指定 起 止 色 的 位 置 。 下 面 是 linear-gradient() 方 法 常用 
的 几 种 渐变 形式 。 

linear- gradient( #FFF, #333); 

linear - gradient (to bottom, #FFF, #333); 

linear ~ gradient (to top, #333,##FFF); 


linear ~ gradient (180deg,#FFF， 提 333); 
linear ~ gradient (to bottom, FFF 0%, #333 100% ); 


此 实例 的 源 文 件 名 是 myHtmlB208. html。 


472 ”使 用 textarea 的 拖 虹 标志 实现 CSS 交互 


此 实例 主要 通过 使 用 textarea 的 拖 忠 标志 实现 纯 CSS 交互 , 即 图 片 的 滑 进 与 滑 出 。 当 在 Google 
Chrome 浏览 器 中 显示 该 页 面 时 , 拖 动 右 侧 的 红色 方 框 即 有 一 张 图 片 滑 进 、. 滑 出 ,如 图 472-1 所 示 。 有 
关 此 实例 的 主要 代码 如 下 。 











中 myHtmlB175html x 
© Dfile///D/myWorW/myHtmlB176.htm| 它 三 











<!doctype html >< html >< head >< meta charset = UTF -8> 
< style type = "text/css"> 

.box { width: 450px; position: relative; margin - left: auto; margin - right: auto; overflow: hidden; 
border - radius: 10px;} 

.cover { height: 100%; position: absolute; top: 0; right: — 20px; 

background: url (img/B099A. jpg) no - repeat center; } 

. cover textarea { width: 20px; height: 20px; margin - top: 160px; border: Opx; padding: 0; opacity:0; 

cursor: e- resize; position:relative; z- index:1; left: - 20px;max— width:495px; } 


/* 红 色 方 框 代替 拖 奥 标志 */ 
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. instead { width: 20px; height: 20px; background— color: red; position: absolute; right:10px; top: 
160px; border - radius: 2px; } 

. instead: :after { content:' 个 拖 移 这 个 '; line- height: 1; margin- top: 26px; 

right: 5px; color: #FFF; font - style: normal; position:absolute;} 
</style></head> 

<body>< center>< div class = "box">< img src = "img/B099B. jpg" /> 

<div class= "cover">< textarea ></textarea ></div> 

<iclass="instead"></i></div></center ></body></html> 





上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,max-width:495px 表示 最 大 滑动 宽 
度 , 以 防止 抑 中 时 越界 ,否则 图 片 在 向 左 拖 中 时 ,如 果 图 片 的 右边 界 拖 出 盒子 的 左边 框 , 则 无 法 再 拖 回 
图 片 。 在 此 实例 中 拖 忠 功能 看 似 与 textarea 元 素 无 关 , 但 实际 上 使 用 了 textarea 元 素 的 resize 功能 ， 
如 果 设 置 resize:none, 则 拖 电 功能 消失 。 

此 实例 的 源 文件 名 是 myHtmlB176. html。 


473 ”获取 在 textarea 中 使 用 鼠标 选择 的 文本 


此 实例 主要 通过 window. getSelection( ) 方 法 实现 获取 用 户 在 textarea 中 使 用 鼠标 选择 的 文本 内 
容 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,如 果 使 用 鼠标 在 textarea 中 选择 “世界 ”, 松 开 鼠 标 
则 将 弹出 一 个 消息 框 显示 选择 的 文本 ,如 图 473-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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1945 年 ， 第 二 次 氏 革 让 大 战 接近 尾声 ， 作 为 那 亚 轴 心 重要 成 员 的 日 ~ 
本 ,其 中 张 态势 已 成 台大 之 来 是 年 ， 决 定 战局 走向 的 冲 晶 名 战 名 


工 唐 藉 - 张 工 上 下 寺 二 网 权 的 六 国 十 兵 址 涯 征 : 由 如- 演 科 他 


filey//D/myWork/myHtmlA113.html 上 的 网 页 显示 : 


迁 中 的 文本 为 : 世界 
舞 止 此 页 再 旦 示 对 话 杠 . 


Lm | 











图 473-1 


<!doctype html >< html ><head>< meta charset = "UTF - 8"> 
<script src= "js/jquery - 3.1.1.min. js"></script >< script type = "text/javascript"> 
$ (function() { 
$('#myBrief'). select(function() {// 获 取 选 中 的 文本 内 容 
var myObj = window. getSelection( ); 
var myText = myObj. toString(); 
alert(' 选 中 的 文本 为 : "+ myText); });}); 
</script ></head> 
<body ><textarea rows = "10" cols = "55" id = "myBrief">1945 年 ,第 二 次 世界 大 战 接近 尾声 ,作为 邪恶 轴 心 重 
要 成 员 的 日 本 ,其 嚣张 态 势 已 成 强 弩 之 未 。 是 年 ,决定 战局 走向 的 冲绳 岛 战役 拉 开 序幕 ,成 千 上 万 斗志 昂扬 的 美 
国 大 兵 被 派 往 冲 绳 ,等 待 他 们 的 则 是 敌 军 重兵 防守 .凶险 异常 的 钢 锡 岭 。 在 这 群 人 中 间 , 却 有 一 个 不 愿 拿 起 武器 
的 军医 。 他 名 叫 戴 斯 蒙 德 - 道 斯 (安德鲁 -加 菲尔德 Andrew Garfield 饰 ), 来 自 美国 的 弗吉尼亚 。 太 平 洋 战争 爆 
发 之 际 ,瘦弱 的 戴 斯 蒙 德 志愿 成 为 救死扶伤 的 军医 而 应 征 入伍 。 可 因 童 年 和 家 庭 的 原因 ,他 始终 不 愿 拿 起 枪支 操 
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练 ,为 此 宁愿 背 上 拒 服 兵役 的 罪名 被 送 上 军事 法 庭 。 几 经 周折 , 戴 斯 蒙 德 最 终 和 战友 来 到 了 钢 饮 岭 。 枪 林 弹 雨 , 
转瞬 之 间 无 数 人 应 声 倒 地 。 在 信仰 和 信念 的 支持 下 , 戴 斯 蛇 德 仅 赁 一 己 之 力 揉 救 了 数 十 条 濒 死 的 生命 … … 本 片 
根据 真人 真 事 改 编 。</textarea> 

</body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,< textarea > 标签 是 定义 多 行 的 文本 
输入 控件 ,在 文本 区 中 可 容纳 无 限 数量 的 文本 ,用 户 可 以 通过 cols 和 rows 属性 来 规定 textarea 的 尺 
寸 。 使 用 window. getSelection() 方 法 则 可 以 获取 用 户 在 < textarea > 中 使 用 鼠标 选择 的 文本 内 容 , 该 
方法 的 返回 值 即 是 选中 的 文本 。 

此 实例 的 源 文件 名 是 myHtmlA113. html。 


474 通过 禁止 选择 文本 来 实现 禁止 复制 内 容 


此 实例 主要 通过 设置 -webkit-user-select 属性 为 none 来 禁止 用 户 选择 文本 ,从 而 实现 禁止 用 户 
复制 网 页 内 容 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,上 面 一 行 “下 面 这 段 演示 文本 禁止 复制 
粘贴 ?是 可 以 进行 复制 粘贴 的 ,下 面 的 演示 文本 则 根本 无 法 使 用 鼠标 和 键盘 进行 选择 ,因此 也 无 法 实 
现 复制 粘贴 ,如 图 474-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 











西 本 oD x 
[myHemlB197 heml x 
人 3 C Dfile//D/myWorkK/myHtmlB197.htn 窜 | 三 
下 有 ES 到 了 上 复制 站 由 





图 474-1 


<! doctype html >< html >< head >< meta charset = "UTF - 8"> 
< style type = "text/css"> 
p { margin: Spx; width: 395px; padding: 10px; border: lpx solid # BFBFBF; background - color: 
lightseagreen; box - shadow: 2px 2px 3px gray; - webkit— user— select: none; } 
div { width: 395px; text -align: center;} 
</style></head> 
<body ><div> 下 面 这 段 演示 文本 禁止 复制 粘贴 </div><p> 春 节 , 是 农历 正月 初 一 ,又 叫 阴历 年 ,俗称 "过 年 "。 这 
是 我 国民 间 最 隆重 .最 热闹 的 一 个 传统 节日 。 春 节 的 历史 很 悠久 , 它 起 源 于 殷 商 时 期 年 头 岁 尾 的 祭神 祭 祖 活动 。 
按照 我 国 农历 , 正月 初 一 古称 元 日 .元 展 、 元 正 、 元 朔 .元 旦 等 ,俗称 年 初 一 ,到 了 民国 时 期 , 改 用 公历 , 公历 的 一 月 
一 日 称 为 元 旦 ,把 农历 的 一 月 一 日 叫 春节 。</p></body></html > 





上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,-webkit-user-select; none 用 于 禁止 
用 户 选择 文本 。 在 CSS3 中 ,user-select 属性 用 于 设置 或 检索 是 否 人 允许 用 户 选中 文本 ,该 属性 的 语法 
格式 如 下 。 


user - select: none | text | all | element 


其 中 ,各 属性 值 的 意义 如 下 。 
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(1) none: 该 属性 值 表示 文本 不 能 被 选择 。 

(2) text: 该 属性 值 表示 可 以 选择 文本 ,此 为 默认 值 。 

(3) all: 该 属性 值 表示 当 所 有 内 容 作为 一 个 整体 时 可 以 被 选择 。 如 果 双 击 或 者 在 上 下 文 上 单 击 
子 元 素 , 那 么 被 选择 的 部 分 将 是 以 该 子 元 素 向 上 回溯 的 最 高 祖先 元 素 。 

(4) element: 该 属性 值 表示 可 以 选择 文本 .但 选择 范围 受 元 素 边界 的 约束 。 

此 实例 的 源 文件 名 是 myHtmlB197. html。 


475 ”通过 设置 oncopy() 的 返回 值 禁止 复制 内 容 


此 实例 主要 设置 页 面 body 的 oncopy() 方 法 的 返回 值 为 false, 从 而 实现 禁止 用 户 将 选择 的 页 面 
内 容 复制 到 剪贴 板 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,如 果 使 用 鼠标 在 页 面 中 选择 部 分 
文字 ,然后 再 右 击 选择 的 部 分 文字 ,在 弹出 的 快捷 菜单 中 选择 "复制 (C) "命令 , 则 将 弹出 一 个 消息 框 ， 
提示 “此 页 面 内 容 禁 止 复制 1”, 如 图 475-1 所 示 。 当 然 ,在 其 他 文本 编辑 器 (例如 记事 本 ) 中 无 法 粘贴 此 
部 分 文字 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 475-1 


<! doctype html >< html>< head >< meta charset = "UTF - 8"> 

< style type = "text/css"> 

p { margin: Spx; width: 395px; padding: 10px; border: lpx solid # BFBFBF; background — color: 

lightseagreen; box — shadow: 2px 2px 3px gray; } 

</style></head> 
<body oncopy= "alert(' 此 页 面 内 容 禁 止 复制 !'); return false; "> <p> 下 面 这 段 演示 文本 禁止 复制 粘贴 : 春 
节 , 是 农历 正月 初 一 ,又 叫 阴历 年 ,俗称 "过 年 "。 这 是 我 国民 间 最 隆重 、 最 热闹 的 一 个 传统 节日 。 春 节 的 历史 很 
悠久 , 它 起 源 于 股 商 时 期 年 头 岁 尾 的 祭神 祭 祖 活动 。 按 照 我 国 农历 ,正月 初 一 古称 元 日 .元 展 、 元 正 、 元 朔 . 元 旦 
等 ,俗称 年 初 一 ,到 了 民国 时 期 , 改 用 公历 ,公历 的 一 月 一 日 称 为 元 旦 ,把 农历 的 一 月 一 日 叫 春节 。</p> 
</body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 .< body oncopy 一 "alert(' 此 页 面 内 容 
禁止 复制 1') ; return false;"> 表 示 禁 止 复制 选择 的 页 面 文字 内 容 .如果 将 oncopy() 方 法 的 返回 值 设置 
为 true, 例 如 < body oncopy 二 ”return true;">, 则 可 以 正常 复制 粘贴 选择 的 部 分 文字 。 

此 实例 的 源 文件 名 是 myHtmlB314. html。 
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476 ”允许 或 禁止 超 长 的 数字 或 者 单词 跨行 显示 


此 实例 主要 通过 设置 单元 格 的 word-break 属性 实现 允许 或 禁止 超 长 的 数字 或 者 单词 在 表格 的 
单元 格 中 跨行 显示 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 .表格 的 第 2 列 第 2 行 由 于 允许 一 
个 英文 单词 或 超 长 数字 跨行 显示 , 因此 had、several、Building、Province 等 单词 和 数字 
20000000000000 都 在 两 行 中 显示 ; 表格 的 第 2 列 第 3 行 由 于 禁止 一 个 英文 单词 或 超 长 数字 跨行 显示 
(这 也 是 默认 值 ) ,因此 没有 超 长 数字 和 单词 跨行 显示 ; 如 果 在 单元 格 中 的 一 个 数字 或 单词 不 能 在 一 行 
中 显示 , 则 会 另 起 新 行 显示 ,如 图 476-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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Be interested in research and survey, h 
ad ever organized a team and gone to se 
允许 一 个 英文 单词 或 超 长 ”veral villages to survey about the Buil 
数字 跨行 显示 ding a new socialist countryside 200000 
00000000 in Wuming County, Guangxi Prov 
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Be interested in research and survey, 
had ever organized a team and gone to 
禁止 一 个 英文 单词 或 超 长 ”several villages to survey about the 
数字 跨行 显示 Building a new socialist countryside 
20000000000000 in Yuming County, 
Guangxi Province 
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图 476-1 


<! doctype html >< html >< head >< meta charset = "UTF - 8"> 
< style type = "text/css"> 
.table { margin: 5px 0 25px;border: 1px solid #CCC; border - collapse: collapse;} 
.table td, .table th {border: 1px solid #DDD; padding: 5px 10px;} 
.table th {background - color: ##FOFOFO0;} 
.table fixed {table - layout: fixed;} 
/* 使 用 省 略 号 代替 单行 超 长 文本 */ 
.cell { white - space: nowrap; overflow: hidden; text - overflow: ellipsis;} 
/* 允许 单词 或 大 数字 跨行 显示 * / 
.breakLine {word- break: break -all;} 
</style></head> 
<body> 
<table class = "table table fixed" width= "100%" cellspacing= "0" cellpadding = "0"> 
<tr><th width= "30% "> 特性 </th><th width= "50% "> 演示 </th></tr> 
<tr><td> 在 单行 中 使 用 省 略 号 代替 超 长 内 容 </td> 
<td><div class = "cell"> Responsibilities included word processing，data entry, filing, and 
somet imes bookkeeping </div></td></tr> 
<tr>< td> 允 许 一 个 英文 单词 或 超 长 数字 跨行 显示 </td> 
<td><div class = "breakLine"> Be interested in research and survey, had ever organized a team and 
gone to several villages to survey about the Building a new socialist countryside 20000000000000 in Wuming 
County, Guangxi Province </div> 
</td></tr> 
<tr><td> 禁 止 一 个 英文 单词 或 超 长 数字 跨行 显示 </td> 
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<td>< div > Be interested in research and survey, had ever organized a team and gone to several 
villages to survey about the Building a new socialist countryside 20000000000000 in Wuming County, Guangxi 
Province </div ></td></tr></table> </body></html > 





上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,text-overflow 属性 规定 当 文本 溢出 
包含 元 素 时 应 如 何 处 理 , 如 果 该 属性 值 为 ellipsis, 则 使 用 省 略 号 来 代表 超 长 部 分 的 文本 。word-break 
属性 规定 自动 换行 的 处 理 方法 ,该 属性 的 语法 格式 如 下 。 


word — break: normal|break - all|keep— all 


其 中 ,属性 值 normal 表示 使 用 浏览 器 默认 的 换行 规则 ; 属性 值 break-all 表示 允许 在 单词 内 换 
行 ; 属性 值 keep-all 表示 只 能 在 半角 空格 或 连 字符 处 换行 。 
此 实例 的 源 文 件 名 是 myHtmlB142. html。 


477 设置 元 素 中 所 有 单词 的 首 字母 是 否 大 写 


此 实例 主要 通过 设置 元 素 的 text-transform 属性 控制 元 素 中 的 所 有 单词 的 首 字母 是 否 大 写 。 当 
在 Google Chrome 浏览 器 中 显示 该 页 面 时 , 单 击 * 首 字母 大 写 ? 按 钮 , 则 下 面 显示 的 每 个 英文 单词 的 首 
字母 均 大 写 , 如 图 477-1 所 示 ; 单 击 * 全 部 大 写 " 按 钮 , 则 下 面 显示 的 每 个 英文 单词 的 所 有 字母 均 大 写 ， 
如 图 477-2 所 示 ; 单 击 “ 全 部 小 写 " 按 钮 , 则 下 面 显 示 的 每 个 英文 单词 的 所 有 字母 均 小 写 ,如 图 477-3 
所 示 。 有 关 此 实例 的 主要 代码 如 下 。 





Chongqing Is The Only Municipality Directly Under 
The Central Government In Yestern China，Located 
On The Upper Reaches Of The Yangtze 

River, Chongqing Is Southwest China' s Biggest 
Industrial And Commercial Center. 
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CHONGQING IS THE ONLY MUNICIPALITY DIRECTLY UNDER chongqing is the only mmicipality directly under 
THE CENTRAL GOVERNMENT IN WESTERN CHINA. LOCATED the central government in western china. located 


ON THE UPPER REACHES OF THE YANGTZE on the upper reaches of the yangtze 
RIVER, CHONGQING IS SOUTHWEST CHINA  S BIGGEST river, chongqing is southwest china's biggest 
INDUSTRIAL AND COMMERCIAL CENTER. industrial and commercial center. 





图 477-2 图 477-3 





5 部 分 元素》 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
< script src= "js/jquery - 3.1.1.min. js"></script>< script language = "javascript"> 
$ (document). ready(function() { 


$ ("#myBtnCapitalize").click(function() { // 首 字母 大 写 
$ ("div").css("text - transform", "capitalize"); 
D; 
$ ("#myBtnUppercase"). click(function() { // 全 部 大 写 
$ ("div").css("text — transform", "uppercase"); 
DD); 
$ ("#myBtnLowercase"). click( function() { // 全 部 小 写 
$ ("div").css("text — transform", "lowercase"); });}); 
</script> 
<style> 


div { display: inline - block; width: 400px; height: 150px; margin: Spx; background - color: # FFF; 
border: 1px solid #EEE; box - shadow: 5px 5px 5px 1px #999,0 0 40px rgba(0, 0, 0, 0.06) inset; position: 
relative; border - radius: 5px; padding: 10px; text - transform:none; } 

body {background - color: lightgray;} 

input {width:128px; margin:5px;} 

</style></head> 
<body><p>< input type = "button" value = " 首 字母 大 写 " id = "myBtnCapitalize"/> 
< input type = "button" value = "全 部 大 写 " id = "myBtnUppercase"/> 
< input type = "button” value = "全 部 小 写 " id = "myBtnLowercase"/></p> 
<div><h3 > 重庆 简介 </h3 > Chongqing is the only municipality directly under the central government in 
western China. Located on the upper reaches of the Yangtze River,Chongqing is southwest China's biggest 
industrial and commercial center. </div></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , $ ("div"). css("text- transform"， 
"capitalize") 用 于 设置 div 块 中 的 所 有 单词 的 首 字母 均 大 写 。 在 CSS3 中 ,text-transform 属性 用 于 检 
索 或 设置 对 象 中 文本 的 大 小 写 ,textrtransform 属性 的 语法 格式 如 下 。 


text ~ transform: none | capitalize | uppercase | lowercase | full- width 


其 中 ,none 表示 无 转换 ; capitalize 表示 将 每 个 单词 的 第 一 个 字母 转换 成 大 写 ; uppercase 表示 将 
每 个 单词 转换 成 大 写 ; lowercase 表示 将 每 个 单词 转换 成 小 写 ; full-width 表示 将 所 有 字符 转换 成 
fullwidth 形式 ,如 果 字 符 没有 相应 的 fullwidth 形式 ,将 保留 原样 .这 个 值 通常 用 于 排版 拉丁 字符 和 数 
字 等 表意 符号 。 

此 实例 的 源 文 件 名 是 myHtmlB087. html。 


478 ”设置 段落 中 的 部 分 文字 是 否 带 下 画 线 


此 实例 主要 设置 元 素 的 text-decoration 属性 为 underline( 即 下 画 线 ) ,并 设置 子 元 素 的 display 属 
性 为 inline-block, 从 而 实现 段落 中 的 部 分 文字 有 下 画 线 .部 分 文字 没有 下 画 线 。 当 在 Google Chrome 
浏览 器 中 显示 该 页 面 时 ,“ 乐 山大 佛 ” 标 题 带 下 面 线 , 内 容 没 有 下 面 线 (但 它们 都 在 一 个 p 元 素 内 ) ;“ 大 
足 石刻 "标题 和 内 容 均 有 下 画 线 (它们 也 都 在 一 个 p 元 素 内 ) .如 图 478-1 所 示 。 有 关 此 实例 的 主要 代 
码 如 下 。 





<! doctype html >< html ><head><meta charset = "UTF - 8"> 
< style> 
div {display: inline - block; width: 400px; height: 270px; margin: 10px; background - color: # FFF; 
border: 1px solid # EEE; box— shadow: 5px 5px 5px 1px #999, 0 0 40px rgba(0, 0, 0, 0.06) inset; position: 
relative; border - radius: 5px;} 
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p { padding- left: 15px; padding- right: 10px;font - size: 16px; font - family: 华文 楷体 ;color:black; 
text - decoration: underline;} 





p span {display: inline- block;} 
body { background— color: lightgray;} 
</style></head> 

<body><div><p> 乐 山大 佛 <span> 又 名 凌云 大 佛 , 位 于 四 川 省 乐山 市 南 岷 江东 岸 凌云 村 侧 , 涉 大 渡河 .青衣 江 和 
岷江 三 江 汇流 处 。 大 佛 为 弥 勤 佛 坐 像 , 通 高 71 米 , 是 中 国 最 大 的 一 尊 摩 崖 石刻 造像 。</span></p> 

<p> 大 足 石刻 位 于 中 国 重庆 大 足 区 境内 , 距 重庆 主 城 九 区 167 公里 ,有 74 处 5 万 余 尊 宗 教 石刻 造像 。 它 是 
唐 末 、 宋 初时 期 的 宗教 摩崖 石刻 , 以 佛教 题材 为 主 , 颂 、 道 教 造 像 并 陈 , 尤 以 北山 摩崖 造像 和 宝 顶 山 摩崖 造像 为 
著 。 北 山 摩崖 造 像 长 约 三 百 多 米 ,是 世界 文化 遗产 。</p></div></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,p span {display: inline-block;} 用 于 
将 对 象 呈现 效果 控制 在 一 行内 ,注意 实例 在 制造 这 种 效果 时 是 另 起 一 行 ; textrdecoration: underline 
用 于 为 元 素 添加 下 画 线 。 在 CSS3 中 , text-decoration 属性 规定 添加 到 文本 的 修饰 ,修饰 的 颜色 由 
color 属性 设置 。 这 个 属性 允许 对 文本 设置 某 种 效果 ,例如 添加 下 画 线 。 如 果 后 代 元 素 没 有 自己 的 装 
饰 ,在 祖先 元 素 上 设置 的 装饰 会 延伸 到 后 代 元 素 中 。text-decoration 属性 的 可 选 值 包括 none( 默 认 
值 ,定义 标准 的 文本 )、underline( 定 义 文本 下 的 一 条 线 )、overline( 定 义 文本 上 的 一 条 线 )、line-through 
(定义 穿 过 文本 的 一 条 线 )、blink( 定 义 闪烁 的 文本 )、inherit( 规 定 应 该 从 父 元 素 继承 text-decoration 
属性 值 )。 

此 实例 的 源 文件 名 是 myHtmlB086. html。 
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和 至 山 友人 
又 名 流 云 大 佛 ， 位 于 四 川 有 乐山 市 南 眶 江东 府 演 云 赴 
便 ， 漳 大 渡河 、 青 家 江 和 央 江 三 江 汇 流 处 。 大 佛 为 弥 
勒 佛 坐 像 ， 通 高 71 米 ， 是 中 国 最 大 的 一 得 摩 度 石刻 千 
像 。 








图 478-1 


479 对 段落 中 的 部 分 文字 添加 自 定 义 的 下 画 线 


此 实例 主要 通过 定制 span 元 素 的 border-bottom-color、 border-bottom-style、border-bottom- 
width 等 属性 实现 对 段落 中 的 部 分 文字 添加 自 定义 的 下 画 线 。 当 在 Google Chrome 浏览 器 中 显示 该 


页 面 时 ,段落 中 的 所 有 名 字 下 面 均 有 一 条 红色 的 下 画 线 ,如 图 479-1 所 示 。 有 关 此 实例 的 主要 代码 
如 下 。 





go A 





| 百 这 
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曾 宾 斯 坦 生来 赋 有 灵 二 的 十 只 手指 ， 读 谱 能 力 之 强 也 是 超群 的 。 
他 的 演奏 充满 炽热 的 情感 和 充沛 的 精力 ， 流 利 酒 脱 而 又 布局 严 

说 ， 有 时 又 细 贼 而 语 于 诗意 。 霍 洛 维 蒋 是 20 世 纪 最 令 人 瞩目 的 
大 钢琴 家 ， 技 巧 高 起， 举世 无 双 。 他 的 演奏 技巧 辉煌 而 潇 酒 ， 音 


乐 更 趋向 深刻 完美 ， 表 现 手段 更 丰富 。 毛里 齐 奥 . 流利 尼 , 意 
大 利 钢琴 家 ，1942 年 出 生 ，9 岁 首次 公演 ，1959 年 毕业 于 米兰 音 
乐 学 院 ， 次 年 参加 第 六 届 华 沙 国际 肖邦 钢琴 大 赛 ， 夺 得 第 一 ， 由 
此 莫 声 国际 乐坛 。 





图 479-1 


<! doctype html >< html >< head >< meta charset = "UTF - 8"> 
<style> 

/* 绘制 阴影 框 * / 

div { display: inline - block;width: 450px; height: 250px; padding: 15px; margin: 10px; background — 
Color: #3FFF;border: 1px solid # EEE; box— shadow: 5px 5px 5px 1px #999, 0 0 40px rgba(0, 0, 0, 0.06) 
inset; position: relative; border - radius: 5px;} 

body { background - color: lightgray;} 

/* 取消 段落 默认 的 下 夯 线 属性 * / 

p{ line— height: 30px; text— decoration: none; } 

/* 定 制 下 画 线 的 风格 * / 

span { border - bottom - color: red; border - bottom - style:solid; border - bottom - width: 3px; padding 
一 bottom: Spx; } 

</style></head> 
<body><div><p><span> 鲁 宾 斯 坦 </span> 生 来 赋 有 灵敏 的 十 只 手指 , 读 谱 能 力 之 强 也 是 超群 的 。 他 的 演奏 充 
满 炽热 的 情感 和 充沛 的 精力 ,流利 洒脱 而 又 布局 严谨 ,有 时 又 细腻 而 富 于 诗意 。< span > 替 洛 维 芯 </span > 是 20 
世纪 最 令 人 瞩目 的 大 钢琴 家 ,技巧 高 超 ,举世 无 双 。 他 的 演奏 技巧 辉煌 而 潇洒 ,音乐 更 趋向 深刻 完美 ,表现 手段 
更 丰富 。< span > 毛里 齐 奥 . 波 利 尼 </span >, 意大利 钢琴 家 ,1942 年 出 生 ,9 岁 首次 公演 , 1959 年 毕业 于 米兰 音乐 
学 院 , 次 年 参加 第 六 届 华 沙 国际 肖邦 钢琴 大 赛 , 夺 得 第 一 ,由 此 慢 声 国际 乐坛 。</p></div></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,< span > 元 素 被 用 来 组 合 文档 中 的 行 
内 元 素 ; border-bottom-color 属性 用 于 设置 元 素 的 下 边框 颜色 ,该 属性 只 能 定义 纯色 ,而 且 只 有 当 边 
框 的 样式 是 一 个 非 none 或 hidden 的 值 时 边框 才 可 能 出 现 ; border- bottom-width 属性 用 于 设置 元 素 
的 下 边框 的 宽度 ,只 有 当 边 框 样式 不 是 none 时 才 起 作用 ,如 果 边 框 样式 是 none ,边框 宽度 实际 上 会 重 
置 为 0; border-bottom-style 属性 用 于 设置 元 素 的 下 边框 样式 ,该 属性 支持 的 样式 的 意义 如 表 479-1 
所 示 。 


表 479-1 ”border-bottom-style 属性 支持 的 样式 








属 性 值 描 述 
none 定义 无 边框 
hidden 与 none 相同 ,不 过 应 用 于 表 时 除外 ,对 于 表 , hidden 用 于 解决 边框 冲突 
dotted 定义 点 状 边框 ,在 大 多 数 浏览 器 中 呈现 为 实 线 


dashed 定义 虚线 ,在 大 多 数 浏览 器 中 呈现 为 实 线 
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续 表 

属性 值 描 述 

solid 定义 实 线 

double 定义 双 线 , 双 线 的 宽度 等 于 border width 的 值 

groove 定义 3D 目 槽 边框 ,其 效果 取决 于 bordercolor 的 值 

ridge 定义 3D 垄 状 边框 ,其 效果 取决 于 border-color 的 值 

inset 定义 3D inset 边框 ,其 效果 取决 于 border-color 的 值 

outset 定义 3D outset 边框 ,其 效果 取决 于 border-color 的 值 

inherit 规定 应 该 从 父 元 素 继承 边框 样式 





此 实例 的 源 文 件 名 是 myHtmlB224. html。 


480 ”创建 背景 符号 对 文本 自 定义 下 画 线 


此 实例 主要 通过 线性 渐变 创建 符号 (缩小 之 后 就 成 为 一 个 点 ) 来 设置 背景 ,从 而 使 文字 的 底部 显 
示 类 似 于 下 面 线 的 重复 符号 (点 )。 当 在 Google Chrome 浏览 嚣 中 显示 该 页 面 时 ,“ 欧 阳 修 “李清照 ” 
“司马 相 如 “王昌龄 "等 的 底部 分 别 显示 有 省 略 号 风格 的 下 面 线 , 如 图 480-1 所 示 。 有 关 此 实例 的 主 
要 代码 如 下 。 





tt 
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欧阳 修 是 在 宋代 文学 史上 最 早 开 创 一 代 文 风 的 文坛 领袖 。 
领导 了 北宋 诗 文革 新 运动 ， 继 承 并 发 展 了 韩 念 的 古文 理 
出 生 于 书香 门 第 ， 部 分 筷 拿 感 时 咏 史 ， 情 姑 


其 词 风 不 同 。 司 如 字 长 效 ， 西 汉 鲜 驮 家 ， 


中 国文 化 史 文 学 史上 杰出 的 代表 ， 有 有 明显 的 道家 思 奶 与 神 
仙 色 彩 。 玉昌 租 是 著名 的 边塞 诗人 ， 并 在 后 代 以 按察 讨 
称 世 。 





图 480-1 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<style> 

/* 绘制 阴影 框 */ 

div { display: inline - block; width: 400px; height: 250px; padding — left: 20px; padding — right: 20px; 
padding - bottom: 20px; margin: 10px; background — color: #FFF; border: lpx solid # EEE; box — shadow: 5px 
Spx 5px lpx #999, 0 0 40px rgba(0, 0, 0, 0.06) inset; position: relative; border - radius: 5px; } 

body { background— color: lightgray; } 

p{line— height: 35px; text — decoration: none; font- family: 楷体 ;font- size: 16px; } 

/* 定 制 下 夯 线 的 风格 ,生成 背景 图 像 x / 

span { position: absolute; height: 35px; font - size: 16px; background: linear - gradient ( - 45deg, 
transparent 40 %, deeppink 0, deeppink 60%, transparent 0) 0 lem, linear - gradient (45deg, transparent 
40%, deeppink 0, deeppink 60%, transparent 0) 0.1em lem; background— size: 0.3em 0.15em; background 
~ repeat: repeat - x; background - position: 0 28px; } 
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</style></head> 


<body >< div><p>< span > 欧阳 修 </span > 欧阳 修 是 在 宋代 文学 史上 最 早 开创 一 代 文风 的 文坛 领袖 。 领 导 了 北 
宋 诗 文革 新 运动 ,继承 并 发 展 了 韩愈 的 古文 理论 。< span > 李清照 </span > 李清照 出 生 于 书香 门 第 , 部 分 篇 章 感 时 
咏 史 , 情 辞 慷慨 ,与 其 词 风 不 同 。< span > 司马 相 如 </span> 司 马 相 如 字 长 婴 , 西 汉 辞 赋 家 ,中 国文 化 史 文 学 史上 杰 
出 的 代表 ,有 明显 的 道家 思想 与 神仙 色彩 。< span > 王昌龄 </span > 王昌龄 是 著名 的 边塞 诗人 ,并 在 后 代 以 边塞 诗 
称 世 。</p></div></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 .background-size 属性 用 于 规定 背景 
图 像 (符号 ) 的 尺寸 ,该 属性 的 第 一 个 值 用 于 设置 宽度 ,第 二 个 值 用 于 设置 高 度 。background-size: 
0. 3em 0. 15em 中 的 em 实际 上 是 垂直 测量 ,一 个 em 等 于 任何 字体 中 的 字母 所 需要 的 垂直 空间 ,而 和 
它 占据 的 水 平 空间 没有 任何 关系 ,如 果 字 体 大 小 是 16px' 那 么 lem 二 16px, 因 此 原 代 码 完全 等 价 于 
background-size: 4. 8px 2. 4px。background- position 属性 用 于 设置 背景 图 像 位 置 ,必须 先 指 定 
background-image 属性 。 该 属性 通常 提供 两 个 参数 值 ,第 一 个 用 于 横 坐标 ,第 二 个 用 于 纵 坐 标 ,如 果 
只 提供 一 个 ,该 值 将 用 于 横 坐 标 , 纵 坐标 默认 为 50%。 

此 实例 的 源 文件 名 是 myHtmlB273. html。 


481 使 用 自 定 义 的 波浪 线 设置 文本 的 下 画 线 
此 实例 主要 通过 使 用 lineargradient() 方 法 创建 渐变 图 形 ,从 而 实现 使 用 自 定义 的 波浪 线 设置 广 


本 的 下 画 线 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,使 用 自 定义 的 红色 波浪 线 设置 的 文本 下 
夯 线 效果 如 图 481-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 





<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<style type= "text/css"> 

p { margin: 1px; display: inline - block; width: 400px; height: 210px; font - size: 18px;color: black; 
padding: 15px 20px; box - shadow: 0 5px 5px darkgrey; border — radius: 10px;background— color: #EEE;line 
一 height: 40px; } 

.myWave { position: absolute; background: linear - gradient(45deg, transparent, transparent 45%, red, 
transparent 55%, transparent 100% ), linear - gradient( - 45deg, transparent, transparent 45%, red, 
transparent 55 %, transparent 100% ); background - size: 10px l0px; background - repeat: repeat 一 x; 
height: 33px; background— repeat: repeat - x; background - position: 0 28px;} 

</style></head> 
<body><p> 最 佳 故事 片 : < span class = "myWave">e 巴 山 夜 雨 * .< 天 云 山 传奇 »</span><br> 

最 佳 科教 片 : <span class = "myWave">< 生 命 与 蛋白 质 - 人 工 合成 胰岛 素 »</span ><br> 

最 佳 纪录 片 : < span class = "myWave">e 蛇 口 奏 鸣 曲 ></span><br> 

最 佳 儿童 片 : < span class = "myWave">« 烛 光 里 的 微笑 »</span><br> 

最 佳 合拍 故事 片 : < span class = "myWave">« 宋 氏 三 姐妹 »</span><br></p></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,background: linear- gradient(45deg， 
transparent, transparent 45%, red, transparent 55%, transparent 100%), linear-gradient(-45deg, 
transparent, transparent 45%，, red，transparent 55%% ，transparent 100%) 用 于 生成 渐变 图 形 , 如 
图 481-2 所 示 。 此 图 形 并 不 是 纯粹 的 红色 波浪 线 ,而 是 通过 设置 height: 33px 和 background- 
position: 0 28px 隐藏 此 渐变 图 形 的 下 面部 分 .这 样 才 使 文本 的 下 面 线 出 现 类 似 于 波浪 线 的 效果 。 在 
CSS3 中 ,text-decoration-style: wavy 用 于 设置 装饰 线 的 风格 为 波浪 线 ,但 是 目前 除了 火狐 浏览 器 
(Mozilla Firefox) 外 ,其 他 浏览 器 目前 都 不 支持 text-decoration-style 属性 。 

此 实例 的 源 文件 名 是 myHtmlB332. html。 
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DD myHtmle332html x _ 
3 © Dfile///D/myWork/myHtmlB332.html 窑 三 


口 myHtmle332 html x _ 
S 3 © Dfile///D/myWork/myHtmlB332.html 安 三 











最 佳 故事 片 。 《巴山 放 丙 》、 《天 去 册 传 胡 》. 
最 佳 科教 片 。《 生 全 与 各 自 质 = 人 工人 上 有 名 泰 》 
最 佳 纪录 片 : 《蛇口 秦 鸣 曲 》 

最 佳 儿童 片 。《 妇 水电 的 约 笑 》 

最 佳 合拍 故事 片 ， 《 宋 氏 三 姐妹 》 


最 佳 故事 片 : 《巴山 夜 再 》、《 天 云 山 传奇 》 
最 佳 科教 片 : 生命 与 重 白 质 -人 工 全 成 胰 和 率 》 


最 佳 纪录 片 ， 《蛇口 奏鸣曲 》 

2000000000000 

最 佳 儿童 片 ， 《烛光 里 的 微笑 》 
最 佳 合拍 故事 片 。《 宋 氏 三 姐妹 》 
200000000000 





图 481-1 图 481-2 


482 ”通过 background-image 创建 下 夯 线 


此 实例 主要 通过 设置 background-image 属性 值 为 linear-gradient 实现 使 用 虚线 装饰 超 链接 的 下 
画 线 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 将 以 红色 的 虚线 显示 超 链 接 ( 第 二 个 ) 的 悬浮 状 
态 , 如 图 482-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 





DD myHeml8124heml x\ 


会 BD fie///DJmyWork/ myHtmlB124.html po 








Erofessional Adobe Flex 3 中 文 版 书 名 ，Adobe Flex 3 高 级 编程 


Professional WCF Progranming 中 文 版 书 名 YCF 高 级 编程 


Professional Swift 中 文 版 书 名 ，Swift 2. 2 高 级 编程 





图 482-1 


<! doctype html >< html >< head >< meta charset = "UTF - 8"> 
< style type = "text/css"> 
. solid {padding - bottom: 4px; 
background - image: linear - gradient(to top, red, green lpx, transparent 1px);} 
.dashed { padding - bottom: 4px; background: linear - gradient (to right, red, green 4px, transparent 
4px) repeat — x 0 bottom/7px 1px; } 
.dashed: hover, . solid:hover{color: red; text— decoration: none;} 
. solid: hover {background — image: linear — gradient(to top, red, green lpx, transparent 1px);} 
.dashed :hover { background - image: linear - gradient(to right, red, green 4px, transparent 4px);} 
</style></head> 
<body><p><a href = "http://item. jd. com/10860514. html" class = "solid"> Professional Adobe Flex 3 </a> 
中 文 版 书 名 : adobe Flex 3 高 级 编程 </p> 
<p><a href = "http://item. jd. com/10079681. html" class = "dashed"> Professional WCF Programming </a> 
中 文 版 书 名 : RCF 高 级 编程 </p> 
<p><a href = "http://item. jd. com/12033884. html" class = "dashed"> Professional Swift </a> 中 文 版 书 
名 : Swift 2.2 高 级 编程 </p></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,background-image 属性 负责 为 元 素 
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设置 背景 图 像 ,元 素 的 背景 占据 了 元 素 的 全 部 尺寸 .包括 内 边 距 和 边框 ,但 不 包括 外 边 距 ,默认 背景 图 
像 位 于 元 素 的 左上 角 ,并 在 水 平和 垂直 方向 上 重复 ; linear-gradient 用 于 创建 线性 渐变 效果 ,由 于 变化 
距离 较 小 ,效果 不 特别 明显 。linear-gradient 的 语法 格式 如 下 。 


linear - gradient (direction, color—- stopl, color— stop2, ~ ); 














其 中 ,direction 默认 为 to bottom, 即 从 上 向 下 的 渐变 ; stop 表示 颜色 的 分 布 位 置 ,默认 均匀 分 布 ， 
如 果 有 3 个 颜色 , 则 各 个 颜色 的 stop 均 为 33. 33%。 
此 实例 的 源 文 件 名 是 myHtmlB124. html。 


483 以 红色 波浪 线 代 奉 显 示 超 链接 的 下 画 线 


此 实例 主要 通过 设置 超 链 接 的 text-decoration-style 属性 实现 以 波浪 线 代 替 显 示 超 链接 的 下 面 
线 。 当 在 火狐 浏览 器 (Mozilla Firefox) 中 显示 该 页 面 时 将 以 红色 的 波浪 线 显示 3 个 超 链接 ,如 图 483-1 所 
示 。 有 关 此 实例 的 主要 代码 如 下 。 





人 eV/WDYmy-_HtmlB121.html XX 
€ © filey//D/myWorW/n © QEEF<cr*k> » 三 
加 最 时 访问 加 火 了 直方 站 点 虱 新 手 上 路 局 各 用 网 址 四 襄 革 商城 
以 红色 的 波浪 线 显 示 超 链接 的 下 画 线 : 


Professional Adobe Flex 3 中 文 版 书 名 : Adobe Flex 3 高 级 编程 
Professional WCF Programming 中 文 版 书 名 : WCF 高 级 编程 
Professional Swift 中 文 版 书 名 : Swift 2.2 高 级 编程 





图 483-1 


<! doctype html >< html >< head >< meta charset = "UTF - 8"> 
< style type = "text/css"> 
a { text - decoration— style: wavyitext - decoration - color: red; 
text - decoration- line: underline; } 
</style></head> 
<body > 以 红色 的 波浪 线 显示 超 链接 的 下 而 线 : 
<p><a href = "http://item. jd. com/10860514. html"> Professional Adobe Flex 3 </a> 中 文 版 书 名 : Adobe 
Flex 3 高 级 编程 </p> 
<p><a href = "http://item. jd. com/10079681. html"> Professional WCF Programming </a> 中 文 版 书 名 : WCF 
高 级 编程 </p> 
<p><a href = "http://item. jd. com/12033884. html"> Professional Swift </a> 中 文 版 书 名 : Swift 2.2 高 级 
编程 </p></body ></htnl > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,text-decoration-style: wavy 用 于 设 
置 装饰 线 的 风格 为 波浪 线 。 除 了 火狐 浏览 器 (Mozilla Firefox) ,其 他 浏览 器 目前 都 不 支持 text- 
decoration-style 属性 。 在 CSS3 中 ,text-decoration-style 属性 规定 线条 如 何 显示 ,该 属性 的 语法 格式 
如 下 。 





text - decoration ~ style: solid| double| dotted|dashed|wavy| initial| inherit 


其 中 ,solid 为 默认 值 ,表示 线条 将 显示 为 单线 ; double 表示 线条 将 显示 为 双 线 ; dotted 表示 线条 





HTML5+CSS3 炫 酷 应 用 实例 集锦 


将 显示 为 点 状 线 ; dashed 表示 线条 将 显示 为 虚线 ; wavy 表示 线条 将 显示 为 波浪 线 。 
此 实例 的 源 文 件 名 是 myHtmlB121. html。 


484 为 指定 的 超 链 接 同 时 设置 下 画 线 和 删除 线 


此 实例 主要 为 超 链 接 的 text-decoration 属性 设置 underline 和 line-through 两 个 属性 值 , 从 而 实 
现在 超 链接 上 同时 显示 下 画 线 和 删除 线 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,后 面 3 个 超 
链接 将 同时 显示 下 画 线 和 删除 线 , 如 图 484-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 











百 Do 口 x 
D myHtmlB120html x\ 
全 3 C filey/DVmyworymyHtmlB120html 字 | 三 
带 删 除 线 的 图 书 为 绝版 图 书 


Professional_ Python 中 文 版 书 名 ，Python 高 级 编程 
Protessional C# 中 文 版 书 名 ，C# 高 级 编程 
Preftezsicnsjl-thdcbe-lex-3 中 文 版 书 名 ，Adobe Flex 3 高 级 编程 
Profeazicnsj-#GF-Przogranmins 中 文 版 书 名 ，WCF 高 级 编程 
Prtessionai-Swifs 中 文 版 书 名 ， Swift 2. 2 高 级 编程 





图 484-1 


<!doctype html >< html >< head >< meta charset = "UTF — 8"> 
<style type= "text/css"> 
a[hrefx = jd] { text- decoration: underline line- through; } 
</style></head> 
<body > 带 删 除 线 的 图 书 为 绝版 图 书 
<p><a href ="https://www. amazon. cn/dp/BO1N8TTN52/ref = sr_1_18?s = books&ie = UTF8 &qid = 
1487037038&sr = 1 - 18gkeywords = Professional"> Professional Python </a> 中 文 版 书 名 : Python 高 级 编程 </p> 
<p><a href =" https://www. amazon. cn/dp/B00S4HCQT4/ref = sr_1_20?s = books&ie = UTF8 &qid = 
1487037038&sr = 1 - 20&keywords = Professional"> Professional C#</a> 中 文 版 书 名 : C# 高 级 编程 </p> 
<p><a href = "http://item. jd. com/10860514. html"> Professional Adobe Flex 3 </a> 中 文 版 书 名 : Adobe 


Flex 3 高 级 编程 </p> 

<p><a href = "http://item. jd. com/10079681. html"> Professional WCF Programming </a> 中 文 版 书 名 : WCF 
高 级 编程 </p> 

<p><a href = "http://item. jd. com/12033884. html"> Professional Swift </a> 中 文 版 书 名 : Swift 2.2 高 级 
编程 </p ></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , text-decoration: underline line- 
through 用 于 为 指定 的 超 链接 同时 设置 删除 线 和 下 画 线 。 在 CSS3 中 ,text-decoration 属性 规定 添加 
到 文本 的 修饰 ,修饰 的 颜色 由 color 属性 设置 。 这 个 属性 允许 对 文本 设置 某 种 效果 ,例如 下 面 线 。 如 
果 后 代 元 素 没有 自己 的 装饰 ,在 祖先 元 素 上 设置 的 装饰 会 延伸 到 后 代 元 素 中 。text-decoration 属性 值 
通常 为 一 个 ,但 也 可 以 像 实 例 这 样 同 时 添加 两 个 及 两 个 以 上 的 属性 值 。text-decoration 属性 的 语法 格 
式 如 下 。 


text - decorat ion: none | underline | blink | overline | line~ through 





第 5 部 分 天 人》 


其 中 ,none 为 默认 值 ,表示 定义 标准 的 文本 ; underline 表示 定义 文本 下 的 一 条 线 ; overline 表示 
定义 文本 上 的 一 条 线 ; line-through 表示 定义 穿 过 文本 的 一 条 线 ; blink 表示 定义 闪烁 的 文本 。 
此 实例 的 源 文件 名 是 myHtmlB120. html。 


485 通过 start 自 定义 有 序列 表 的 开始 编号 


此 实例 主要 通过 设置 有 序列 表 的 start 属性 实现 自 定义 有 序列 表 的 开始 编号 。 当 在 浏览 器 中 显 
示 该 页 面 时 将 按照 默认 值 对 有 序列 表 的 列表 项 进行 编号 ,如 图 485-1 所 示 。 单 击 * 自 定义 序号 的 有 序 
列表 ”按钮 , 则 有 序列 表 将 以 13 作为 开始 编号 ,并 对 其 他 的 列表 项 进行 连续 编号 ,如 图 485-2 所 示 。 有 
关 此 实例 的 主要 代码 如 下 。 




















百 口 Xx 百 村 口 X 
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自 定义 原 号 的 有 友 列 表 | 自 定义 序号 的 有 取 列 表 





图 485-1 图 485-2 


<!doctype html ><html >< head >< meta charset = UIF -8> 
< script src= "js/jquery -3.1.1.min. js"></script >< script language = "javascript"> 
$ (document). ready(function() { 
$("#myBtnstart").click(function() {// 自 定义 序号 的 有 序列 表 
$("#my01"). prop("start", 13) });}); 
</script ></head> 
<body><p>< input type = "button” value =" 自 定义 序号 的 有 序列 表 " id = "myBtnstart" style = "width: 
190px"></p> 
<ol id= "my01" > 
<1i> 清 华 大 学 </1i ><1i> 北 京 大 学 </1i>< 1i> 上 海 交 通 大 学 </1i><1i> 浙 江 大 学 </1i> 
<1i> 南 京 大 学 </1i><1i> 中 国人 民 大 学 <1i><1i> 中 山大 学 </1i></o1></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 .有 序列 表 的 start 属性 是 HTML5 新 
增 的 属性 ,该 属性 规定 有 序列 表 的 开始 编号 。 如 果 不 设置 此 属性 ,有 序列 表 则 以 1 作为 开始 编号 。 
此 实例 的 源 文件 名 是 myHtmlA028. html。 


486 ”通过 reversed 实现 有 序列 表 的 倒序 编号 


此 实例 主要 通过 设置 有 序列 表 的 reversed 属性 实现 对 有 序列 表 进 行 倒序 编号 。 当 在 浏览 器 中 显 
示 该 页 面 时 将 按照 升序 对 有 序列 表 的 列表 项 进行 编号 ,如 图 486-1 所 示 。 单 击 “ 对 有 序列 表 进 行 倒序 
编号 "按钮, 则 有 序列 表 的 列表 项 将 按照 倒序 进行 编号 ,如 图 486-2 所 示 。 有 关 此 实例 的 主要 代码 
如 下 。 
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1_ 对 有 悍 列表 进行 制 序 闹 号 





对 有 了 序列 素 进 行 全 犀 编 号 





图 486-1 图 486-2 


<!doctype html ><html >< head >< meta charset = UTF - 8> 
<script src= "js/jquery- 3.1.1.min. js"></script >< script language = "javascript"> 
$ (document). ready(function() { 
$("#myBtnreversed"). click(function() {// 对 有 序列 表 进 行 倒序 编号 
$ ("#my01"). prop("reversed", true); });}); 
</script ></head> 
<body><p>< input type = "button" value = "对 有 序列 表 进 行 倒序 编号 "id= "myBtnreversed" style = "width: 
190px"></p> 
<ol id= "my01" > 
<1i> 清 华 大 学 </1i>< 1i> 北 京 大 学 </1i> <1i> 上 海 交 通 大 学 </1i><1i> 浙 江 大 学 </1i> 
<1i> 南 京 大 学 </1i><1i> 中 国人 民 大 学 </1i><1i> 中 山大 学 </1i></o1></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,有 序列 表 的 reversed 属性 是 HTML5 新 
增 的 属性 ,该 属性 对 列表 进行 降序 排列 。 如 果 不 设置 此 属性 .有 序列 表 将 按照 升序 进行 排列 。 
此 实例 的 源 文件 名 是 myHtmlA029. html。 


487 通过 计数 器 对 目录 的 音节 进行 自动 编号 


此 实例 主要 通过 设置 自动 编号 的 相关 属性 counter-reset ,counter-increment、content 实现 对 图 书 
目录 的 章节 进行 自动 编号 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 对 章节 进行 自动 编号 的 图 书 
目录 如 图 487-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 


wenonm x 
“ 3 CDfle//DVmyworymyHtmlBz10ht 它 至 











5 部 分 元素》 


<!doctype html >< html >< head >< meta charset = "UTF — 8"> 
< style type= "text/css"> 
html { color: #444;font: 16px/1.6 微软 雅 黑 ，"Microsoft YaHei";} 
ul { list - style: none; padding— left: 3em; } 
.menu { counter ~ reset: chapter; } 
.menu> li { counter - increment: chapter;counter - reset: section; 
font - size: 20px; } 
.menu> li:before { content: "第 "counter(chapter) " 章 "; 
padding - right: 0. 5em; } 
.menu ul > 1i { counter - increment: section; font ~ size: 16px;} 
.menu ul > 1i:before { content : "第 ”counter( section)" 节 "; 
padding - right: 0.5em; } 
</style></head> 
<body><ul class= "menu"> 
<1i> 上 下 文 管理 器 <ul><1i> 上 下 文 管理 器 的 定义 </1i> 
<1i> 上 下 文 管理 器 的 语法 </1i>< 1i> 资 源 清理 </1i></ul></1i> 
<1i> 生 成 器 < ul >< 1i> 理 解 生成 器 </1i> 
<1i> 和 迭代 对 象 与 进 代 器 </1i>< 1i> StopIteration 异常 </1i> 
<1i> 何 时 编写 生成 器 </1i>< 1i> 分 块 计算 数据 </1i></ul></1i> 
<1i> 正 则 表达 式 <ul ><1i> 使 用 正则 表达 式 的 原因 </1i> 
<1i> match 对 象 </1i><1i> 命 名 分 组 </1i> 
<1i> 点 匹配 换行 符 </1i></u1></1i></ul> 
</body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,counter-increment: chapter 表示 对 
chapter 按照 1 的 增 量 进行 自 增 编号 ,如 果 将 此 行 修改 为 counter-increment: chapter 4, 则 将 显示 第 4 
章 , 第 8 章 , 第 12 章 。 在 CSS 中 ,counter-increment 属性 用 于 设置 某 个 选择 器 每 次 出 现 的 计数 器 增 
量 ,默认 增 量 是 1。 使 用 这 个 属性 ,计数 器 可 以 递增 (或 递减 ) 某 个 值 ,可 以 是 正 值 或 负 值 ,如 果 没 有 提 
供 number 值 , 则 默认 为 1。counterreset: chapter 表示 chapter 的 起 始点 为 第 1 章 , 如 果 将 此 行 修改 
为 counter-reset: chapter 3, 则 第 1 章 将 显示 为 第 4 章 。 在 CSS 中 ,counter-reset 属性 用 于 设置 某 个 
选择 器 出 现 次 数 的 计数 器 的 值 ,默认 为 0。 使 用 这 个 属性 ,计数 器 可 以 设置 或 重 署 为 任何 值 , 可 以 是 正 
值 或 负 值 ,如 果 没 有 提供 number, 则 默认 为 0。content 属性 主要 用 于 和 before 选择 器 及 after 选择 器 
配合 使 用 来 插入 生成 内 容 。 

此 实例 的 源 文件 名 是 myHtmlB210. html。 


488 ”通过 计数 器 自动 统计 所 选择 复 选 框 的 数量 


此 实例 主要 通过 设置 元 素 的 counter-reset、counter-increment、content 等 属性 实现 使 用 纯 CSS 自 
动 统计 用 户 选择 的 复 选 框 数量 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,如 果 选 择 其 中 的 6 家 
公司 , 则 统计 结果 如 图 488-1 所 示 ; 如 果 取 消 选 择 其 中 的 两 家 公司 , 则 统计 结果 如 图 488-2 所 示 。 有 
关 此 实例 的 主要 代码 如 下 。 





<!doctype html ><html >< head><meta charset = "UTF - 8"> 
<style> 
body {counter - reset: myCounter; } 
input:checked { counter — increment: myCounter;} 
.total: :after { color:red; content: counter(myCounter); } 
</style></head> 
<body >< strong > 下 面 的 中 国 500 强 公司 哪 几 家 与 你 有 关 ?</strong> 





HTML5+CSS3 炫 酷 应 用 实例 集锦 


<ol><1i>< input type = "checkbox” id= "myCounterl">< label for= "myCounterl"> 中 国 邮政 集团 公司 </label > 


</1i> 

<1i>< input type = "checkbox” id = "myCounter2">< label for = "myCounter2"> 中 国平 安保 险 (集团 ) 股 份 有 限 
公司 </label ></1i> 

<1i>< input type = "checkbox” id = "myCounter3">< label for = "myCounter3"> 中 国 农业 银行 股份 有 限 公司 
</label></1i> 

<1i>< input type = "checkbox” id = "myCounter4"> < label for ="myCounter4"> 中 国 石油 天 然 气 集 团 公 司 
</label></1i> 

<1i>< input type = "checkbox" id = "myCounter5">< label for = "myCounter5"> 上 海 汽车 集团 股份 有 限 公司 
</label></1i> 

<1i>< input type = "checkbox” id = "myCounter6"> < label for = "myCounter6"> 中 国 兵器 装备 集团 公司 
</label></1i> 

<1i >< input type = "checkbox” id = "myCounter7"> < label for = "myCounter7"> 中 国电 信和 集团 公司 
</label ></1i> 

<1i>< input type = "checkbox” id = "myCounter8"> < label for = "myCounter8"> 中 国 中 信和 集团 有 限 公司 
</label ></1i> 

<1i>< input type = "checkbox" id = "myCounter9">< label for = "myCounter9"> 中 国人 民 保险 集团 股份 有 限 公 
司 </label></1i> 

<1i>< input type= "checkbox" id = "myCounter10">< label for= "myCounter10"> 中 国 远 洋 海运 集团 有 限 公司 
</label ></li> 
</ol> 


你 总 共 选 择 了 < strong class = "total"></ strong > 家 公司 </div></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,counter-reset 属性 用 于 设置 某 个 选 
择 器 出 现 次 数 的 计数 器 的 值 ,默认 为 0; counter-increment 属性 用 于 设置 某 个 选择 器 每 次 出 现 的 计数 
器 增 量 ,默认 增 量 是 1, 使 用 这 个 属性 ,计数 器 可 以 递增 (或 递减 ) 某 个 值 ,可 以 是 正 值 或 负 值 ,如果 没有 
提供 数字 值 , 则 默认 为 1; after 选择 器 用 于 在 元 素 之 后 添加 内 容 , 这 个 选择 器 允许 在 元 素 内 容 的 最 后 
插入 生成 内 容 。 

此 实例 的 源 文件 名 是 myHtmlB136. html。 











DD myHtmlB136 html x\ D myHtmlB136 html x 可 
所 3 CDfileV/DVmyWworwmyHtmlB136Y 三 5 3 CC Dfie///Dp/myWork/myHtmlB136. 窜 | 三 
下 面 的 中 国 500 强 公司 哪 几 家 与 你 有 关 ? 下 面 的 中 国 500 强 公司 哪 几 家 与 你 有 关 ? 

1。 国 中 国 邮 政 集团 公司 1。 男 中 国 邮 政 集团 公司 

2， 国 中 国平 安保 险 (集团) 股份 有 限 公司 2， 目 中 国平 安保 险 (集团) 股份 有 限 公司 

3, 加 全 3 目 中 国 农业 银行 股份 有 限 公司 

系 “ 目 中 国 石油 天 然 气 集团 公 和 “上 罩 中 国 石油 天 然 气 集团 公司 

5。 国 上 海 汽 5。 国 上 海 汽车 集团 股份 有 限 公司 

6. 国 兵器 6. 目 中 国 兵器 装备 集团 公司 

7. 国 中 国电 信 集 团 公司 7.。 国 中 国电 信 集 团 公司 

8. 目 中 国 中 信和 集团 有 限 公司 8. 目 中 国 中 信 集 团 有 限 公司 

9， 国 中 国人 民 保险 集团 股份 有 限 公司 9.。 男 中 国人 民 保险 集团 股份 有 限 公司 
10， 目 中 国 远 洋 海运 集团 有 限 公 司 10. 目 中 国 远洋 海运 集团 有 限 公司 
你 总 共 选 择 了 6 家 公司 你 总 共 选 择 了 4 家 公司 

图 488-1 图 488-2 


489 在 同 级 子 元 素 前 面 插 人 自 增 的 数字 编号 


此 实例 主要 通过 在 content 属性 中 采用 counter(myCounter) 实 现在 同 级 子 元 素 的 前 面 插入 自 增 
的 数字 编号 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,每 本 书 名 的 前 面 将 自动 添加 一 个 自 增 的 





连续 数字 编号 ,如 图 489-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 











和 西 - D x 
DD myHemls8028 html x\ 

3 CC Dfile///D/myWork/myHtmlB028+ 祝 三 
12 月 份 新 上 榜 科技 图 书 








图 489-1 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<style type= "text/css"> 
p:before{content: "第 "counter(myCounter)" 名 ."; 
font - size: 16px; font— weight: bold;} 
p {padding - left: 8px; width: 380px; margin: 10px; background- color: lightgreen; 
border - radius: 5px;counter - increment: myCounter;} 
</style></head> 
<body> <h2 >12 月 份 新 上 榜 科 技 图 书 </h2> 
<p> 科 学 的 旅程 </p> 
<p> 万 物 解释 者 : 复杂 事物 的 极 简 说 明 书 </p> 
<p> 地 球 与 太空 : 美国 宇航 局 NASA 珍贵 摄影 集 </p> 
<p> 迷 人 的 数学 : 315 个 烧 脑 游戏 玩 通 数学 史 </p> 
<p> 无 言 的 宇宙 : 隐藏 在 24 个 数学 公式 背后 的 故事 </p> 
<P> 中 国 国家 地 理 百科 全 书 </p></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,content: “第 "counter(myCounter) 
"名 . "用 于 在 同 级 子 元 素 的 前 面 插入 自 增 的 连续 数字 编号 。 在 content 属性 中 使 用 counter 属性 值 来 
针对 多 个 同 级 子 元 素 追 加 连续 的 编号 ,使 用 方法 如 下 。 

< 元 素 >:before{ 

content:counter( 计 数 器 名 ); 

} 

计数 器 名 可 以 任意 命名 ,此 外 还 需要 在 元 素 的 样式 中 追加 对 元 素 的 counter-increment 属性 的 指 
定 , 为 了 实现 连续 编号 ,应 该 将 counter-increment 属性 的 属性 值 设 定 为 before 选择 器 或 after 选择 器 
的 counter 属性 值 中 所 指定 的 计数 器 名 ,格式 如 下 。 

< 元 素 >{counter - increment :before 选择 器 或 after 选择 器 中 指定 的 计数 器 名 } 


此 实例 的 源 文 件 名 是 myHtmlB028. html。 


490 ”在 同 级 子 元 素 前 面 插 人 自 增 的 字母 编号 


此 实例 主要 通过 在 content 属性 中 采用 counter(myCounter,lower-alpha) 实 现在 同 级 子 元 素 的 前 
面 插入 自 增 的 字母 编号 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,每 本 书 名 的 前 面 将 自动 添加 
一 个 自 增 的 连续 小 写字 母 编号 ,如 图 490-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 








HTML5+CSS3 炫 酷 应 用 实例 集锦 


DD myHemlB029 html x 
5 3 © Dfile///D/myWork/myHtmlB029+ 字 








12 月 份 新 上 榜 科 技 图 书 





图 490-1 


<!doctype html ><html >< head >< meta charset = "UTF - 8"> 
<style type= "text/css"> 
/* 使 用 连续 的 小 写字 母 对 同 级 子 元 素 进行 编号 * / 
p:before{ content: counter(myCounter, lower 一 alpha)". "7 
font — size: 16px; font — weight: bold;} 
p { padding— left: 8px; width: 380px; margin: 10px;background — color: lightgreen; 
border - radius: 5px; counter - increment: myCounter;} 
</style></head> 
<body><h2>12 月 份 新 上 榜 科 技 图 书 </h2 > 
<p> 科 学 的 旅程 </p> 
<p> 万 物 解释 者 : 复杂 事物 的 极 简 说 明 书 </p> 
<p> 地 球 与 太空 : 美国 宇航 局 NASA 珍贵 摄影 集 </p> 
<p> 迷 人 的 数学 : 315 个 烧 脑 游戏 玩 通 数学 史 </p> 
<p> 无 言 的 宇宙 : 隐藏 在 24 个 数学 公式 背后 的 故事 </p> 
<p> 中 国 国家 地 理 百科 全 书 </p></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,content: counter (myCounter， 
lower-alpha)"." 用 于 实现 在 同 级 子 元 素 的 前 面 插入 自 增 的 小 写字 母 编号 。 其 中 ,lower-alpha 表示 编 
号 种 类 是 小 写字 母 ,编号 种 类 可 以 使 用 list-style-type 属性 值 来 指定 ,list-style-type 属性 值 的 种 类 取 
值 有 多 种 ,其 中 disc 为 实心 圆 (CSS1) ,circle 为 空心 圆 (CSS1) 、square 为 实心 方块 (CSS1) ,decimal 为 
阿拉 伯 数 字 (CSS1) lowerroman 为 小 写 罗 马 数字 (CSS1) .upper-roman 为 大 写 罗 马 数字 (CSS1)、 
lower-alpha 为 小 写 英文 字母 (CSS1) .upper-alpha 为 大 写 英文 字母 (CSS1) .none 为 不 使 用 项 目 符号 
(CSS1) ,armenian 为 传统 的 亚美尼亚 数字 (CSS2)、cjk-ideographic 为 浅 白 的 表意 数字 (CSS2)、 
georgian 为 传统 的 乔治 数字 (CSS2) lower-greek 为 基本 的 希腊 小 写字 母 (CSS2) .hebrew 为 传统 的 希 
伯 莱 数字 (CSS2) .hiragana 为 日 文平 假名 字符 (CSS2)、hiragana-iroha 为 日 文平 假名 序号 (CSS2)、 
katakana 为 日 文 片 假名 字符 (CSS2)、katakana-iroha 为 日 文 片 假名 序号 (CSS2) ,lower-latin 为 小 写 拉 
丁字 母 (CSS2) ,upper-latin 为 大 写 拉 丁字 母 (CSS2)。 

此 实例 的 源 文 件 名 是 myHtmlB029. html。 


491 在 同 级 子 元 素 前 面 插 人 自 增 的 罗马 数字 


此 实例 主要 通过 在 content 属性 中 采用 counter(myCounter,upper-roman)". "实现 在 同 级 子 元 素 
的 前 面 插入 自 增 的 大 写 罗马 数字 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,每 本 书 名 的 前 面 将 





5 部 分 元素 


自动 添加 一 个 自 增 的 连续 编号 的 大 写 罗 马 数字 ,如 图 491-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 491-1 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<style type= "text/css"> 
/* 使 用 连续 的 大 写 罗马 数字 对 同 级 子 元 素 进行 编号 * / 
p:before{ content: counter(myCounter, upper — roman)". "7 
font - size: 16px; font - weight: bold; } 
p { padding ~ left: 8px; width: 380px; margin: 10px; background- color: lightseagreen; border - radius: 
5px; counter - increment: myCounter; } 
</style></head> 
<body >< h2>12 月份 新 上 榜 科 技 图 书 </h2 > 
<p> 科 学 的 旅程 </p> 
<p> 万 物 解释 者 : 复杂 事物 的 极 简 说 明 书 </p> 
<p> 地 球 与 太空 : 美国 宇航 局 NASA 珍贵 摄影 集 </p> 
<p> 迷 人 的 数学 : 315 个 烧 脑 游戏 玩 通 数学 史 </p> 
<p> 无 言 的 宇宙 : 隐藏 在 24 个 数学 公式 背后 的 故事 </p> 
<P> 中 国 国 家 地 理 百科 全 书 </p></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,content: counter (myCounter， 
upperroman)"." 用 于 实现 在 同 级 子 元 素 的 前 面 插入 自 增 的 连续 编号 的 大 写 罗 马 数字 。 其 中 ,upper- 
roman 表示 编号 种 类 是 大 写 罗 马 数字 ,编号 种 类 可 以 使 用 list-style-type 属性 值 来 指定 。 

此 实例 的 源 文件 名 是 myHtmlB030. html。 


492 ”在 父子 关系 的 结构 中 对 子 元 素 嵌 套 编号 


此 实例 主要 定义 两 个 计数 器 ,并 在 counter-reset 属性 中 重 置 mySubCounter 子 级 计数 器 ,从 而 实 
现 对 父 、 子 两 级 中 的 元 素 分 别 进行 编号 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,月 份 采用 大 写 
罗马 数字 进行 计数 ,每 月 份 的 上 榜 书 名 采用 数字 进行 计数 ,如 图 492-1 所 示 。 有 关 此 实例 的 主要 代码 
如 下 。 





<!doctype html >< html ><head>< meta charset = "UTF - 8"> 
< style type = "text/css"> 
/* 使 用 连续 的 大 写 罗马 数字 对 父 级 子 元 素 进行 编号 x* / 
h2 :before{ content: counter(myCounter,upper - roman)"."; 
font - size: 16px; font ~ weight: bold;} 





HTML5+CSS3 炫 酷 应 用 实例 集锦 


h2{ counter - increment:myCounter; counter - reset:mySubCounter; } 

/#* 使 用 连续 的 数字 对 子 级 子 元 素 进 行 编号 * / 

p:before{ content:counter(mySubCounter)"."; } 

p{ padding - left: 8px;width: 380px; margin: 10px; background— color: lightseagreen; 

border - radius: 5px;counter - increment: mySubCounter; } 
</style></head> 
<body><h2>10 月 份 新 上 榜 科技 图 书 </h2> 

<p> 博 物 学 家 的 神秘 动物 图 鉴 </p> <p> 数 学 家 讲解 小 学 数学 </p> 

<h2>11 月 份 新 上 榜 科 技 图 书 </h2> 

<p > 图解 时 间 简 史 </p><p> 世 界 上 最 老 最 老 的 生命 </p><p> 化 石 知道 生命 的 旅程 </p> 
<h2>12 月 份 新 上 榜 科 技 图 书 </h2> 

<p> 科 学 的 旅程 /p><p> 万 物 解 释 者 : 复杂 事物 的 极 简 说 明 书 </p> 

<p> 地 球 与 太空 : 美国 宇航 局 NASA 珍贵 摄影 集 </p> 

<p> 迷 人 的 数学 : 315 个 烧 脑 游戏 玩 通 数学 史 </p> 

<p> 无 言 的 宇宙 : 隐藏 在 24 个 数学 公式 背后 的 故事 </p> 

<p> 中 国 国家 地 理 百科 全 书 </p></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,counter-reset 属性 用 于 设置 某 个 选 
择 器 出 现 次 数 的 计数 器 的 值 ,默认 为 0。 使 用 这 个 属性 ,计数 器 可 以 设置 或 重 置 为 任何 值 , 可 以 是 正 值 


或 负 值 ( 例 如 counter-reset:mySubCounter -10) 。 如 果 没 有 提供 number, 则 默认 为 0。 
此 实例 的 源 文件 名 是 myHtmlB031. html。 
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图 492-1 


493 ”仿照 图 书目 录 对 多 级 结构 元 素 风 套 编号 





此 实例 主要 定义 3 个 计数 器 ,并 在 counter-reset 属性 中 重 置 (例如 mySubCounter) 子 级 计数 器 ， 
从 而 实现 仿照 图 书目 录 对 多 级 结构 的 元 素 进行 嵌 套 编号 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 


时 ,对 三 级 目录 进行 自动 嵌 套 编号 的 效果 如 图 493-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 





gow A 


D myHtmleoazhml x 
二 言 C_Dfile//DymyWworwymyHtmlB032. 它 三 
1. 北京 市 简介 

1-1. 海淀 区 简介 

1-1-1。 八 里 庄 衔 道 办 事 处 简介 
I-1-2. 万寿 跨 街 道 办 事 处 简介 
1-1-3- 清河 街道 办 事 处 简介 
1-2. 昌平 区 简介 

1-2-1。 城北 街道 办 事 处 简介 
1-2-2. 回龙观 衡 道 办 事 处 简介 

.重庆 市 简介 

2-1.， 渝 北 区 简介 

2-1-1， 龙 溪 街 道 办 事 处 简介 
2-1-2. 回 兴 街道 办 事 处 简介 
2-1-3. 宝 圣 湖 街 道 办 事 处 简介 











图 493-1 


<! doctype html >< html >< head >< meta charset = "UTF - 8"> 
< style type = "text/css"> 
h2:after, h3:after, h4:after{ content:" 简 介 "; } 
h2:before{ content: counter(myCounter) '. ';} 
h2{ counter - increment: myCounter;counter - reset: mySubCounter;} 
h3 :before{ content:counter(myCounter) ' - ' counter(mySubCounter) '. ';} 
h3{counter - increment: mySubCounter; 
counter - reset: mySubSubCounter; margin - left: 40px; 
h4 :before{ content :counter(myCounter) ' -' counter(mySubCounter) '- 
counter(mySubSubCounter)'. ';} 
h4{ counter - increment: mySubSubCounter; margin— left: 40px;} 
</style></head> 
<body> 
<h2 > 北京 市 </h2 >< h3 > 海淀 区 </h3> 
<h4 > 八里 庄 街道 办 事 处 </h4 > <h4> 万 寿 路 街道 办 事 处 </h4 >< h4 > 清河 街道 办 事 处 </h4 > 
<h3 > 昌平 区 </h3 >< h4 > 城北 街道 办 事 处 </h4 >< h4 > 回龙观 街道 办 事 处 </h4 > 
<h2 > 重庆 市 </h2 >< h3 > 渝 北 区 </h3 >< h4 > 龙 溪 街道 办 事 处 </h4 ><h4 > 回 兴 街道 办 事 处 </h4 > <h4> 宝 圣 湖 
街道 办 事 处 </h4 ><h4 > 人 和 街道 办 事 处 </h4 > 
<h3 > 北碚 区 </h3 ><h4 > 北 温泉 街道 办 事 处 </h4 ><h4 > 朝阳 街道 办 事 处 </h4 > 
<h3 > 巴 南 区 </h3 ><h3a > 江北 区 </h3></body></htnml > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,counter-reset 属性 用 于 设置 某 个 选 
择 器 出 现 次 数 的 计数 器 的 值 , 默 认为 0。 当 需 要 对 多 级 元 素 进行 嵌 套 编号 时 通常 需要 设置 此 属性 , 否 
则 会 出 现 编号 混乱 。h2:after,h3:after,h4:after{ content: "简介 "; } 用 于 在 每 行文 字 的 后 面 添加 “ 简 
介 ”; content: counter(myCounter) '. ' 用 于 设置 一 级 目录 的 格式 ,例如 “1. 北京 市 简介 ”; content: 
counter(myCounter) '-' counter(mySubCounter) '.' 用 于 设置 二 级 目录 的 格式 ,例如 “1-1. 海淀 区 简 
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介 ”; content:counter(myCounter) '-' counter(mySubCounter) '-'counter(mySubSubCounter)'. ' 用 
于 设置 三 级 目录 的 格式 ,例如 “1-1-1. 八里 庄 街道 办 事 处 简介 ”。 
此 实例 的 源 文件 名 是 myHtmlB032. html。 


494 在 字符 串 两 边 添加 嵌 套 的 对 称 文字 符号 


此 实例 主要 设置 quotes 属性 值 ,并 使 用 content 属性 的 open-quote 属性 值 和 close-quote 属性 值 ， 
从 而 实现 在 字符 串 的 两 边 添加 嵌 套 的 对 称 文字 符号 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ， 
每 本 书 名 的 前 后 将 自动 添加 书 名 号 ,如 图 494-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 494-1 


<!doctype html >< html >< head ><meta charset = "UTF - 8"> 
< style type = "text/css"> 
p:before{content: open - quote;} /* 前 面 的 书 名 号 * / 
p:after{content: close - quote;} /x 后 面 的 书 名 号 * / 
p { padding— left: 8px; width: 380px; margin: 10px; background - color: lightgreen; 
border — radius: 5px; quotes:"[" ")";} 
</style></head> 
<body>< h2>12 月份 新 上 榜 科 技 图 书 </h2> 
<p> 科 学 的 旅程 </p> 
<p> 万 物 解释 者 : 复杂 事物 的 极 简 说 明 书 </p> 
<p> 地 球 与 太空 : 美国 宇航 局 NASA 珍贵 摄影 集 </p> 
<p> 迷 人 的 数学 : 315 个 烧 脑 游戏 玩 通 数学 史 </p> 
<p> 无 言 的 宇宙 : 隐藏 在 24 个 数学 公式 背后 的 故事 </p> 
<p> 中 国 国 家 地 理 百科 全 书 </p></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,content 属性 的 open-quote 属性 值 和 
close-quote 属性 值 用 于 在 字符 串 两 边 添加 诸如 括号 、 单 引号 、 双 引号 之 类 的 嵌 套 符号 。 其 中 ,open- 
quote 属性 值 用 于 添加 开始 的 嵌 套 符号 ,close-quote 属性 值 用 于 添加 结尾 的 垦 套 符号 。 在 使 用 这 两 个 
属性 值 之 前 应 该 首先 在 元 素 (例如 p 元 素 ) 样 式 的 quotes 属性 中 指定 使 用 什么 钳 套 符号 。 此 外 , 当 需 
要 添加 双 引 号 时 需要 使 用 转 义 字符 “\”。 

此 实例 的 源 文 件 名 是 myHtmlB033. html。 
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495 ”使 用 图 像 蔡 换 无 序列 表 的 列表 项 标记 


此 实例 主要 通过 设置 list-style-image 属性 实现 使 用 自 定义 图 像 来 蔡 换 无 序列 表 的 列表 项 标记 。 
当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,每 个 列表 项 前 面 均 有 一 个 自 定义 图 像 . 如 图 495-1 所 
示 。 有 关 此 实例 的 主要 代码 如 下 。 
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科学 的 旅程 

万 物 解 释 者 ， 复 杂事 物 的 极 简 说 明 书 

地 球 与 太 定 ， 美 国 宇航 局 NASA 珍 贵 摄影 集 
迷人 的 数学 ，315 个 烧 脑 游戏 玩 通 数学 史 
无 言 的 宇宙 ， 隐 藏 在 24 个 数学 公式 背后 的 故事 





图 495-1 


<!doctype html >< html>< head><meta charset = UTF - 8> 
< style type = "text/css"> 
ul { list- style- image: url('img/B184A. png'); } 
li { list- style-type: none;padding - left: 8px;width:340px; margin:10px; text -align: left; } 
</style></head> 
<body><center ><ul ><1i> 科 学 的 旅程 </1i> 
<1i> 万 物 解 释 者 : 复杂 事物 的 极 简 说 明 书 </1i> 
<1i> 地 球 与 太空 : 美国 宇航 局 NASA 珍贵 摄影 集 </1i> 
<1i> 迷 人 的 数学 : 315 个 烧 脑 游戏 玩 通 数学 史 </1i> 
<1i > 无 言 的 宇宙 : 隐藏 在 24 个 数学 公式 背后 的 故事 </1i></ul ></center></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,list-style-image: url('img/B184A. 
png') 用 于 实现 使 用 自 定 义 图 像 设置 列表 项 的 标记 ,该 代码 也 可 以 放置 在 1 元 素 对 应 的 CSS 类 中 实现 
相同 的 外 观 效果 ,但 是 推荐 放置 在 ul 元素 对 应 的 CSS 类 中 。 在 CSS 中 ,liststyle-image 属性 使 用 图 
像 来 蔡 换 列表 项 的 标记 ,此 属性 值 指定 有 序 或 无 序列 表 项 标志 的 图 像 ,图 像 相 对 于 列表 项 内 容 的 放置 
位 置 通常 使 用 list-style-position 属性 控制 ,为 防止 意外 发 生 ,通常 应 规定 一 个 liststyle-type 属性 以 防 
图 像 不 可 用 。listrstyle-image 属性 的 语法 格式 如 下 。 


list— style- image:URL|none| inherit; 


其 中 ,URL 表示 图 像 的 路 径 ; none 为 默认 值 .表示 无 图 形 被 显示 ; inherit 规定 应 该 从 父 元 素 继 
承 list-style-image 属性 的 值 。 
此 实例 的 源 文件 名 是 myHtmlB184. html。 


496 在 多 个 条 目 中 获取 使 用 鼠标 选择 的 条 目 


此 实例 主要 通过 使 用 jquery-ui. min. js 和 jquery-ui. min. css 的 selectable() 方 法 实现 在 组 条 目 中 
获取 使 用 鼠标 选择 的 多 个 条 目 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,如 果 使 用 鼠标 选择 第 
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1.2、3、5 几 个 条 目 , 则 将 在 下 面 显 示 选 择 结果 .如 图 496-1 所 示 ; 如 果 使 用 鼠标 取消 选择 第 3 个 条 目 ， 
则 在 下 面 显 示 的 选择 结果 中 将 不 显示 第 3 个 条 目的 名 称 .如 图 496-2 所 示 。 当 然 ,所 有 条 目 可 以 任意 
测试 。 有 关 此 实例 的 主要 代码 如 下 。 





让 myHtmlA160 heml x Ee 
全 3 CD file///D/myWork/myHtmlA 字 三 A td 


5 3 CC Dfile///D/myWork/myHtmlA 安 三 








HTIL5+CSS3 从 入 门 到 精通 
HTIL5 从 入 门 到 精通 


HTML5 从 入 门 到 精通 


您 已 经 选择 了 ， 
Web 开 发 入 门 经 典 
精通 HTIL5+CSS3+JavaScript 网 页 设计 
HTWLS 游 戏 开发 


精通 HTNL5+CSS3+JavaScript 网 页 设计 
HTWL5+CSS3 从 入 门 到 精通 
HTNL5S 游 戏 开发 





图 496-1 图 496-2 


<!doctype html >< html >< head><meta charset = "UTF - 8"> 
< script src= "js/jquery- 3.1.1.min. js"></script> 
< script src= "js/jquery - ui.min. js"></script>< script type= "text/javascript"> 
$ (function() { 
$("#myItens" ). selectable({ // 获 取 选 择 的 多 个 条 目 
stop: function() { 
Var myResult = $ ( "#myResult" ).empty(); 
$(".ui- selected", this ) .each( function() { 
var myIndex = $ ( "#myItems 1i" ). index( this ); 
// 显 示 选 择 结果 
myResult. append("<br >" +$ ( "#myItems 1i" )[myIndex]. innerText ); 
D2} D2}); 
</script > 
<link rel = "stylesheet" href = "css/jquery - ui.min.css"><style type = "text/css"> 
x*{ margin:0; padding: 0; } 


-myContainer { margin:20px 30px;} /* 设 置 盒子 的 基本 样式 * / 
ul,ul li{list— style: none;} /* 取 消 无 序列 表 的 默认 样式 * / 
ul li{ padding:5px; margin - top:5px; margin - bottom:Spx;} 
ul li.ui- selected { background:cyan; } /* 设 置 选择 条 目的 样式 * / 
ul li:hover{ cursor:default;} 

</style></head> 


<body>< div class = "myContainer" align= "center"><ul id= "myItems"> 

<1i class = "ui- widget- content"> Web 开发 人 门 经 典 </1i> 

<1i class = "ui- widget content"> 精 通 HTML5 + CSS3 + JavaScript 网 页 设计 </1i> 

<1li class = "ui- widget- content"> HTML5 + CSS3 从 入 门 到 精通 </1i> 

<1li class = "ui- widget - content"> HTML5 从 入 门 到 精通 </1i> 

<1i class = "ui- widget- content"> HTML5 游戏 开发 </1i></ul > 

<p><span > 您 已 经 选择 了 : </span>< span id = "myResult"></span></p></div> 

</body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,selectable( ) 方 法 用 于 处 理 使 用 鼠标 





5 部 分 元 来 人》 


选择 的 单个 元 素 或 一 组 元 素 ,参数 中 的 stop 表示 在 停止 鼠标 动作 后 执行 这 部 分 代码 。 需 要 说 明 的 是 ， 
selectable() 方 法 是 可 选择 小 部 件 (Selectable Widget) 的 方法 ,因此 在 使 用 selectable() 方 法 时 必须 添 
加 jquery-ui. min. js 和 jquery-ui. min. css 两 个 文件 。 

此 实例 的 源 文件 名 是 myHtmlA160. html。 


497 ”使 用 伪 元 素 重 置 默认 的 颜色 选择 器 按钮 


此 实例 主要 定制 伪 元 素 ::-webkit-color-swatch-wrapper 和 : :-webkitrcolor- swatch, 从 而 实现 重 
置 默认 的 颜色 选择 器 按钮 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,下 面 一 个 按钮 是 默认 的 颜 
色 选 择 器 按钮 ,上 面 一 个 是 采用 渐变 色 定制 的 颜色 选择 器 按钮 ,如 图 497-1 所 示 , 单 击 任意 一 个 颜色 
选择 器 按钮 都 将 弹出 “颜色 ”对 话 框 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 497-1 


<! doctype html >< html >< head >< meta charset = "UTF - 8"> 
<script src= "js/jquery - 3.1.1.min. js"></script >< script language = "javascript"> 
$ (document). ready(function() { 
$ (" 井 myColorD1g"). change( function() {  // 选 择 颜 色 
$ ("body").css("background - color", this. value); 
DD); 
$ ("#ColorDlg"). change(function() { // 选 择 颜 色 
$("body").css("background - color"，this.value); });}); 
</script> 
< style type = "text/css"> 

.myColor{ } 

/* 重新 定制 颜色 选择 器 按钮 的 外 层 * / 

.myColor: : - webkit - color - swatch - wrapper { width:100px; height:50px; border - radius: 5px; box— 
shadow:0 15px 10px rgba(13,30,4,0.8); position:relative; left: - 10px; top: - 5px; border: 0px solid # 
777; background - image: - webkit ~ gradient(linear, 0 0, 100% 0,from(red), color - stop(15%, orange), 
color - stop(30%, yellow), color - stop(50%, green), color - stop(65%, darkcyan), color - stop(80%, 
blue), to(purple)); } 

/* 隐藏 内 层 颜 色 显示 部 分 */ 

.myColor: : — webkit - color - swatch { height:21px; position: relative; left: 140px; top:15px;display: 
none; } 

</style></head> 
<body><center> 
单 击 自 定义 颜色 选择 器 按钮 更 改 背 景 颜色 : < input id= "myColorDlg" type= "color” class = "myColor"/> 
<br><br><br> 
单 击 默认 颜色 选择 器 按钮 更 改 背景 颜色 : < input id = "ColorDlg" type = "color" /> </center > </body> 
</html > 


HTML5+CSS3 炫 酷 应 用 实例 集锦 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,: :-webkit-color-swatch- wrapper 伪 
元 素 对 应 默认 的 颜色 选择 器 按钮 的 外 层 ,::-webkit-color-swatch 伪 元 素 对 应 默认 的 颜色 选择 器 按钮 
的 内 层 , 因 此 定制 此 颜色 选择 器 按钮 就 是 设置 这 两 部 分 的 样式 。 这 两 部 分 可 以 同时 显示 ,此 实例 只 是 
设置 内 层 部 分 的 display: none 属性 隐藏 了 内 层 。 按 照 同样 的 思路 也 可 以 只 显示 内 层 , 不 显示 外 层 。 
此 实例 的 源 文件 名 是 myHtmlB165. html。 


498 ”使 用 伪 元 素 定制 日 期 选择 器 的 部 分 样式 


此 实例 主要 定制 伪 元 素 ::-webkit-datetime-edit-fields-wrapper、::-webkit- datetime-edit-text、 
::-webkit- datetime-edit-year-field : :-webkit-datetime-edit-month-field : :-webkit-datetime-edit-day-field , 
从 而 实现 定制 日 期 选择 器 的 部 分 样式 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,“ 出 生日 期 : "是 
默认 的 日 期 选择 器 ,“ 入 学 日 期 :" 是 采用 上 述 伪 元 素 定制 的 日 期 选择 器 ,如 图 498-1 所 示 。 有 关 此 实例 














的 主要 代码 如 下 。 
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图 498-1 


<!doctype html >< html >< head >< meta charset = UTF -8> 
<script src= "js/jquery - 3.1.1.min. js"></script >< script language = "javascript"> 
$ (document). ready(function() { 
$("#myBtn").click(function() {// 确 认 登 记 信息 
alert(" 您 登记 的 人 学 日 期 是 : "+ $ ("#myDate").prop("value")); }) }); 
</script> 
< style type = "text/css"> 
.myDate {background: green; } 
/* 重 新 定制 日 期 选择 器 的 可 编辑 部 分 背景 颜色 * / 
.myDate:: - webkit ~ datetime- edit- fields- wrapper { background: red;} 
/* 重 新 定制 日 期 选择 器 的 可 编辑 部 分 文本 颜色 , 即 两 条 左 斜 线 * / 
.myDate:: - webkit ~ datetime — edit- text {color: yellow; } 
/* 重 新 定制 日 期 选择 器 的 可 编辑 部 分 的 年 月 .日 文本 颜色 * / 
.myDate:: - webkit- datetime- edit- year- field, 
.myDate:: — webkit — datetime— edit — month ~ field, 
.myDate:: — webkit— datetime — edit — day- field { color: white;} 
input{width: 200px;} 
button{ width: 280px;} 
</style></head> 
<body>< center >< form style= "width: 400px;"> 
出 生日 期 : < input type= "date" id="myBirth" value= "1972- 08-05"/><br><br> 
人 学 日 期 : <input type = "date" id= "myDate" value = "1987 - 08- 23" class= "myDate" /> <br>< br><button 
type = "button”id = "myBtn" > 确认 登记 信息 </button></form></center> 
</body></html> 
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上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,. myDate: :-webkit- datetime-edit- 
text{ color: yellow;) 表 示 通 过 伪 元 素 ::-webkit-datetime-edit-text 设置 日 期 选择 器 的 可 编辑 文本 部 
分 的 颜色 为 黄色 。 下面 8 个 伪 元 素 是 webkit 专门 用 于 定制 输入 (或 选择 ) 日 期 的 . 即 ::-webkit- 
datetime-edit, : :-webkit-datetime-edit-fields-wrapper, : :-webkit-datetime-edit-text : :-webkit-datetime- 
edit-month-field, : :-webkit-datetime-edit-day-field, : :-webkit-datetime-edit-year-field : :-webkit-inner- 
spin-button, : :-webkit-calendar-picker-indicator。 


此 实例 的 源 文件 名 是 myHtmlB166. html。 


499 ”使 用 伪 元 素 重 置 文件 上 传 按钮 的 样式 


此 实例 主要 通过 定制 伪 元 素 ::-webkit-file-upload-button 重 置 文件 上 传 按钮 的 样式 。 当 在 
Google Chrome 浏览 器 中 显示 该 页 面 时 ,第 一 个 “选择 文件 ”按钮 是 使 用 伪 元 素 : :-webkit-file-upload- 
button 重新 定制 后 的 文件 上 传 按 钮 的 样式 ,第 二 个 “选择 文件 ”按钮 是 默认 的 文件 上 传 按 钮 的 样式 , 单 
击 第 一 个 “选择 文件 ”按钮 即 可 选择 图 像 文 件 , 并 显示 在 页 面 中 ,如 图 499-1 所 示 。 有 关 此 实例 的 主要 
代码 如 下 。 
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图 499-1 


<!doctype html ><html ><head><meta charset = UIF -8> 
<script src= "js/jquery -3.1.1.min. js"></script >< script language = "javascript"> 
function showImage() { // 当 从 本 地 计算 机 中 选择 文件 以 后 显示 图 像 
var myFile=$ ("input").get(0).files[0]; 
证 (!/image\ 人 A\w+ /.test(myFile.type)) { // 检 查 是 否 为 图 像 文件 
alert(" 请 确保 文件 为 图 像 类 型 "); return false; } 
var myReader = new FileReader( ); 
myReader. readAsBinaryString(myFile); // 以 二 进 制 形式 读 取 图 像 文 件 
myReader. onload = function(f) { 
var myDiv = document. getElementById( "myDiv"); 
var mySrc = "data:" + myFile. type + ";base64," + window. btoa(this. result); 
myDiv. innerHTML = '< img id= "myImage" src="'+mySrc+'"/>' }} 
</script> 
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< style type = "text/css"> 
.myFile{ } 
/* 重新 定制 文件 上 传 按 钮 的 样式 * / 
.myFile:: - webkit — file— upload— button { width: 100%;} 
input {width:395px;} 
img{border - radius: Spx;width:400px; height:250px;} 

</style></head> 
<body><p>< input type = "file" onchange = "showImage()" class= "myFile"/></p> 
<p>< input type = "file" /></p><div id= "myDiv"></div></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 .. myFile: :-webkit-file- upload- 
button { width: 100% ;) 表 示 在 : :-webkit-file-upload-button 伪 元 素 中 设置 按钮 的 宽度 是 全 部 充满 状 
态 , 即 隐藏 "未 选择 任何 文件 ”等 提示 文本 。 当 然 ,也 可 以 定制 background-color 等 其 他 CSS 样式 。 

此 实例 的 源 文件 名 是 myHtmlB167. html。 


500 ”使 用 伪 元 素 去 掉 数 字 选 择 器 的 上 、 下 按钮 


此 实例 主要 通过 在 伪 元 素 : :-webkit-textfield-decoration-container 、: :-webkit-innerspin-button 、 
::-webkitrouter-spin-button 中 设置 CSS 样式 实现 去 掉 数 字 选 择 器 的 上 、 下 按钮 。 当 在 Google 
Chrome 浏览 器 中 显示 该 页 面 时 ,“ 公 司 女 工人 数 :" 是 默认 的 数字 选择 器 ,因此 可 以 通过 单 击 右 端的 
上 、 下 按钮 选择 数字 ;“ 公 司 男 工人 数 :" 是 定制 的 数字 选择 器 , 右 端 没有 选择 数字 的 上 、 下 按钮 ,并且 背 
景 呈 现 灰色 ,如 图 500-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 500-1 


<!doctype html >< html >< head >< meta charset = UIF -8> 
<style type= "text/css"> 
.myNumber{ } 
/* 设 置 背景 颜色 为 浅 灰 色 * / 
.myNumber: : — webkit - textfield— decoration - container{ 
background- color: lightgray;} 
/* 去 掉 右 端的 上 、 下 按钮 * / 
.myNumber: : — webkit — inner - spin ~— button, .myNumber: : - webkit ~ outer — spin 一 button { 
— webkit - appearance: none; } 
button{ width: 395px; } 
input {width:130px;} 
</style></head> 
<body>< center >< form > 公司 男 工人 数 : < input type = "number" name = "myAge" min = "5" max = "1000" class = 
"myNumber"/>(5 - 1000 的 数字 )<br ><br> 
公司 女工 人 数 : < input type = "number" name = "myRhge”min = "1"”max= "1000"/>(1- 1000 的 数字 )<br> 
<br><button type = "submit" value = "提交 "> 提交 注册 信息 </button > </form></center></body></html > 
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上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,::-webkit-textfield- decoration- 
container, : :-webkit-inner-spin-button、 : :-webkit-outer-spin-button 是 input[ type 二 number | 数字 选 
择 器 在 Google Chrome 浏览 器 中 被 支持 的 3 个 伪 元 素 , 如 果 需 要 定制 数字 选择 器 的 样式 ,直接 在 其 中 
添加 CSS 代码 即 可 。 

此 实例 的 源 文件 名 是 myHtmlB168. html。 


501 使 用 伪 元 素 重 置 range 元 素 的 滑 块 . 滑 槽 


此 实例 主要 通过 在 伪 元 素 ::-webkit-slider-runnable-track、: :-webkit-slider-thumb 中 设置 CSS 
样式 实现 改变 range 元 素 的 默认 样式 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,“ 拖 动 滑 块 改变 
图 像 透 明度 :" 是 新 定制 的 range 元 素 , 滑 块 位 于 滑 槽 中 ,可 以 通过 拖 动 滑 块 改变 图 像 的 透明 度 ;“ 拖 动 
滑 块 改变 图 像 的 尺寸 :" 是 默认 的 range 元 素 , 滑 块 位 于 轴 心 线 上 ,可 以 通过 拖 动 滑 块 改变 图 像 的 大 
小 ,如 图 501-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 501-1 


<!doctype html >< html >< head >< meta charset = UTF -8> 
< script src= "js/jquery -3.1.1.min.js"></script >< script language = "javascript"> 
$ (document). ready(function() { 


function myFunc() { // 获 取 滑 块 的 当前 值 并 转换 成 Float 
var myValue = parseFloat( $ ("#myOpacity").prop("value")); 
$ ("img").css("opacity", myValue); // 根 据 滑 块 值 重 置 图 像 的 透明 度 


var myHeight = parseFloat( $ (" 井 myHeight").prop("value" )); 
$ ("img").css("height", myHeight * 100 + " % "); // 根 据 滑 块 值 重 置 图 像 的 大 小 
} 
setInterval(myFunc, 1); }); 
</script> 
<style type= "text/css"> 
-myRange{ } 
.myRange: : — webkit - slider - runnable ~ track { /* 定制 滑 模 x*/ 
border: 1px solid black; background: lightgray;} 
/* 定 制 滑 块 x*/ 
.myRange: : - webkit - slider - thumb {margin: 1px;} 
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form{ height: 300px; } 
img{ height: 50 % ; border - radius: 5px;} 
</style></head> 


<body >< center >< form> 拖 动 滑 块 改变 图 像 透明 度 : < input type = "range" id= "myOpacity" min = "0" max = 


"1" value= "0.5" class= "myRange" step="0.1"/><br> 


拖 动 滑 块 改变 图 像 的 尺寸 : < input type = "range" id= "myHeight" min= "0" max="1" value= "0.5" step= 


"0.05" /><br><br> 
< img src = "img/B157B. jpg" ></form></center ></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,::-webkit-slider- runnable-track 伪 
元 素 的 CSS 代码 用 于 设置 range 元 素 的 滑 模 样式 , ::-webkitrslider thumb 伪 元 素 的 CSS 代码 用 于 设 
置 range 元 素 的 滑 块 样式 。 这 两 个 伪 元 素 是 range 元 素 在 Google Chrome 浏览 器 中 被 支持 的 两 个 伪 


,如 果 需 要 定制 range 元 素 的 样式 ,直接 在 其 中 添加 CSS 代码 即 可 。 
此 实例 的 源 文件 名 是 myHtmlB169. html。 


502 ”使 用 伪 元 素 重 置 progress 元 素 的 样式 





此 实例 主要 通过 在 伪 元 素 : :-webkit-progress-inner-element、::-webkit-progress-bar、::-webkit- 


progress-value 中 设置 CSS 样式 改变 progress 元 素 的 默认 样式 。 当 在 Google Chrome 浏览 器 中 显示 
该 页 面 时 , 单 击 “ 启 动 默认 进度 条 ”按钮 , 则 默认 进度 条 的 进度 更 新 效果 如 图 502-1 所 示 ; 单 击 “ 启 动 定 
制 进度 条 ”按钮 , 则 定制 进度 条 的 进度 更 新 效果 如 图 502-2 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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启动 默认 进度 条 | 局 动 定制 进度 条 | | 启动 默认 进度 条 [启动 定制 进度 条 ] 
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<!doctype html >< html >< head ><meta charset = UTF -8> 


< script src= "js/jquery - 3.1.1.min. js"></script>< script language = "javascript"> 
$ (document). ready(function() { 
var myValue = 0; var myTimer; 
function myDefaultBarFunc() { myValue++; 
$ ("#myDefaultBar"). val(myValue); 
if (myValue>=$ ("#myDefaultBar").prop("max")) { 
clearInterval(myTimer); 
be 
$ ("#myBtnDefault").click(function() { // 启 动 默认 进度 条 
myValue = 0; 
myTimer = setInterval(myDefaultBarFunc, 100); 
D; 
function myCustomBarFunc() { myValue++; 
$ ("#myCustonBar"). val(myValue); 
if (myValue>=$ ("#myCustomBar").prop("max")) { 





gow A 


clearInterval(myTimer); 


EE 
$ ("#myBtnCustom"). click(function() { // 启 动 定制 进度 条 
myValue= 0; 
myTimer = setInterval(myCustomBarFunc, 100); });}); 
</script > 


<style type= "text/css"> 
progress{ width: 280px;} 
.myProgress { - webkit - appearance: none; } 
.myProgress: : — webkit — progress — inner 一 element { 
background — color: green; border: 1px solid black; } 
.myProgress: : — webkit - progress - bar { border: lpx solid black; background - color: aqua; height: 
70%; margin - top: 2px; } 
.myProgress: : - webkit - progress ~ value { background: red;} 
button { width: 190px; } 
</style></head> 
<body><center ><form> 
<p><button id = "myBtnDefault" type = "button"> 启 动 默认 进度 条 </button> 
< button id = "myBtnCustom" type = "button"> 启 动 定制 进度 条 </button ></p> 
<p > 默认 的 进度 条 : <progress value= "0" max= "100" id= "myDefaultBar" ></progress> </p><p> 
定制 的 进度 条 : <progress value = "0" max="100" id= "myCustomBar" class = "myProgress"></progress ></p> 
</form></center ></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,: 


::-webkit-progress-inner- 





element, : :-webkit-progress-bar、 : :-webkit-progress-value 是 progress 元 素 在 Google Chrome 浏览 
器 中 被 支持 的 3 个 伪 元 素 ,这 3 个 伪 元 素 的 层次 关系 依次 是 由 大 到 小 ,由 外 层 到 里 层 , 如 果 需 要 定制 
progress 元 素 的 样式 ,直接 在 其 中 添加 CSS 代码 即 可 。 此 实例 为 了 区 分 这 3 层 的 关系 ,特别 在 每 一 层 
中 分 别 使 用 了 green、aqua、red 几 种 颜色 。 


此 实例 的 源 文 件 名 是 myHtmlB170. html。 


503 ”使 用 伪 元 素 自 定义 深 动 条 的 轨道 等 样式 


此 实例 主要 在 伪 元 素 ::-webkit-scrollbar-track、::-webkit-scrollbar-thumb、: :-webkit-scrollbar 


中 设置 CSS 样式 ,从 而 实现 改变 拥有 overflow 属性 的 元 素 的 默认 滚动 条 样式 。 当 在 Google Chrome 
浏览 器 中 显示 该 页 面 时 ,上 面 显示 的 蓝 色 圆 角 滚 动 条 是 定制 的 滚动 条 ,下 面 显示 的 灰色 滚动 条 是 默认 
的 滚动 条 ,如 图 503-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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<! doctype html ><html ><head><meta charset = UTF -8> 
< style type= "text/css"> 
.scrollbar: : — webkit — scrollbar { width: 16px;} 
/* 定义 滚动 条 的 轨道 ,内 阴影 */ 
.scrollbar: : - webkit — scrollbar - track { — webkit - box - shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); 
border - radius: Opx; background - color: lightgray; } 
/x* 定义 滑 块 ,内 阴影 及 圆 角 */ 
.scrollbar: : - webkit — scrollbar - thumb {border - radius: 10px; — webkit - box - shadow: inset 0 0 6px 
rgba(0, 0, 0, 0.3); background - color: deepskyblue;} 
</style></head> 
<body><center ><form> <p> 显 示 定 制 的 滚动 条 : <textarea class = "scrollbar"> 台 北 故宫 博物 院内 收藏 有 自 
南京 国立 中 央 博 物 院 筹备 处 、 国 立 北平 故宫 博物 院 和 国立 北平 图 书馆 等 所 藏 来 自 北京 故宫 .沈阳 故宫 .避暑 山 
庄 .颐和园 . 静 宜 园 和 国子监 等 处 的 皇家 旧 藏 。 所 藏 的 商 周 青铜 器 ,历代 的 玉器 、 陶 瓷 .古籍 文献 ,名画 碑 帖 等 皆 
为 稀世 之 珍 。 展 馆 每 三 个 月 更 换 一 次 展品 。 截 至 2014 年 底 , 馆藏 文物 达 69. 6 万 余 件 文物 。</textarea ></p> 
<p> 显 示 默 认 的 滚动 条 : < textarea > 台北 故宫 博物 院内 收藏 有 自 南 京 国立 中 央 博 物 院 筹备 处 、 国 立 北 平 故 宫 
博物 院 和 国立 北平 图 书馆 等 所 藏 来 自 北京 故宫 ,沈阳 故宫 .避暑 山庄 .颐和园 , 静 宜 网 和 国子监 等 处 的 皇家 旧 藏 。 
所 藏 的 商 周 青铜 器 ,历代 的 玉器 、 陶 瓷 .古籍 文献 .名 画 碑 帖 等 皆 为 稀世 之 珍 。 展 馆 每 三 个 月 更 换 一 次 展品 。 截 
至 2014 年 底 , 馆 藏 文物 达 69.6 万 余 件 文物 。</textarea></p></form></center ></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,::-webkit-scrollbar-track、: :-webkit- 
scrollbarthumb 、: :-webkit-scrollbar 是 在 Google Chrome 浏览 器 中 被 支持 的 3 个 伪 元 素 , 这 些 伪 元 
素 支 持 拥有 overflow 属性 的 区 域 . 列 表 框 、 下 拉 菜 单 、textarea 等 元 素 的 滚动 条 自 定义 样式 。 关 于 滚 
动 条 样式 定制 的 伪 元 素 的 功能 说 明 如 下 。 

(1) ::-webkitrscrollbar: 用 于 自 定 义 滚 动 条 整体 部 分 。 

(2) ::-webkitrscrollbarthumb: 用 于 自 定义 滚动 条 里 面 的 小 方块 ,能 上 下 左右 移动 (取决 于 是 垂 
直 滚 动 条 还 是 水 平 滚动 条 ) 。 

(3) ::-webkitscrollbar-track: 用 于 自 定义 滚动 条 的 轨道 (里 面 装 有 thumb) 。 

(4) ::-webkit-scrollbar-button: 用 于 自 定义 滚动 条 轨道 两 端的 按钮 ,允许 通过 单 击 微调 小 方块 


(5) ::-webkit-scrollbar-track-piece: 用 于 自 定 义 内 层 轨 道 , 除 去 滚动 条 的 中 间 部 分 。 
(6) ::-webkit-scrollbar-corner: 用 于 自 定义 边 角 以 及 两 个 滚动 条 的 交汇 处 。 

: :-webkit-resizer: 自 定义 两 个 滚动 条 的 交汇 处 用 于 通过 拖 动 调整 元 素 大 小 的 小 控件 。 
此 实例 的 源 文件 名 是 myHtmlB171. html。 


504 ”使 用 伪 元 素 定制 默认 深 动 条 的 显示 样式 


此 实例 主要 在 选择 器 :start 和 :end 以 及 伪 元 素 ::-webkit-scrollbar、::-webkit- scrollbar-track、 
::-webkit-scrollbarthumb 中 设置 CSS 样式 ,从 而 实现 改变 拥有 overflow 属性 的 元 素 的 默认 滚动 条 
样式 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,上 面 显示 的 蓝 色 圆 角 滚动 条 是 定制 的 滚动 条 ,该 
滚动 条 的 滑 块 上 面部 分 的 轨道 呈现 绿色 .下 面部 分 的 轨道 呈现 红色 ; 下 面 显 示 的 灰色 滚动 条 是 默认 的 
滚动 条 ,如 图 504-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 

<!doctype html >< html >< head >< meta charset = UTF -8> 

< style type = "text/css"> 
.myScrollbar, textarea{ width: 250px; height: 100px; } 
.myScrollbar: : - webkit ~ scrollbar { width: 16px;} 
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/* 设 置 垂 直 滚 动 条 的 上 半边 或 水 平 滚动 条 的 左 半边 背景 为 绿色 * / 

.myScrollbar: : ~ webkit — scrollbar - track -piece:start {background— color: green;} 

/V* 设 置 垂直 滚动 条 的 下 半边 或 水 乎 滚动 条 的 右 半边 背景 为 红色 = / 

.myScrollbar: : - webkit — scrollbar - track - piece:end {background - color: red;} 

/=* 定 义 滚动 条 的 轨道 ,内 阴影 * / 

.myScrollbar: : - webkit — scrollbar ~ track { - webkit ~ box — shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); 
border - radius: 0px; background - color: lightgray; } 

/* 定 义 滑 块 ,内 阴影 及 圆 角 */ 

.myScrollbar:: — webkit — scrollbar - thumb {border - radius: 10px; background — color: deepskyblue; 
— webkit ~ box - shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);} 
</style></head> 
<body>< center >< form><p> 显 示 定制 的 滚动 条 : <textarea class = "myScrollbar"> 赤 壁 之 战 ,是 指 孙 权 、 刘 备 
联军 于 建安 十 三 年 (208 年 ) 在 长 江 赤壁 ( 今 湖 北 省 赤壁 市 西北 ) 一 带 大 破 八 十 万 曹军 , 葛 定 三 国 三 足 鼎 立 基础 的 
以 少 胜 多 ,以 弱 胜 强 的 著名 战役 。 这 是 中 国 历史 上 以 弱 胜 强 , 以 少 胜 多 的 著名 战争 之 一 ,也 是 三 国 时 期 "三 大 战 
役 "中 最 为 著名 的 一 场 。 它 也 是 中 国 历史 上 第 一 次 在 长 江 流 域 进行 的 大 规模 江河 作战 , 标志 着 中 国 军事 政治 中 
心 不 再 限于 黄河 流域 。 孙 刘 联 军 以 火 攻 大 破 曹军 ,曹操 北 回 , 孙 . 刘 各 自 夺 去 荆州 的 一 部 分 。</textarea></p> 

<p> 显 示 默 认 的 滚动 条 : < textarea > 赤壁 之 战 ,是 指 孙 权 、 刘 备 联军 于 建安 十 三 年 (208 年 ) 在 长 江 赤 壁 ( 今 湖 
北 省 赤壁 市 西北 ) 一 带 大 破 八 十 万 曹军 ,奠定 三 国 三 足 髓 立 基础 的 以 少 胜 多 ,以 弱 胜 强 的 著名 战役 。 这 是 中 国 历 
史上 以 弱 胜 强 , 以 少 胜 多 的 著名 战争 之 一 ,也 是 三 国 时 期 "三 大 战役 "中 最 为 著名 的 一 场 。 它 也 是 中 国 历史 上 第 
一 次 在 长 江 流域 进行 的 大 规模 江河 作战 ,标志 着 中 国 军事 政治 中 心 不 再 限于 黄河 流域 。 孙 刘 联 军 以 火 攻 大 破 曹 
军 ,曹操 北 回 , 孙 、 刘 各 自 夺 去 荆州 的 一 部 分 。</textarea> </p></form></center ></body ></html > 
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场 。 它 也 是 中 国 历史 上 第 一 次 在 长 江 深 
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图 504-1 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,::-webkit-scrollbar- track、::-webkit- 


scrollbar-thumb、: :-webkit-scrollbar 是 在 Google Chrome 浏览 器 中 被 支持 的 滚动 条 样式 定制 的 3 个 
伪 元 素 , :start 和 :end 是 支持 Google Chrome 浏览 器 的 滚动 条 样式 定制 的 两 个 选择 器 ,这 些 伪 元 素 和 
选择 器 支持 拥有 overflow 属性 的 区 域 .列表 框 、 下 拉 莱 单 、textarea 等 元 素 的 滚动 条 自 定义 样式 。 大 
多 数 选择 器 都 可 以 应 用 到 伪 元 素 中 ,常用 的 选择 器 说 明 如 下 。 

(1) horizontal: horizontal 选择 器 适用 于 任何 水 平方 向 的 滚动 条 。 

(2) vertical : vertical 选择 器 适用 于 任何 垂直 方向 的 滚动 条 。 

(3) decrement: decrement 选择 器 适用 于 表示 递减 的 按钮 或 轨道 碎片 ,例如 可 以 使 区 域 向 上 或 者 


向 右 移动 的 


区 域 和 按钮 。 


(4) increment: increment 选择 器 适用 于 表示 递增 的 按钮 或 轨道 碎片 ,例如 可 以 使 区 域 向 下 或 者 


向 左 移动 的 





区 域 和 按钮 。 
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(5) start: start 选择 器 适用 于 按钮 和 轨道 碎片 ,表示 对 象 是 否 放 在 滑 块 的 前 面 。 
(6) end: end 选择 器 适用 于 按钮 和 轨道 碎片 .表示 对 象 是 否 放 在 滑 块 的 后 面 。 


(7) double-button: double-button 选择 器 适用 于 按钮 和 轨道 碎片 ,判断 轨道 结束 的 位 置 是 否 为 
一 对 按钮 ,也 就 是 轨道 碎片 紧 挨 着 一 对 在 一 起 的 按钮 。 





(8) single-button: single-button 选择 器 适用 于 按钮 和 轨道 碎片 ,判断 轨道 结束 的 位 置 是 否 为 一 
个 按钮 ,也 就 是 轨道 碎片 紧 挨 着 一 个 单独 的 按钮 。 


(9) no-button: no-button 选择 器 表示 轨道 结束 的 位 置 没有 按钮 。 

(10) corner-present: corner-present 选择 器 表示 滚动 条 的 角落 是 否 存在 。 

(11) window-inactive: window-inactive 选择 器 适用 于 所 有 滚动 条 ,表示 包含 滚动 条 的 区 域 , 焦 点 
不 在 该 窗口 的 时 候 。 

此 实例 的 源 文件 名 是 myHtmlB172. html。 


505 ”使 用 伪 元 素 定制 密 钥 对 生成 器 字段 的 样式 


此 实例 3 





E 要 通过 在 伪 元 素 ::-webkit-keygen-select 中 设置 CSS 样式 实现 改变 密 钥 对 生成 器 字段 
的 默认 样式 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,定制 的 密 钥 对 生成 器 字段 :" 展 开 后 的 效 
果 如 图 505-1 所 示 光 默认 的 密 钥 对 生成 器 字段 :” 展 开 后 的 效果 如 图 505-2 所 示 。 有 关 此 实例 的 3 
代码 如 下 。 
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定制 的 窗 钥 对 生成 器 字段 : 时 


默认 的 密 钥 对 生成 器 字段 : [2048 (高 强度 ) 


定制 的 窗 钥 对 生成 器 字段 : EUETETI 


默认 的 密 钥 对 生成 器 字段 : 


了 





图 505-1 图 505-2 


<!doctype html >< html >< head >< meta charset = UTF -8> 
< style type = "text/css"> 
.myKeygen{ } 
.myKeygen: : — webkit - keygen - select { border: lpx solid # A0B3D6; 


background - color:blue; color: yellow; } 
</style></head> 


<body><center ><form action="/" method= "get"> 
<br > 定制 的 密 钥 对 生成 器 字段 : < keygen name = "securityCustom" class = "myKeygen" /> 


<br><br><br><br> 上 默认 的 密 钥 对 生成 器 字段 : <keygen name = "securityDefault" /> 
</form ></center ></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,::-webkit-keygen-select 是 在 Google 
Chrome 浏览 器 中 被 支持 的 改变 密 钥 对 生成 器 字段 的 伪 元 素 ,如 果 需 要 定制 密 钥 对 生成 器 字段 (元 素 ) 
的 显示 样式 ,只 需要 在 该 伪 元 素 中 添加 CSS 代码 即 可 。 

此 实例 的 源 文件 名 是 myHtmlB173. html。 
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506 ”使 用 伪 元 素 自 定义 meter 度量 衡 的 样式 


此 实例 主要 在 伪 元 素 ::-webkit-meter-bar,::-webkit-meter-optimum-value、::- webkit-meter- 
suboptimum-value、 : :-webkit-meter-even-less-good-value 中 设置 CSS 样式 .从 而 实现 改变 meter 元 
素 的 默认 样式 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 默认 的 meter 元 素 :" 和 * 定 制 的 meter 
元 素 :” 的 显示 效果 如 图 506-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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<!doctype html >< html >< head><meta charset = UTF - 8> 
< style type = "text/css"> 
.myMeter { } 
. myMeter: : — webkit - meter - bar { height: lem; background; gray; 
border: lpx solid black; } 
:: webkit - meter ~ optimum ~ value { background: green;} 
webkit - meter — suboptimum - value { background: yellow; } 
. myMeter: : — webkit - meter ~ even - less - good - value { background: red;} 
</style></head> 
<body >< center >< form action = "/" method = "get"> 
<p > 默认 的 meter 元 素 : 
<meter low= "69" high = "80" max="100" optimum= "100" value = "100"> 优 </meter> 
<meter low= "69" high= "80" max="100" optimum = "100" value= "70"> 良 </meter> 
<meter low= "69" high = "80" max="100" optimum= "100" value = "10"> 差 </meter ></p> 
<p> 定 制 的 meter 元 素 : 
<meter class = "myMeter" low="69" high= "80" max = "100" optimum= "100" value = "100"> 优 </meter> 
<meter class = "myMeter" low="69" high= "80" max = "100" optimum = "100" value= "70"> 良 </meter> 
<meter class = "myMeter" low= "69" high = "80" max = "100" optimum = "100" value = "10"> 差 </meter ></p> 
</form></center ></body ></html > 





上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,::-webkit-meter-bar 伪 元 素 用 于 设 
置 meter 元 素 3 个 bar 的 共同 样式 ,::-webkit-meter-optimum-value 伪 元 素 用 于 设置 meter 元 素 “ 优 ” 
bar 的 样式 ,::-webkit-meter-suboptimum-value 伪 元 素 用 于 设置 meter 元 素 “ 良 ”bar 的 样式 ， 
: :-webkit-meter-even-less-good-value 伪 元 素 用 于 设置 meter 元 素 “ 差 ”bar 的 样式 。 

此 实例 的 源 文件 名 是 myHtmlB174. html。 


507 ”使 用 伪 元 素 重 置 placeholder 占 位 符 


此 实例 主要 通过 设置 伪 元 素 : :-webkit-input-placeholder 实现 重 置 输入 框 的 placeholder 占 位 符 
的 样式 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,在 输入 框 中 显示 的 浅 蓝 色 文本 “输入 专业 首 字 试 
试 ?就 是 重 置 之 后 的 样式 ,如 图 507-1 所 示 , 默 认 该 文本 的 颜色 是 暗 灰 色 。 有 关 此 实例 的 主要 代码 如 下 。 
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<! doctype html >< html >< head >< meta charset = "UTF — 8"> 
<style> 
/* 设 置 placeholder 占 位 符 文本 颜色 为 浅 蓝 色 */ 
::— webkit ~ input ~ placeholder { color: lightblue;} 
</style></head> 
<body>< section align = "center"> 所 学 专业 : 
<input id = "myMajor” list = "myData” placeholder = "输入 专业 首 字 试 试 "/> 
<datalist id = "myData"> 
<option value = "计算 机 应 用 "><option value = "计算 机 网 络 "> 
<option value = "计算 机 教育 "><option value = "视觉 传达 设计 "> 
<option value = "信息 与 计算 科学 "></datalist></ section></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,placeholder 是 HTML5 中 input 元 
素 的 新 属性 ,英文 意思 是 占 位 符 , 它 一 般 表 示 input 输入 框 的 默认 提示 值 。 如 果 需 要 修改 该 属性 的 默 
认 样 式 , 应 该 在 伪 元 素 ::-webkit-input-placeholder 中 设置 。 在 伪 元 素 : :-webkit-input-placeholder 中 
可 以 设置 几 个 和 文本 有 关系 的 CSS 样式 ,例如 color、font-style、 font-variant、 background、 text- 
decoration 等 。 


此 实例 的 源 文件 名 是 myHtmlB192. html。 


508 ”使 用 伪 元 素 隐藏 搜索 框 右 侧 的 取消 按钮 


此 实例 主要 在 伪 元 素 ::-webkit-search-cancel-button 中 设置 display 属性 为 none, 从 而 实现 隐藏 
搜索 框 右 侧 的 取消 按钮 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,如 果 在 上 面 的 搜索 框 中 输入 
内 容 , 则 不 显示 取消 按钮 *X”; 如 果 在 下 面 的 搜索 框 中 输入 内 容 , 则 将 显示 默认 的 取消 按钮 "X”, 单 击 
取消 按钮 "XxX”, 将 清除 刚才 输入 的 内 容 , 如 图 508-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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<!doctype html >< html >< head >< meta charset = UIF -8> 
< style type= "text/css"> 
井 myCancel: : - webkit — search- cancel- button {display: none;} 
input {width:280px; } 
</style></head> 
<body >< center >< form><br> 


<label > 请 在 下 面 的 搜索 框 中 输入 内 容 ( 右 侧 无 取消 按钮 ) : </label ><br> 
< input id = "myCancel" type = "search"/> 


<button type = "submit"> 开 始 搜索 </button ></form><br/> 


<form>< label > 请 在 下 面 的 搜索 框 中 输入 内 容 ( 右 侧 有 取消 按钮 ): </label >< br> 
< input id = "myNormal" type = "search"/> 


<button type = "submit"> 开 始 搜索 </button ></form></center ></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , : :-webkitrsearch-cancel- button 伪 
元 素 用 于 管理 搜索 框 的 取消 按钮 ; display: none 表示 隐藏 该 取消 按钮 。 
此 实例 的 源 文件 名 是 myHtmlB219. html。 


509 ”使 用 伪 元 素 使 range 滑 槽 呈现 渐变 色 


此 实例 主要 在 伪 元 素 : :-webkit-slider-runnable-track 、: :-webkitsliderthumb 中 设置 CSS 样式 
从 而 实现 range 滑 槽 根据 当前 位 置 呈现 渐变 色 风 格 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ， 
拖 动 新 定制 range 的 红色 圆 形 滑 块 向 右 滑动 , 则 红色 圆 形 滑 块 左 侧 的 滑 槽 将 呈现 浅 蓝 色 的 渐变 色 ,并 
且 滑 槽 的 渐变 色 变化 随 着 红色 圆 形 滑 块 的 位 置 变化 而 变化 ,当然 下 面 的 图 像 透 明度 也 随 着 红色 圆 形 
滑 块 的 位 置 变化 而 变化 ,如 图 509-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 


盏 -= 口 x 








DD myHtmlB245 html x 


全 3 © Dfie///D/myWork/myHtmlB245.ht 字 三 


滑 块 当前 (图 像 透明 度 的 百分比 值 ) 位 置 ，41.7 





图 509-1 


<!doctype html >< html>< head >< meta charset = "UTF - 8"> 


< script src= "js/jquery - 3.1.1.min. js"></script>< script type = "text/javascript"> 
$ (function() { 


$ .fn. RangeSlider = function(myPara) { 
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this. mySlider = { 
min: myPara && ! isNaN(parseFloat (myPara.min)) ? Number(myPara. min) : null, 
max: myPara && ! isNaN(parseFloat (myPara.max)) ? Number(myPara. max) : null, 
step: myPara && Number(myPara. step) ? myPara. step : 1, 
callback: myPara && myPara. callback ? myPara. callback : null }; 
var $ myRange = $ (this); var min= this.mySlider.min; 
var max = this. mySlider. max; var step = this. mySlider. step; 
var callback = this. mySlider. callback; 
$ myRange. attr('min', min).attr( 'max', max).attr('step', step); 
$ myRange. bind(" input", function(e) { 
$ myRange. attr('value', this. value); 
// 根 据 当 前 值 创建 线性 渐变 的 背景 
$ myRange. css( 'background', 'linear ~ gradient(to right, #059CEA, white '+ this. value +'%, white)'); 
证 ($.isFunction(callback)) { callback(this); } });}; 
var change = function ( $ myRange) { 
$('#myCurrentValue' ).text(' 滑 块 当前 (图 像 透 明度 的 百分比 值 ) 位 置 : '+ $ myRange. value); 
// 根 据 滑 块 值 重 置 图 像 的 透明 度 
$ ("img").css("opacity", (100—$ myRange.value)/ 100); 
} 
$ ("input'). RangeSlider( {min: 0, max: 100, step: 0.1, callback: change});}); 
</script > 
<style type = "text/css"> 
input[type = range] { — webkit— appearance: none; width: 400px; border — radius: 10px; } 
input[type = range]: : - webkit - slider - thumb { - webkit - appearance: none; } 
/* 定 制 滑 槽 * / 
input[type = range]:: - webkit - slider - runnable - track {height: 15px;border - radius: 10px; box - 
shadow: 0 1px 1px # DEF3F8，inset 0 0.125em 0.125em #0D1112;} 
input[type = range] :focus { outline: none;} 
/* 定 制 滑 块 (红色 的 圆 饼 ) * / 
input[type= range]:: - webkit— slider ~ thumb { - webkit- appearance: none; height: 25px; width: 25px; 
margin - top: — 5px; background: red; border - radius: 50% ;border: solid 0. 125em rgba(205, 224, 230, 
0.5); box— shadow: 0 0.125em 0. 125em #3B4547; } 
img { width:400px; height:250px; border- radius: 5px; margin: 10px;} 
</style></head> 
<body>< center ><p id= "myCurrentValue"> 滑 块 当前 (图 像 透明 度 的 百分比 值 ) 位 置 : </p> 
<div>< input type = "range" value = "0"></div> 
< img src = "img/B245. jpg"> </center ></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,::-webkit-slider- runnable-track 伪 
元 素 的 CSS 代码 用 于 设置 range 元 素 的 滑 模 样式; : :-webkit-slider- thumb 伪 元 素 的 CSS 代码 用 于 
设置 range 元 素 的 滑 块 样式 ; -webkit-appearance: none 用 于 去 除 系统 默认 appearance 的 样式 ,此 实 
例 即 是 取消 range 元 素 的 默认 样式 ; $ myRange. css('background', 'linear-gradient (to right， 
#059CFA，white ' 十 this. value 十 ' 中 ，white)' ) 用 于 根据 当前 滑 块 位 置 在 滑 块 左 侧 生成 渐变 色 的 
滑 槽 。 

此 实例 的 源 文件 名 是 myHtmlB245. html。 


510 ”使 用 伪 元 素 自 定义 渐变 色 风 格 的 滨 动 条 


此 实例 主要 在 伪 元 素 : :-webkit-scrollbar-track、: :-webkit-scrollbar-thumb、:: -webkit-scrollbar 
中 设置 CSS 样式 ,从 而 创建 自 定义 渐变 色 风 格 的 滚动 条 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 
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时 ,文字 的 右 侧 将 显示 红 绿 渐变 的 滚动 条 ,如 图 510-1 所 示 ; 拖 动 红 绿 渐变 的 滚动 条 文字 即 向 下 滚动 ， 
如 图 510-2 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
< style type= "text/css"> 
. myScrollbar: : - webkit - scrollbar - track { - webkit ~ box - shadow: inset 0 0 0 rgba(0, 0, 0, 0.8); 
background - color: lightgrey; } 
.myScrollbar: : -webkit scrollbar { width: 4px; } /* 设置 滚动 条 的 宽度 * / 
/* 设 置 滚动 条 的 渐变 色 滑 块 */ 
. myScrollbar: : - webkit - scrollbar - thumb {background - image: - webkit - gradient (linear, right 
bottom, left top, color - stop(0.30, lightgreen), color- stop(0.90, red)); } 
article { padding: 15px; overflow— y: scroll; height: 100px; background: lightgrey; 
border - radius: 2px; } 
</style></head> 
<body><article class= "myScrollbar"><p> 首 次 公开 募股 (Initial Public offerings, 简称 IP0) :是 指 一 家 企 
业 或 公司 (股份 有 限 公司 ) 第 一 次 将 它 的 股份 向 公众 出 售 ( 首 次 公开 发 行 , 指 股份 公司 首次 向 社会 公众 公开 招股 
的 发 行 方式 )。</p> 
<p > 通常 ,上 市 公司 的 股份 是 根据 相应 证 券 会 出 具 的 招股 书 或 登记 声明 中 约定 的 条 款 通过 经 纪 商 或 做 市 商 
进行 销售 。 一 般 来 说 ,一 旦 首次 公开 上 市 完成 后 ,这 家 公司 就 可 以 申请 到 证 券 交 易 所 或 报价 系统 挂牌 交易 。 有 
限 责 任 公司 在 申请 IP0 之 前 ,应 先 变更 为 股份 有 限 公 司 。</p></article></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,overflow-y: scroll 表示 对 内 容 的 上 / 
下 边缘 提供 滚动 机 制 ; height: 100px 表示 可 视 高 度 是 100px。 当 需要 元 素 支 持 深 动 功能 时 通常 应 该 
设置 上 述 两 个 属性 。. myScrollbar: :-webkit-scrollbar-track { } 用 于 自 定义 滚动 条 的 轨道 (里 面 装 有 
thumb) 样 式 ; . myScrollbar: :-webkit-scrollbar { } 用 于 自 定义 滚动 条 的 整体 部 分 ; . myScrollbar: : 
-webkit-scrollbar-thumb { } 用 于 自 定义 滚动 条 里 面 的 小 方块 ,能 上 下 左右 移动 (取决 于 是 垂直 滚动 条 
还 是 水 平 滚动 条 ) 。 

此 实例 的 源 文件 名 是 myHtmlB311. html。 


511 使 用 伪 元 素 实现 葵 形 滑 块 的 range 元 素 


此 实例 主要 在 伪 元 素 : :-webkit-slider-thumb 中 使 用 菱形 的 png 图 像 设置 range 元 素 的 滑 块 , 从 
而 实现 改变 range 元 素 默 认 的 矩形 风格 的 滑 块 样式 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ， 
拖 动 菱形 滑 块 即 可 改变 range 元 素 的 大 小 .效果 分 别 如 图 511-1 和 图 511-2 所 示 。 有 关 此 实例 的 主要 
代码 如 下 。 
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图 511-1 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<script src= "js/jquery -3.1.1.min. js"></script >< script type = "text/javascript"> 
$ (function(){// 响 应 鼠标 拖 动 滑 块 事件 
$ ("input[ type = range]").on("propertychange input", function(){ 
$ ("input[type= range]").css( ‘background— size’, $ (this).val()+'% 100%'); 
}) DD); 
</script> 
< style type= "text/css"> 
/* 设 置 range 的 基本 样式 */ 
.myRange{ — webkit - appearance: none; width: 350px; border - radius: 10px; background: - webkit— 
linear - gradient (green, lime) no- repeat; background — size: 0% 100% ; margin: 30px auto; } 
/* 使 用 萎 形 的 png 图 片 设置 range 的 滑 块 */ 
.myRange: : — webkit - slider ~ thumb { - webkit - appearance: none; height: 47px; width: 23px; margin— 
top: - 16px; background - repeat:no - repeat; background — image: url( img/B352. png); } 
/* 设 置 range 消 槽 的 基本 样式 * / 
.myRange: : - webkit - slider - runnable - track{ height: 15px; border - radius: 15px; box - shadow: 0 1px 
1px #DEF3F8, inset 0 0.125em 0.125em #0D1112; } 
.myRange:focus { outline: none; } /* 隐藏 焦点 状态 的 range 轮廓 线 * / 
</style></head> 
<body>< div align = "center">< input type = "range"” max = "100"” min = "0" value = "0" class = "myRange"/> 
</div></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,::-webkit-slider- runnable-track 伪 
元 素 的 CSS 代码 用 于 设置 range 元 素 的 滑 槽 样式 ; : :-webkit-slider- thumb 伪 元 素 的 CSS 代码 用 于 
设置 range 元 素 的 滑 块 样式 , 萎 形 滑 块 即 是 在 此 伪 元 素 中 通过 设置 背景 实现 的 。 如 果 需 要 在 Google 
Chrome 浏览 器 中 定制 range 元 素 的 样式 ,直接 在 其 中 添加 CSS 代码 即 可 。 

此 实例 的 源 文件 名 是 myHtmlB352. html。 


512 ”通过 for 属性 自 定义 默认 的 复 选 框图 标 


此 实例 主要 设置 label 元 素 的 背景 图 像 为 自 定义 复 选 框图 标 ,并 通过 for 属性 将 其 与 input 元 素 
关联 起 来 ,从 而 实现 自 定义 默认 的 复 选 框图 标 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 , 自 定义 
复 选 框图 标的 未 选中 状态 如 图 512-1 所 示 ; 单 击 之 . 则 显示 自 定义 复 选 框图 标的 选中 状态 ,如 图 512-2 
所 示 ; 再 单 击 之 , 则 显示 自 定义 复 选 框图 标的 未 选中 状态 ,如 图 512-1 所 示 。 有 关 此 实例 的 主要 代码 
如 下 。 


| 
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<!doctype html >< html ><head><meta charset = "UTF - 8"> 
< script src= "js/jquery - 3.1.1.min. js"></script >< script type = "text/javascript"> 
$ (function() { 
$$ (' 间 myCheckbox') .change(function() {// 获 取 复 选 框 的 checked 属性 值 
Var check = $ ('#myCheckbox'). prop( 'checked’); 
证 (check) {// 显 示 提 示 信 息 
$('#myStatus').text( 疏 已 选中 】'); 


} else{ 
$('#myStatus').text( 屠 未 选中 】'); }}); 
// 自 动 触发 change 事件 
$ ('#myCheckbox'). trigger('change'); }); 
</script> 
<style> 


井 myCheckbox { display: none; } 
井 myStatus，#myInfo { display: inline; } 
label { display: inline - block; width: 20px; height: 20px; background - image: url(img/B234A. png); 
background — size: 100% 100%;} 
#myCheckbox:checked + label { background - image: url(img/B234B. png);} 
</style></head> 
<body>< center> 
< input type = "checkbox" id = "myCheckbox"/>< label for = "myCheckbox"></label > 
<p id= "myInfo"> C# 高 级 编程 </p><p id= "myStatus"></p></center></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , # myCheckbox{ display: none;} 表 
示 隐 藏 复 选 框 ; < label for 一 "myCheckbox"> 表 示 将 label 元 素 与 隐藏 复 选 框 关联 起 来 ,因此 单 击 
label 元 素 即 是 单 击 隐 藏 复 选 框 。 在 CSS 中 ,label 元 素 可 用 于 为 input 元 素 服务 ,为 其 定义 标记 ,其 
for 属性 规定 label 与 哪个 表单 元 素 绑 定 。label 和 表单 控件 绑 定 的 方式 有 以 下 两 种 。 

(1) 将 表单 控件 作为 label 的 内 容 , 这 就 是 隐 式 绑 定 ,此 时 不 需要 for 属性 , 绑 定 的 控件 也 不 需要 
id 属性 。 

(2) 为 label 元 素 的 for 属性 命名 一 个 目标 表单 的 id, 这 就 是 显 式 绑 定 , 例 如 此 实例 中 的 < label for 一 
"myCheckbox">。 

此 实例 的 源 文件 名 是 myHtmlB234. html。 


513 ”通过 设置 五 星 字符 的 颜色 实现 星 级 评分 


此 实例 主要 通过 检测 鼠标 指针 悬浮 或 单 击 五 星 字 符 事 件 并 据 此 设置 五 星 字符 的 颜色 来 实现 星 
级 评分 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 .如 果 鼠 标 指针 悬浮 在 第 3 颗 星 上 , 则 会 显示 
浮动 框 提示 信息 ,例如 一般” 如 图 513-1 所 示 , 单 击 则 会 保存 选择 结果 。 有 关 此 实例 的 主要 代码 
如 下 。 
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图 513-1 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
< script type = "text/javascript"> 
window. onload = function() { 
var star = document. getElementById("star"); 
var myStar = star. getElementsByTagName( "1i"); 
var myInfo = document. getElementById("myInfo"); 
var result = document. getElementById("result"); 
var i=0; var j=0; var len = myStar.length; 
var word=[' 很 差 '，' 差 '，' 一 般 ',， "好"," 很 好 "] 
for (i=0; i<len; i++) { 
myStar[ i]. index = i; 


myStar[ i]. onmouseover = function() { // 响 应 鼠标 指针 基 浮 于 某 个 五 星 
for (i=0; i<len; i++) { // 设 置 所 有 五 星 为 未 选中 颜色 
myStar[i].className = "origin"; 
} 
myInfo. style. display = "block"; 
myInfo. innerHTML = word[ this. index]; 


for (i=0; i<=this. index; i++) { // 设 置 当前 五 星 至 开始 的 所 有 五 星 为 选中 颜色 
myStar[ i].className = "act"; 
}1 
myStar[i].onmouseleave = function () { // 响 应 鼠标 指针 离开 某 个 五 星 
for (i=0; i<len; i++) { // 设 置 所 有 五 星 为 未 选中 颜色 


myStar[i].className = "origin"; 
} 
myInfo. style. display = "none”"; 
for (i=0; i<=this. index; i++) { // 设 置 当 前 五 星 至 开始 的 所 有 五 星 为 选中 颜色 
myStar[i].className = "act"; 
jk 


myStar[ i]. onclick= function () { // 响 应 鼠标 单 击 某 个 五 星 
result. innerHTML = (this. index + 1) + "分 "; 


for (i=0; i<this. index; i++) { // 设 置 当前 五 星 至 开始 的 所 有 五 星 为 选中 颜色 
myStar[i].className= "act"; } } } } 
</script > 
< style type= "text/css"> 
.myBox { width: 300px; margin: 10px auto; font: 14px/1.5 arial; } 
#star { overflow: hidden; } 
#star li { float: left; width: 40px; height: 40px; margin: 2px; display: inline; color: #999; font: 
bold 36px arial; cursor: pointer; } 
#star .act { color: red; } 
#star .origin { color: gray; } 
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#myInfo { width: 80px; height: 30px; line - height: 30px; border: 1px solid #CCC; 
margin: 10px; text— align: center; display: none; } 
</style></head> 
<body>< center ><div class = "myBox"> 打分 结果 : 
<span id= "result"></span> 
<ul id= "star"><1i> 真 </1i><1i> 真 </1i><1i> 丰 </1i><1i> 真 </1i><1i> 真 </1i></ul> 
<div id= "myInfo"> 一 般 </div></div></center></body></htnml > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,display: inline 表示 此 元 素 会 被 显示 
为 内 联 元 素 ,元 素 前 后 没有 换行 符 ; mylnfo. style. display 二 "block" 表 示 此 元 素 将 显示 为 块 级 元 素 , 此 
元 素 前 后 会 带 有 换行 符 ; mylnfo. style. display 二 "none" 表 示 此 元 素 不 会 被 显示 ; # star . act{color; 
red;) 表 示 当 前 被 选中 (和 之 前 所 有 ) 五 星 以 红色 显示 ; #star . origin {color: gray;} 表 示 当 前 未 选中 
(和 之 后 所 有 ) 五 星 以 灰色 显示 。 

此 实例 的 源 文件 名 是 myHtmlB236. html。 


514 ”实现 以 不 同 的 颜色 代表 不 同 的 星 级 评分 


此 实例 主要 在 鼠标 指针 悬浮 或 单 击 事件 中 设置 星 级 评分 的 五 星 字符 颜色 和 评语 ,从 而 实现 以 不 
同 的 颜色 代表 不 同 的 星 级 评分 效果 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,评分 栏 处 于 初始 
状态 ,如果 鼠标 指针 悬浮 在 第 1 颗 五 星 上 , 则 会 显示 评语 信息 ,例如 * 垃 圾 ,简直 就 是 垃圾 !”, 并 且 第 1 
颗 五 星 呈 现 红 色 ,如 图 514-1 所 示 , 单 击 则 会 保存 选择 结果 ,如 图 514-2 所 示 ; 单 击 “ 重 新 进行 评分 " 按 
钮 , 则 评分 栏 处 于 初始 状态 ,如 果 鼠 标 指针 悬浮 在 第 4 颗 五 星 上 , 则 会 显示 评语 信息 ,例如 “不 错 ,还 可 
以 ”, 并 且 前 4 颗 五 星 呈 现 蓝 色 ,如 图 514-3 所 示 , 单 击 则 会 保存 选择 结果 ,如 图 514-4 所 示 。 其 他 五 星 
具有 类 似 的 功能 。 有 关 此 实例 的 主要 代码 如 下 。 





/ D myHtmlB341html x 是 
所 3 © Dfile///D/myWork/myHtmlB341.html 窑 国 














[ 重新 进行 评分 
六 六 六 六 次 垃圾 ， 简 直 就 是 垃圾 ! 
fe///C:/myWork/mytHtmB341 htmle 
图 514-1 





/ D myHtml8341html x \W 
€ 3 CC Dfile///D/myWork/myHtmlB341.html# 安 


x 











| 重新 进行 评分 ] 





垃圾 ， 简 直 就 是 垃圾 ! 





图 514-2 


人 > HTML5+CSS3 炫 酷 应 用 实例 集锦 








/ DY myttemle341html x \ 四 
€ 3 © Dfile///D/myWork/myHtmlB341.html# 











重新 进行 评分 





不 错 ， 还 可 以 





DD myHeml8341html x\ 


€ 3 © Dfile///D/myWork/myHtmlB341.html# 











[ 重新 进行 评分 





不 错 ， 还 可 以 





图 514-4 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<script src= "js/jquery -3.1.1.min. js"></script >< script type = "text/javascript"> 
$ (function() { 
for (var i=1; i<=5; it+) { // 响 应 鼠标 指针 拔 浮 于 五 星 
$ (".myStar" + i). hover(function() { 
var index= $ (this).attr("class"). substr(6, 1); 
for (var i= index; i>0; i-——){ // 设 置 五 星 颜色 
$ (".myStar" + i).addClass("c" + index) 7 
上 
Switch ( index) { // 设 置 五 星 评语 
case "1": 
$ (".myInfo").addClass("c1").text(" 垃 圾 ,简直 就 是 垃圾 !"); 
break; 
case "2": 
$ (".myInfo").addClass("c2").text(" 太 糟糕 了 !"); break; 
case "3": 
$ (".myInfo").addClass("c3"). text(" 一 般 般 吧 !");break; 
Case "4": 
$ (".myInfo").addClass("c4").text(" 不 错 ,还 可 以 ");break; 
Case "5": 
$ (".myInfo").addClass("c5"). text("Good, 一 次 愉快 的 购物 体验 !"); 
break; 
} }, function() { // 移 除 五 星 颜色 和 评语 设置 
var index =$ (this).attr("class"). substr(6, 1); 
for (var i= index; i>0; i-—-) { $(".myStar" +i).removeClass("c" + index); } 
$ (".myInfo").removeClass("c" + index). text(""); 
}); 
$ (".myStar" + i).bind("click", function() { // 响 应 鼠标 单 击 某 个 五 星 








var index =$ (this).attr("class"). substr(6, 1); 
for (var i=1; i<= index; i++) { $S(".myStar"+i).unbind(); } 


while (++index <=5) { // 评 分 之 后 清除 无 用 的 五 星 
$ (".myStar" + index).css("display", "none"); } });} 
$ ("#myBtnMark"). click(function() { // 重 新 进行 评分 
location. reload(); });}); 
</script> 


< style type= "text/css"> 
关 { margin: 0; 上 
.myBox { margin - top: 15px; width: 500px; } 
.list { margin: 20px 10px; width: 200px; float: left; } 
a{ font- size: 25px; text— decoration: none; color: lightgray; } 
span { font ~ size: 20px;line — height: 70px; } 
/* 设 置 每 档次 颜色 * / 
.cl { color: red; } .c2 { color: pink; } 
.c3 { color: cyan; } .c4 { color: blue; } 
.c5 { color: green; } 
button { margin - top: 20px; font- size: 20px; width:420px; } 
</style></head> 
<body> 
<div align = "center"> 
<button id = "myBtnMark"> 重 新 进行 评分 </button > 
<div class = "myBox"> < div class = "list"> 
<a href="#"class= "myStarl"> 丰 </a> <a href=" 井 ”class = "myStar2"> 友 </a> 
<a href="#"class= "myStar3"> 碎 </a><a href="#"class = "myStar4"> 太 </a> 
<a href ="#" class= "myStar5"> 真 </a></div> 
< span class = "myInfo"> 亲 , 请 客观 给 出 评价 </span></div></div></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , $$(". myStar" 十 D，addClass("c" 
index) 用 于 设置 五 星 颜 色 ,addClass() 方 法 是 jQuery 的 CSS 属性 操作 方法 , 它 用 于 向 被 选 元 素 添加 一 
个 或 多 个 类 ,该 方法 不 会 移 除 已 存在 的 class 属性 ,仅仅 添加 一 个 或 多 个 class 属性 ; $ (". myStar" 十 D)， 
removeClass("c" 十 index) 用 于 移 除 五 星 颜 色 ,removeClass() 方 法 是 jQuery 的 CSS 属性 操作 方法 , 它 
用 于 从 被 选 元 素 移 除 一 个 或 多 个 类 ,如 果 没 有 规定 参数 , 则 该 方法 将 从 被 选 元 素 中 删除 所 有 类 。 

此 实例 的 源 文件 名 是 myHtmlB341. html。 


515 自 定义 光标 模拟 粉笔 在 黑板 上 涂鸦 


此 实例 主要 为 画布 标签 添加 mousedown、mousemove、mouseup 等 事件 响应 方法 ,并 使 用 
HTML5 的 图 形 绘制 方法 fillRect() .clearRect()、moveTo(),lineTo() 等 ,从 而 模拟 自 定 义 粉笔 光标 
在 黑板 上 涂鸦 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,在 黑色 的 自 定义 画布 上 即 可 通过 移动 
鼠标 进行 文字 涂鸦 ,如 图 515-1 所 示 ( 由 于 粉笔 是 光标 ,截图 没有 截 下 来 )。 有 关 此 实例 的 主要 代码 
如 环 s 


<!doctype html >< html >< head><meta charset = "UTF - 8"> 
< script src= "js/jquery - 3.1.1.min. js"></script >< script > 
$ (function(){ 
var lastX, lastY,myDiameter = 7; 
var myContext =$ ("#myCanvas")[0].getContext("2d"); 
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myContext. fillStyle = "black" ; // 绘 制 黑色 背景 矩形 
myContext. fillRect(0,0, 400, 250) ; 
var isdraw = false; 


$ ("#myCanvas"). on("mousedown", function(e){ // 开 始 绘 制 
isdraw = true; lastX = e. offsetX; lastY= e.offsetYy; } 
$ ("#myCanvas"). on("mousemove", function(e){ // 执 行 绘制 


$ (this).css("cursor", "url('img/Al80myPen. png' ), auto" ); // 设 置 粉笔 光标 
if(isdraw){ 
myContext. beginpath( ); 
myContext. moveTo( lastX, lastY); 
myContext. lineTo(e. offsetX, e.offsetY); 
myContext. stroke( ); 
var length = Math. round(Math. sqrt(Math. pow(e. offsetX— lastX,2) + Math. pow (e. offsetY— lastY,2))/ 
(5/myDiameter) ); 
var xUnit = (e. offsetX - lastX)/length; 
e. offsetY - lastY)/length; 
; i<length; i++){ 
Var xCurrent = lastX+ (ix xUnit); 
var yCurrent = lastY+ (ix yUnit); 
Var xRandom = xCurrent + (Math. random() — 0.5) * myDiameter * 1.2; 
var yRandom = yCurrent + (Math. random( ) - 0.5) * myDiameter * 1.2; 
myContext. clearRect (xRandom, yRandom, Math. random() * 2+ 2，Math.random() +1); 


var yUnit 








for(var i= 





} 
lastX = e. offsetX; lastY= e. offsetYy; 
ey 
$ ("#myCanvas").on("mouseup", function(){ // 结 束 绘制 
isdraw= false; });}); 
</script > 
<style type= "text/css"> 
canvas{ border — radius: 5px;} 
</style></head> 
<body><div align = "center">< canvas id= "myCanvas" width = "400px" height = "250px"> </canvas> </div> 
</body></html > 
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图 515-1 





二 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , $ (this). css("cursor”, "url('img 
Al80myPen. png') ,auto" ) 用 于 设置 在 使 用 鼠标 涂鸦 时 鼠标 光标 呈现 粉笔 状态 





Al80myPen. png 就 





5 部 分 元素》 


是 一 幅 粉笔 图 像 ，fillRect ( ) 方法 用 于 绘制 “已 填 色 ”的 矩形 ,默认 的 填充 颜色 是 黑色 ,可 以 使 用 
fillStyle 属性 来 设置 填充 绘图 的 颜色 ,渐变 或 模式 ; clearRect() 方 法 用 于 清空 参数 指定 的 矩形 内 的 像 
素 ; moveTo() 方 法 用 于 把 路 径 移 动 到 画布 中 的 指定 点 ,但 是 不 创建 线条 ; lineTo() 方 法 用 于 添加 一 
个 新 点 ,然后 在 画布 中 创建 从 该 点 到 最 后 指定 点 的 线条 。 

此 实例 的 源 文件 名 是 myHtmlA180. html。 


516 ”允许 用 户 使 用 拖 动 方式 重 置 元 素 的 尺寸 


此 实例 主要 通过 设置 元 素 的 resize 属性 实现 允许 用 户 以 拖 动 的 方式 重 置 元 素 的 尺寸 。 当 在 
Google Chrome 浏览 器 中 显示 该 页 面 时 , 左 、 右 两 个 文本 块 (元 素 ) 显 示 的 文本 如 图 516-1 所 示 ,分别 拖 
动 左 、 右 两 个 文本 块 右 下 角 的 拖 动 控制 块 则 会 改变 文本 块 (元 素 ) 的 尺寸 ,出 现 如 图 516-2 所 示 的 文本 
对 齐 显示 效果 。 有 关 此 实例 的 主要 代码 如 下 。 
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行 行 重 行 行 行 行 重 行 行 
行 行 重 行 行 ， 与 君 生 别 高 。 
相去 万 余 里 ， 
道路 阻 且 长 ， 会 面 安 可 知 
鸟巢 南 核 





图 516-1 图 516-2 


<!doctype html >< html >< head><meta charset = "UTF - 8"> 
< style type = "text/css"> 
井 myContainer {display: ~ webkit ~ flex;} 
#myLeft { width: 200px;padding: 15px;background — color: lightcyan; 
overflow: auto; resize:both; } 
#myRight { width: 200px; padding: 15px; background - color: lightgreen; 
overflow: auto; resize:both; } 
#myLeft, #myRight {box— sizing: border — box;} 
h3 { text - align: center; } 
</style></head> 
<body>< div id = "myContainer"><div id= "myLeft"> 
<h3 > 行 行 重 行 行 </b3 > 
<p> 行 行 重 行 行 ,与 狸 生 别离 。 相 去 万 余 里 ,各 在 天 一 涯 。 
道路 阻 且 长 ,会 面 安 可 知 ? 胡 马 依 北 风 , 越 鸟巢 南 枝 。 
相去 日 已 远 , 衣 带 日 已 缓 。 浮 云 项 白 日 ,游子 不 顾 返 。 
思 君 令 人 老 , 岁 月 忽 已 晚 。 弃 捐 勿 复 道 ,努力 加 餐 饭 。</p></div> 
<div id= "myRight"> 
<h3 > 西北 有 高 楼 </h3 > 
<P> 西 北 有 高 楼 ,上 与 浮云 齐 。 交 朴 结 绮 窗 , 阿 阁 三 重 阶 。 
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上 有 弦 歌 声 ,音响 一 何 悲 ! 谁 能 为 此 曲 ,无 乃 杞 梁 麦 。 

清 商 随 风 发 ,中 曲 正 徘徊 。 一 弹 再 三 叹 , 慷 慨 有 余 哀 。 

不 异 歌 者 苦 , 但 伤 知音 稀 。 愿 为 双 鸿 秽 , 奋 翅 起 高 飞 。</p></div></div> 
</body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,resize 属性 规定 是 否 可 由 用 户 调整 元 
素 的 尺寸 ,如 果 希 望 此 属性 生效 ,需要 同时 设置 元 素 的 overflow 属性 ,overflow 属性 的 值 可 以 是 auto、 
hidden、scroll。resize 属性 的 语法 格式 如 下 。 


resize: none|both|horizontal| vertical; 
其 中 ,各 属性 值 的 意义 如 表 516-1 所 示 。 
表 516-1 resize 属性 的 值 及 意义 

















值 说 明 
none 用 户 无 法 调整 元 素 的 尺寸 
both 用 户 可 调整 元 素 的 高 度 和 宽度 
horizontal 用 户 可 调整 元 素 的 宽度 
vertical 用 户 可 调整 元 素 的 高 度 


此 实例 的 源 文件 名 是 myHtmlB108. html。 


517 ”创建 距离 活动 结束 的 剩余 时 间 倒 计时 牌 


此 实例 主要 通过 在 定时 器 函数 setInterval() 中 不 断 递减 时 间 值 ,从 而 创建 距离 活动 结束 剩余 时 间 
的 倒计时 牌 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 .倒计时 牌 将 每 秒 刷 新 一 次 剩余 时 间 , 如 
图 517-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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距离 本 场 活动 结束 还 剩 : 


0 天 59 分 





图 517-1 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
< script src= "js/jquery- 3.1.1.min. js"></script>< script type= "text/javascript"> 


var myDuration = parseInt(60* 60) 7 // 倒 计时 总 秒 数 为 3600, 即 1 小 时 
function timer(myDuration) { 

window. set Interval (function( ){ // 每 隔 1 秒 刷新 1 次 

var day= 0, hour =0, minute=0, second=0; // 时 间 默 认 值 

if (myDuration>0) { // 数 字 取 整 


day = Math. floor (myDurat ion/ (60 * 60 * 24)); 
hour = Math. floor( myDuration/(60 * 60)) - (day* 24); 
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minute = Math. floor(myDuration/60) - (day * 24 * 60) - (hour * 60); 
second = Math. floor(myDuration) - (day* 24* 60 * 60) - (hour * 60 * 60) - (minute x 60); 


} 


证 (minute <=9) minute='0'+ minute; 
证 (second <=9) second='0'+ second; 
$ ('#myDay'). html(day+ "天 "); 


$ ('#myHour’). html('<s id= "h"></s>'+ hour + ' 时 '); 
$ ('#myMinute'). html('<s></s>'+minute+' 分 '); 

$ ('#mySecond'). html('<s></s>'+ second+' 秒 '); 
myDuration—— ; 


}, 1000); } 


$ (function() { timer(myDuration); }); 


</script > 


<style type= "text/css"> 


/* 设 置 显示 板 的 基本 样式 * / 


. myItem strong { background: red; color: white; line— height: 49px; font - size: 30px; 
font - family: Arial;padding: 0 10px; margin— right: 10px; border ~ radius: 5px; box— 
shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); } 
.myItem { font — size: 25px;font - weight: bold;} 
#myDay { line- height: 49px;color: red; font - size: 32px; margin: 0 10px; 
font - family: Arial, Helvetica, sans — serif;} 
</style></head> 
<body>< div class = "myItem" align = "center"><p> 距 离 本 场 活 动 结 束 还 剩 : </p> 
< span id= "myDay"> 0 天 </span>< strong id= "myHour"> 0 时 </strong> 
< strong id = "myMinute"> 0 分 </strong>< strong id = "mySecond"> 0 秒 </strong></div> 


</body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,Math. floor() 是 JavaScript 方法 , 它 
用 于 舍 去 数字 的 小 数 部 分 , 仅 保留 整数 。 另 外 还 有 两 个 类 似 的 方法 ,ceil() 和 round() ,它们 的 取 整 示 


例如 下 。 


Math. ceil(12.2) 
Math. ceil(12.7) 
Math. floor(12.2) 
Math. floor(12.7) 
Math. round(12. 2) 
Math. round(12.7) 


// 返 回 13 
// 返 回 13 
// 返 回 12 
// 返 回 12 
// 返 回 12, 四 舍 五 人 
// 返 回 13, 四 舍 五 人 


此 实例 的 源 文件 名 是 myHtmlA179. html。 


中 


So 
布局 


518 动态 重 置 盒 布 局 中 各 列 内容 的 顺序 


此 实例 主要 通过 设置 列 的 order 属性 实现 动态 重 置 盒 布 局 中 各 列 内 容 的 显示 顺序 。 当 在 Google 
Chrome 浏览 器 中 显示 该 页 面 时 , 单 击 "按照 231 排列 "按钮 , 则 各 列 的 显示 顺序 如 图 518-1 所 示 ; 单 击 
“按照 132 排列 ”按钮 , 则 各 列 的 显示 顺序 如 图 518-2 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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<!doctype html >< html >< head ><meta charset = "UTF — 8"> 
<script src= "js/jquery - 3.1.1.min. js"></script >< script language = "javascript"> 
$ (document). ready(function() { 

$ ("#myBtnOrder"). click(function() { // 按 照 231 排列 
$ ("#myLeft").css("order", "2"); $ ("#myMiddle").css("order", "3"); 
$ ("#myRight"). css("order", "1"); 

D; 

$ ("#myBtnIndex"). click(function() { // 按 照 132 排列 
$ ("#myLeft").css("order", "1"); $("#myMiddle").css("order", "3"); 
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$ ("#myRight").css("order", "2"); 
DD); 1); 
</script> 
<style type= "text/css"> 
#myContainer{ display: — webkit — flex;} 
#myLeft{ width: 200px;padding: 10px;background— color: lightblue;} 
# myMiddle{width: 150px; padding: 10px; background— color: lightpink;} 
#myRight{width: 100px; padding: 10px;background— color: lightgreen;} 
#myLeft, 站 myMiddle, #myRight{box— sizing: border - box;} 
h3{ text - align: center;} 
</style></head> 
<body> 
<p>< input type = "button" value = "按照 231 排列 " id = "myBtnOrder" style = "width:220px"/> 
< input type = "button"” value = "按照 132 排列 ”id = "myBtnIndex" style = "width:220px"/></p><div id= 
"myContainer"> 
<div id= "myLeft">< h3 > 红 夭 香 残 玉 利 秋 </h3 > <p> 红 笑 香 残 玉 第 秋 。 轻 解 罗 党 , 独 上 兰 舟 。 云 中 谁 寄 锦 书 
来 , 雁 字 回 时 ,月 满 西 楼 。 花 自 味 零 水 自流 。 一 种 相思 ,两 处 闲 愁 。 此 情 无 计 可 消除 , 才 下 眉头 , 却 上 心头 。</p> 
</div> 
<div id= "myMiddle">< h3 > 寻 寻 更 更 </h3 ><p> 寻 寻 更 更 , 冷 冷 清 清 , 琴 凄 惨 惨 威 威 。 乍 暖 还 寒 时 候 , 最 难 将 
息 。 三 杯 两 蔓 淡 酒 , 怎 敌 他 、 晚 来 风 急 ? 雁 过 也 , 正 伤心 , 却 是 旧时 相识 。 满 地 黄花 堆积 。 惟 停 损 , 如 今 有 谁 堪 摘 ? 
守 着 窗 儿 ,独自 怎 生得 黑 ? 梧 桐 更 兼 细 雨 , 到 黄昏 ,点 点 滴 滴 。 这 次 第 , 怎 一 个 愁 字 了 得 !</p></div> 
<div id= "myRight">< h3 > 春晚 </h3 ><p> 风 住 尘 香 花 已 尽 ,日 晚 倦 梳头 。 物 是 人 非 事 事 休 , 欲 语 泪 先 流 。 闻 说 
双 溪 春 尚好 ,也 拟 泛 轻舟 。 只 恶 双 溪 能 艇 舟 , 载 不 动 许多 愁 。</p></div> </div></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,$ ("#myLeft"). css("order","2") 
用 于 设置 此 列 在 容器 中 的 显示 顺序 为 2。 在 CSS3 中 ,order 属性 用 于 设置 或 检索 弹性 盒 模型 对 象 的 
子 元 素 出 现 的 顺序 ,order 定义 将 会 影响 position 值 为 static 的 元 素 的 层 炙 级 别 , 数 值 小 的 会 被 数值 大 
的 盖 住 。 

此 实例 的 源 文件 名 是 myHtmlB078. html。 


519 动态 重 置 盒 布 局 中 各 列 内 容 的 方向 


此 实例 主要 通过 设置 盒子 的 flex-direction 属性 实现 动态 重 置 盒 布局 中 各 列 内 容 的 显示 方向 。 当 
在 Google Chrome 浏览 器 中 显示 该 页 面 时 , 单 击 * 纵 向 排列 "按钮 , 则 各 列 的 显示 方向 如 图 519-1 所 
示 ; 单 击 “ 横 向 排列 ”按钮 , 则 各 列 的 显示 方向 如 图 519-2 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 





<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<script src= "js/jquery -3.1.1.min.js"></script >< script language = "javascript"> 
$ (document). ready(function() { 
$ ("#myBtnOrder").click(function() { // 纵 向 排列 
$ ("#myContainer").css("flex— direction", "column"); 


D); 


$ ("#myBtnIndex").click(function() { // 横 向 排列 
$ ("#myContainer").css("flex— direction", "row"); });}); 
</script> 


<style type= "text/css"> 
#myContainer{ display: - webkit — flex;} 
#myLeft{width: 150px;padding: 10px; background— color: lightblue;} 
#myMiddle{width: 150px;padding: 10px;background— color: lightpink;} 
井 myRight{width: 150px;padding: 10px;background — color: lightgreen;} 
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#myLeft, #myMiddle, #myRight{box— sizing: border ~ box;} 
h3{text — align: center;} 
</style></head> 
<body> 
<p>< input type= "button” value= "纵向 排列 ”id= "myBtnOrder" style= "width:220px"/> 
< input type= "button”value= "横向 排列 ”id = "myBtnIndex”style = "width:220px"/></p> 
<div id= "myContainer"> 
<div id= "myLeft"><h3> 九 日 齐 山 登高 </h3 ><p> 江 涵 秋 影 脸 初 飞 ,与 客 携 壶 上 浴 微 。 人 尘世 难关 开口 笑 , 菊花 
须 插 满 头 归 。</p></div> 
<div id= "myMiddle">< h3 > 锦 瑟 </h3 ><p> 锦 瑟 无 端 五 十 弦 , 一 弦 一 柱 思 华 年 。 庄 生 晓 梦 迷 蝴蝶 , 望 帝 春心 托 
杜 鹏 。</p></div> 
<div id= "myRight"><h3> 春 晚 </h3 ><p> 风 住 尘 香花 已 尽 , 日 晚 倦 梳头 。 物 是 人 非 事 事 休 , 欲 语 泪 先 流 。</p> 
</div></div></body></html> 





上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , $ ("# myContainer"). css("flex- 
direction", "column") 用 于 设置 容器 中 的 所 有 列 以 纵向 显示 。 在 CSS3 中 ,flex-direction 属性 通过 定 
义 flex 容器 的 主轴 方向 来 决定 flex 子 项 在 flex 容器 中 的 位 置 , 这 将 决定 flex 如 何 进行 排列 ,该 属性 的 
反 转 取 值 不 影响 元 素 的 绘制 ,语音 和 导航 顺序 ,只 改变 流动 方向 。flex-direction 属性 的 语法 格式 
如 下 。 


flex - direction: row | row - reverse | column | column - reverse 


其 中 ,row 表示 主轴 与 行内 轴 方 向 作为 默认 的 书写 模式 , 即 横向 从 左 到 右 排 列 ( 左 对 齐 ); row- 
reverse 表示 对 齐 方式 与 row 相反 ; column 表示 主轴 与 块 轴 方 向 作为 默认 的 书写 模式 , 即 纵向 从 上 往 
下 排列 ( 顶 对 齐 ); column-reverse 表示 对 齐 方式 与 column 相反 。 

此 实例 的 源 文 件 名 是 myHtmlB079. html。 
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520 ”使 单行 文本 在 垂直 方向 上 位 于 盒子 的 正中 


此 实例 主要 通过 设置 文本 的 行 高 等 于 盒子 的 高 度 实现 使 单行 文本 在 垂直 方向 上 位 于 盒子 的 正 
中 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,文本 “杨柳 青青 江水 平 " 正 好 在 垂直 方向 上 位 于 图 
像 的 正中 ,如 图 520-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 











口 myHtml8243 html x 
‘ 3 © Dfile///D/myWork/myHtmlB2e 字 








图 520-1 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<style type= "text/css"> 
div { width:400px; height:250px; border — radius: 1px; 
line - height: 250px; background— image: url( img/B243. jpg); 
background - size: 100% 100%;} 
p { font - size: 36px; color:white;text - shadow:2px 2px 4px #000000; } 
x*{ margin: 0; overflow: hidden;} 
</style></head> 


<body>< center>< div><p> 杨 柳 青青 江水 平 </p></div></center> 
</body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,height 属性 用 于 设置 元 素 的 高 度 ， 
line-height 属性 用 于 设置 行 间 的 距离 ( 行 高 )。 由 于 在 默认 情况 下 文本 位 于 行 高 (垂直 方向 ) 的 正中 ， 
因此 当 行 高 等 于 盒子 的 高 度 时 文本 也 自然 位 于 盒子 垂直 方向 的 正中 。 

此 实例 的 源 文件 名 是 myHtmlB243. html。 


521 在 图 像 ( 盒 子 ) 的 上 端 下 端 居 中 显示 文本 


此 实例 主要 通过 设置 display、-webkit-box-pack 和 -webkit-box-align 等 属性 实现 在 图 像 (盒子 ) 的 
上 端 、 下 端 居 中 显示 文本 及 其 他 元 素 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 , 单 击 * 上 端 显示 
标题 "按钮 , 则 标题 文本 * 经 典 桌面 ”的 显示 效果 如 图 521-1 所 示 ; 单 击 * 居 中 显示 标题 "按钮 , 则 标题 文 
本 “经 典 桌 面 "的 显示 效果 如 图 521-2 所 示 ; 单 击 * 下 端 显示 标题 "按钮 , 则 标题 文本 “经 典 桌 面 的 显示 
效果 如 图 521-3 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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居中 显示 标 是 下 端 导 示 标题 
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<!doctype html >< html><head><meta charset = "UTF - 8"> 
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居中 显示 标题 
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下 铀 县 示 标题 
mr -要 





<script src= "js/jquery - 3.1.1.min. js"></script>< script language = "javascript"> 


$ (document). ready(function() { 
$ ("#myBtnTop").click(function() { 


// 上 端 显 示 标题 


$ ("div").css(" — webkit- box— align", "start"); 


D); 
$ ("#myBtnCenter"). click( function() { 


// 居 中 显示 标题 


$ ("div").css(" — webkit- box— align", "center"); 


D); 
$ ("#myBtnBottom").click(function() { 


$ ("div").css(" — webkit- box— align", "end"); 


</script > 
<style type= "text/css"> 


// 下 端 显 示 标题 
1D);}); 
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div { width: 450px; height: 300px; border - radius: 10px; background: url(img/B193. jpg); box - shadow: 
5px 5px 5px lpx #999, 0 0 40px rgba(0, 0, 0, 0.06) inset; display: - webkit - box; - webkit - box 
一 pack: center; - webkit - box— align: center; } 
span { color: aqua; font - size: 30px; font ~ weight: bold;} 
button { width: 145px; margin: 3px;} 
</style></head> 
<body><p><button id= "myBtnTop"> 上 端 显示 标题 </button> 
<button id= "myBtnCenter"> 居 中 显示 标题 </button > 
<button id= "myBtnBottom"> 下 端 显示 标题 </button></p> 
<div>< span > 经 典 桌面 </span ></div></body></html > 





上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,-webkit-box-pack: center 规定 在 水 
平方 向 上 居中 显示 子 元 素 。 在 CSS3 中 ,box-pack 属性 规定 当 框 大 于 子 元 素 的 尺寸 时 在 何 处 放置 子 
元 素 ,规定 水 平 框 中 的 水 平 位 置 以 及 垂直 框 中 的 垂直 位 置 。box-pack 属性 的 语法 格式 如 下 。 


box ~ pack: start | end | center | justify 


其 中 ,各 属性 值 的 说 明 如 下 。 

(1) start: 对 于 正常 方向 的 框 , 首 个 子 元 素 的 左边 缘 被 放 在 左 侧 (最 后 的 子 元 素 后 是 所 有 剩余 的 
空间 ); 对 于 相反 方向 的 框 ,最 后 子 元 素 的 右边 缘 被 放 在 右 侧 ( 首 个 子 元 素 前 是 所 有 剩余 的 空间 )。 

(2) end: 对 于 正常 方向 的 框 ,最 后 子 元 素 的 右边 缘 被 放 在 右 侧 ( 首 个 子 元 素 前 是 所 有 剩余 的 空 
间 ); 对 于 相反 方向 的 框 , 首 个 子 元 素 的 左边 缘 被 放 在 左 侧 (最 后 子 元 素 后 是 所 有 剩余 的 空间 )。 

(3) center: 该 属性 值 均等 地 分 割 多 余 空间 ,其 中 一 半空 间 被 置 于 首 个 子 元 素 前 , 另 一 半 被 置 于 最 
后 一 个 子 元 素 后 。 

(4) justify: 该 属性 值 在 每 个 子 元 素 之 间 分 割 多 余 的 空间 ( 首 个 子 元 素 前 和 最 后 一 个 子 元 素 后 没 
有 多 余 的 空间 ) 。 

-webkit-box-align: center 规定 在 垂直 方向 上 居中 显示 子 元 素 。 在 CSS3 中 ,box-align 属性 规定 
如 何 对 齐 框 的 子 元 素 ,该 属性 的 语法 格式 如 下 。 


box — align: start | end | center | baseline | stretch 


其 中 ,各 属性 值 的 说 明 如 下 。 

(1) start: 对 于 正常 方向 的 框 ,每 个 子 元 素 的 上 边缘 沿 着 框 的 顶 边 放置 ; 对 于 反方 向 的 框 ,每 个 
子 元 素 的 下 边缘 沿 着 框 的 底 边 放置 。 

(2) end: 对 于 正常 方向 的 框 ,每 个 子 元 素 的 下 边缘 沿 着 框 的 底 边 放置 ; 对 于 反方 向 的 框 ,每 个 子 
元 素 的 上 边缘 沿 着 框 的 顶 边 放置 。 

(3) center: 该 属性 值 均等 地 分 割 多 余 的 空间 ,一 半 位 于 子 元 素 之 上 , 另 一 半 位 于 子 元 素 之 下 。 

(4) baseline: 该 属性 值 在 box-orient 是 inline-axis 或 horizontal 时 所 有 子 元 素 均 与 其 基线 对 齐 。 

(5) stretch: 该 属性 值 实现 拉 伸 子 元 素 以 填充 包含 块 。 

此 实例 的 源 文件 名 是 myHtmlB193. html。 


522 动态 重 置 弹性 盒 中 子 元 素 的 排列 方式 


此 实例 主要 通过 设置 弹性 盒子 的 align-content 属性 实现 动态 重 置 弹性 盒 中 各 子 元 素 的 排列 方 
式 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 , 单 击 * 顶 部 对 齐 ? 按 钮 , 则 弹性 盒 中 各 子 元 素 的 排列 
效果 如 图 522-1 所 示 ; 单 击 “ 中 间 对 齐 ? 按 钮 , 则 弹性 盒 中 各 子 元 素 的 排列 效果 如 图 522-2 所 示 ; 单 击 
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“底部 对 齐 ? 按 钮 , 则 在 底部 对 齐 各 子 元 素 。 有 关 此 实例 的 主要 代码 如 下 。 
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<! doctype html >< html >< head >< meta charset = "UTF - 8"> 
< script src= "js/jquery - 3.1.1.min. js"></script>< script language = "javascript"> 
$ (document). ready(function() { 
$ ("#myBtnTop").click(function() { // 顶 部 对 齐 
$("#box").css("align— content", "flex— start"); 
1D); 


$ ("#myBtnCenter"). click(function() { // 中 间 对 齐 
$ ("#box").css("align - content", "center"); 
1); 
$ ("#myBtnBottom"). click(function() { // 底 部 对 齐 
$ ("#box").css("align - content", "flex- end"); });}); 
</script> 
<style> 


.box { display: — webkit - flex; - webkit - flex - wrap: wrap; width: 400px; height: 400px; margin: 0; 
padding: 0; border - radius: Spx;list— style: none; background — color: #EEE;} 
.box li { margin: Spx; padding: 10px; text ~ align: center; } 
#box {/ * - webkit — align~ content:flex- end; * /} 
img { width: 70px; height: 70px;} 
</style></head> 
<body> 
<p>< input type = "button" value = "顶部 对 齐 " id = "myBtnTop" style= "width:127px"/> 
< input type= "button"” value = "中 间 对 齐 ” id = "myBtnCenter”style = "width:127px"/> 
< input type = "button" value= "底部 对 齐 ” id = "myBtnBottom" style= "width:127px"/></p> 
<ul id= "box" class= "box"> 
<1i>< img src="img/B0O66A. png"/></1i><1i>< img src="img/B066R.png"/></1i> 
<1i>< img src="img/BO66A. png"/></li><1i>< img src= "img/B066A.png"/></1i> 
<1i>< img src= "img/BO66A. png"/></l1i><1i>< img src="img/B0O66A.png"/></1li> 
</ul></body></html> 


第 6 部 分 布局 人 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , $ (" # box"). css("align- content"， 
"flex-start") 用 于 设置 弹性 盒 中 的 所 有 子 元 素 在 顶部 对 齐 。 当 弹性 容器 的 侧 轴 还 有 和 多余 空间 时 ,此 属 
性 可 以 用 来 调整 伸缩 行 在 弹性 容器 里 的 对 齐 方式 ,此 属性 在 只 有 一 行 的 伸缩 容器 上 没有 效果 。align- 
content 的 语法 格式 如 下 。 





align - content:flex- start | flex- end | center | space - between | space- around | stretch 


其 中 ,各 属性 值 的 意义 如 下 。 

(1) flex-start: 表示 各 行 向 弹性 盒 容 器 的 起 始 位 置 堆 琶 。 在 弹性 盒 容器 中 第 一 行 的 侧 轴 起 始 边 
界 紧 靠 着 该 弹性 盒 容器 的 侧 轴 起 始 边界 ,之 后 的 每 一 行 都 紧 靠 着 前 面 一 行 。 

(2) flex-end: 表示 各 行 向 弹性 盒 容器 的 结束 位 置 堆 琶 。 在 弹性 盒 容器 中 最 后 一 行 的 侧 轴 起 始 边 
界 紧 靠 着 该 弹性 盒 容 器 的 侧 轴 结 束 边 界 ,之 后 的 每 一 行 都 紧 靠 着 前 面 一 行 。 

(3) center: 表示 各 行 向 弹性 盒 容 器 的 中 间 位 置 堆 倒 。 各 行 两 两 紧 靠 住 同时 在 弹性 盒 容器 中 居中 
对 齐 ,保持 弹性 盒 容器 的 侧 轴 起 始 内 容 边界 和 第 一 行 之 间 的 距离 与 该 容器 的 侧 轴 结 束 内 容 边 界 和 最 
后 一 行 之 间 的 距离 相等 。 如 果 剩 下 的 空间 是 负数 , 则 各 行 会 向 两 个 方向 溢出 相等 距离 。 

(4) space-between: 表示 各 行 在 弹性 盒 容 器 中 平均 分 布 。 如 果 剩 余 的 空间 是 负数 或 在 弹性 盒 容 
器 中 只 有 一 行 , 该 值 等 效 于 flexrstart。 在 其 他 情况 下 ,第 一 行 的 侧 轴 起 始 边 界 紧 靠 着 弹性 盒 容器 的 侧 
轴 起 始 内 容 边 界 , 最 后 一 行 的 侧 轴 结 束 边 界 紧 靠 着 弹性 盒 容器 的 侧 轴 结束 内 容 边 界 , 剩 余 的 行 则 按 一 
定 方 式 在 弹性 盒 窗 口中 排列 ,以 保持 两 两 之 间 的 空间 相等 。 

(5) space-around: 表示 各 行 在 弹性 盒 容器 中 平均 分 布 ,两 端 保留 子 元 素 与 子 元 素 之 间 的 间距 大 
小 的 一 半 。 如 果 剩 余 的 空间 是 负数 或 在 弹性 盒 容器 中 只 有 一 行 ,该 值 等 效 于 center。 在 其 他 情况 下 ， 
各 行 会 按 一 定 方式 在 弹性 盒 容器 中 排列 ,以 保持 两 两 之 间 的 空间 相等 ,同时 第 一 行 前 面 及 最 后 一 行 后 
面 的 空间 是 其 他 空间 的 一 半 。 

(6) stretch: 表示 各 行将 会 伸展 以 占用 剩余 的 空间 。 如 果 剩 余 的 空间 是 负数 ,该 值 等 效 于 flex- 
start。 在 其 他 情况 下 ,剩余 空间 被 所 有 行 平分 ,以 扩大 它们 的 侧 轴 尺 寸 。 

此 实例 的 源 文件 名 是 myHtmlB080. html。 


523 ”动态 重 置 弹性 盒 中 子 元 素 的 对 齐 方 式 


此 实例 主要 通过 设置 弹性 盒 的 align-items 属性 实现 动态 重 置 弹性 盒 中 各 子 元 素 的 对 齐 方式 。 当 
在 Google Chrome 浏览 器 中 显示 该 页 面 时 , 单 击 “ 顶 部 对 齐 ” 按 钮 . 则 在 弹性 盒 中 各 子 元 素 的 对 章 效果 
如 图 523-1 所 示 ; 单 击 * 中 间 对 齐 ? 按 钮 , 则 在 弹性 盒 中 各 子 元 素 的 对 齐 效果 如 图 523-2 所 示 ; 单 击 “ 底 
部 对 齐 ” 按 钮 , 则 在 弹性 盒 中 各 子 元 素 的 对 齐 效 果 如 图 523-3 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 

















<!doctype html >< html >< head >< meta charset = "UTF — 8"> 
<script src= "js/jquery - 3.1.1.min. js"></script >< script language = "javascript"> 
$ (document). ready(function() { 
$ ("#myBtnTop"). click(function() { // 顶 部 对 齐 
$ ("#box").css("align — items", "flex— start"); 
D); 


$ ("#myBtnCenter"). click(function() { // 中 间 对 齐 
$ ("#box").css("align - items", "center"); 

D; 

$ ("#myBtnBottom"). click( function() { // 底 部 对 齐 


$("#box").css("align— items", "flex— end"); });}); 
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</script> 
< style> 


.box {display: — webkit - flex; - webkit - flex - wrap: wrap; width: 456px; height: 315px; margin: 0; 
padding: 0; border - radius: 5px; list— style: none; background— color: #eee;} 

.box li { margin: 2px; padding: 2px; text — align: center;} 

#box { /* - webkit -align- items:flex— end; * /} 

img { border - radius: 5px;} 

input { width: 147px;} 
</style></head> 


<body><p>< input type = "button" value = "顶部 对 齐 " id = "myBtnTop"/> 
< input type = "button” value = "中 间 对 齐 " id= "myBtnCenter"/> 


"myBtnBottom"/></p> 






< input type = "button” value = "底部 对 齐 " ii 
<ul id= "box" class = "box"> 
<1i>< img src 











img/BO81A. jpg"/></1i><1i>< img src="img/B081B. jpg"/></li> 
<1i>< img src= "img/B081C.jpg"/></1i></ul></body></html > 
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上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 . $ ("# box"). css("align- items"， 
"flexrstart") 用 于 设置 弹性 盒 中 的 所 有 子 元 素 在 顶部 对 齐 。 在 CSS3 中 ,align-items 属性 用 于 定义 弹 
性 盒 中 的 子 元 素 在 弹性 盒 的 当前 行 的 侧 轴 ( 纵 轴 ) 方 向 上 的 对 齐 方式 ,alignritems 的 语法 格式 如 下 。 


align ~ items: flex- start | flex- end | center | baseline | stretch 


其 中 ,各 属性 值 的 意义 如 下 。 

(1) flex-start: 表示 弹性 盒 中 的 子 元 素 的 侧 轴 ( 纵 轴 ) 起 始 位 置 的 边界 紧 靠 着 该 行 的 侧 轴 起 始 
边界 。 

(2) flex-end: 表示 弹性 盒 中 的 子 元 素 的 侧 轴 ( 纵 轴 ) 起 始 位 置 的 边界 紧 靠 着 该 行 的 侧 轴 结束 
边界 。 

(3) center: 表示 弹性 盒 中 的 子 元 素 在 该 行 的 侧 轴 ( 纵 轴 ? 上 居中 放置 ,如 果 该 行 的 尺寸 小 于 弹性 
盒 中 子 元 素 的 尺寸 , 则 会 向 两 个 方向 溢出 相同 的 长 度 。 

(4) baseline: 表示 如 果 弹 性 盒 中 的 子 元 素 的 行内 轴 与 侧 轴 为 同一 条 , 则 该 值 与 flex-start 等 效 。 
在 其 他 情况 下 ,该 值 将 参与 基线 对 齐 。 

(5) stretch: 表示 如 果 指 定 侧 轴 大 小 的 属性 值 为 auto, 则 其 值 会 使 项 目的 边 距 盒 的 尺寸 尽 可 能 接 
近 所 在 行 的 尺寸 ,但 同时 会 遵照 min/max-width/height 属性 的 限制 。 

此 实例 的 源 文 件 名 是 myHtmlB081. html。 


524 设置 弹性 盒 元 素 沿 水 平方 向 等 距 对 齐 


此 实例 主要 通过 设置 弹性 盒 的 justify-content 属性 实现 动态 重 置 弹性 盒 中 的 子 元 素 沿 水 平方 向 
的 对 齐 方式 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 , 单 击 * 向 左 对 齐 ? 按 钮 , 则 弹性 盒 中 的 各 子 
元 素 的 对 齐 效果 如 图 524-1 所 示 ; 单 击 “居中 对 齐 " 按 钮 , 则 弹性 盒 中 的 各 子 元 素 的 对 齐 效果 如 图 524-2 
所 示 ; 单 击 * 向 右 对 齐 ? 按 钮 , 则 弹性 盒 中 的 各 子 元 素 的 对 齐 效果 如 图 524-3 所 示 ; 单 击 “ 等 距 对 齐 " 按 
钮 , 则 弹性 盒 中 的 各 子 元 素 的 对 齐 效果 如 图 524-4 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<script src= "js/jquery - 3.1.1.min. js"></script>< script language = "javascript"> 
$ (document). ready(function() { 
$ ("#myBtnLeft").click(function() { // 向 左 对 齐 
$("#box").css("justify— content", "flex— start"); 
1); 
$ ("#myBtnCenter"). click(function() { // 居 中 对 齐 
$ ("#box").css("justify— content", "center"); 
1D); 


$ ("#myBtnRight"). click(function() { // 向 右 对 齐 
$ ("#box").css("justify— content", "flex - end"); 
DD); 
$ ("#myBtnBetween").click(function() { // 等 距 对 齐 
$("#box").css("justify— content", "space— between"); });}); 
</script> 
<style> 


.box {display: — webkit— flex; - webkit— flex- wrap: wrap; width: 456px; 
height: 60px; margin: 0; padding: 0; border — radius: 5px; 
list - style: none; background - color: lightblue;} 
.box li { margin: 2px; padding: 2px; text — align: center;} 
img { width: 50px; height:50px;} 
input { width: 108px;} 
</style></head> 
<body><p>< input type = "button" value = "向 左 对 齐 ” id = "myBtnLeft"/> 
< input type = "button” value = "居中 对 齐 ”id = "myBtnCenter"/> 
< input type = "button” value = "向 右 对 齐 ”id = "myBtnRight"/> 
< input type = "button" value = "等 距 对 齐 " id = "myBtnBetween"/></p> 
<ul id= "box" class= "box"> 
<1i>< img src="img/B082. png"/></1i><1i>< img src ="img/B082. png"/></1i> 
<1i>< img src="img/B082. png"/></1i></ul ></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , $ (" # box"), css ("justify- 
content","flex-start") 用 于 设置 弹性 盒 中 的 所 有 子 元 素 靠 左 对 齐 。 在 CSS3 中 ,justify-content 属性 
用 于 设置 或 检索 弹性 盒 中 的 子 元 素 在 主轴 ( 横 轴 ) 方 向 上 的 对 齐 方式 , 当 弹 性 盒 中 一 行 上 的 所 有 子 元 
素 都 不 能 伸缩 或 已 经 达到 其 最 大 值 时 ,这 一 属性 可 协助 对 多 余 的 空间 进行 分 配 , 当 元 素 溢出 某 行 时 这 
一 属性 同样 会 在 对 齐 上 进行 控制 。justify-content 的 语法 格式 如 下 。 


justify- content: flex— start | flex ~- end | center | space ~ between | space— around 


其 中 ,各 属性 值 的 意义 如 下 。 

(1) flex-start: 表示 弹性 盒 中 的 子 元 素 将 向 行 起 始 位 置 对 齐 。 该 行 的 第 一 个 子 元 素 的 主 起 始 位 
置 的 边界 将 与 该 行 的 主 起 始 位 置 的 边界 对 齐 , 同 时 所 有 后 续 的 子 元 素 与 其 前 一 个 子 元 素 对 齐 。 

(2) flex-end: 表示 弹性 盒 中 的 子 元 素 将 向 行 结 束 位 置 对 齐 。 该 行 的 第 一 个 子 元 素 的 主 结束 位 置 
的 边界 将 与 该 行 的 主 结束 位 置 的 边界 对 齐 ,同时 所 有 后 续 的 子 元 素 与 其 前 一 个 子 元 素 对 齐 。 

(3) center: 表示 弹性 盒 中 的 子 元 素 将 向 行 中 间 位 置 对 齐 。 该 行 的 子 元 素 将 相互 对 齐 并 在 行 中 居 
中 对 齐 , 同 时 第 一 个 元 素 与 行 的 主 起 始 位 置 的 边 距 等 于 最 后 一 个 元 素 与 行 的 主 结束 位 置 的 边 距 ,如 果 
剩余 空间 是 负数 , 则 保持 两 端 相等 长 度 的 溢出 。 

(4) space-between: 表示 弹性 盒 中 的 子 元 素 会 平均 地 分 布 在 行 里 。 如 果 最 左边 的 剩余 空间 是 负 
数 ,或 该 行 只 有 一 个 子 元 素 , 则 该 值 等 效 于 flex-start。 在 其 他 情况 下 ,第 一 个 元 素 的 边界 与 行 的 主 起 
始 位 置 的 边界 对 齐 , 同 时 最 后 一 个 元 素 的 边界 与 行 的 主 结束 位 置 的 边 距 对 齐 ,而 剩余 的 子 元 素平 均 分 











第 6 部 分 布局 人 
布 ,并 确保 两 两 之 间 的 空白 空间 相等。 


(5) space-around: 表示 弹性 盒 中 的 子 元 素 会 平均 地 分 布 在 行 里 ,两 端 保留 子 元 素 与 子 元 素 之 问 
的 间距 大 小 的 一 半 。 如 果 最 左边 的 剩余 空间 是 负数 .或 该 行 只 有 一 个 子 元 素 , 则 该 值 等 效 于 center。 
在 其 他 情况 下 , 子 元 素平 均 分 布 ,并 确保 两 两 之 间 的 空白 空间 相等 ,同时 第 一 个 元 素 前 的 空间 以 及 最 
后 一 个 元 素 后 的 空间 为 其 他 空白 空间 的 一 半 。 

此 实例 的 源 文件 名 是 myHtmlB082. html。 








525 ”设置 弹性 例 元 素 沿 水 平 或 垂直 方向 布局 





此 实例 主要 通过 设置 弹性 盒 的 box-orient 属性 实现 动态 重 置 弹性 盒 中 的 子 元 素 沿 水 平 或 垂直 方 
向 布局 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 , 单 击 * 水 平 布局 "按钮 , 则 弹性 盒 中 的 各 子 元 素 
的 布局 效果 如 图 525-1 所 示 ; 单 击 "垂直 布局 "按钮 , 则 弹性 盒 中 的 各 子 元 素 的 布局 效果 如 图 525-2 所 
示 。 有 关 此 实例 的 主要 代码 如 下 。 





<! doctype html >< html >< head >< meta charset = "UTF - 8"> 
<script src= "js/jquery- 3.1.1.min. js"></script >< script language = "javascript"> 
$ (document). ready(function() { 
$ ("#myBtnHorizontal").click(function() { // 水 平 布 局 
$ ("#box").css("box— orient", "horizontal"); 
D); 


$ ("#myBtnVertical"). click(function() { // 垂 直 布 局 
$("#box").css("box— orient"，"vertical"); });}); 
</script > 


<style type= "text/css"> 

.box {display: — webkit— box; width: 600px; height: 380px; 

margin: 0;padding: 0;list - style: none;} 

#box {/ * - webkit — box ~ orient: vertical; * /} 

.box li:nth- child(1) { - webkit - box — flex: 5; background: lightblue;} 

.box li:nth- child(2) { - webkit - box — flex: 5; background: lightpink;} 

.box li:nth- child(3) { - webkit - box - flex: 4; background: lightgreen;} 

1i { padding: 10px; } 

h3 { text - align: center} 

input {width: 295px;} 
</style></head> 
<body><p>< input type = "button" value = "水 平 布局 ”id = "myBtnHorizontal"/> 

< input type = "button” value = "垂直 布局 " id = "myBtnVertical"/></p> 
<ul id= "box" class = "box"><1i><h3> 红 医 香 残 玉 第 秋 </h3> 

<P> 红 夭 香 残 玉 第 秋 。 轻 解 罗 裳 , 独 上 兰 舟 。 云 中 谁 寄 锦 书 来 , 脸 字 回 时 ,月 满 西 楼 。 花 自 飘 零 水 自流 。 一 
种 相思 ,两 处 闲 愁 。 此 情 无 计 可 消除 , 才 下 眉头 , 却 上 心头 。</p></1i> 
<1i><h3 > 春晚 </h3 > 
<p> 风 住 尘 香花 已 尽 , 日 晚 倦 梳 头 。 物 是 人 非 事 事 休 , 欲 语 泪 先 流 。 闻 说 双 溪 春 尚好 ,也 拟 泛 轻舟 。 只 恺 双 

溪 能 航 舟 , 载 不 动 许多 愁 。</p></1i> 
<1i><h3> 寻 寻 观 更 </h3 > 


<p> 寻 寻 现 觅 , 冷 冷 清 清 , 凄 症 惨 惨 威 威 。 乍 暖 还 寒 时 候 , 最 难 将 息 。 三 杯 两 玫 淡 酒 , 怎 敌 他 、 晚 来 风 急 ? 砍 
过 也 , 正 伤心 , 却 是 旧时 相识 。 满 地 黄花 堆积 。 惟 迟 损 ,如 今 有 谁 堪 摘 ? 守 着 窗 儿 ,独自 怎 生得 黑 ? 梧 桐 更 兼 细 雨 , 
到 黄昏 ,点 点 滴 滴 。 这 次 第 , 怎 一 个 愁 字 了 得 !</p></1i></ul></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , $$(" 并 box"). css("box- orient"， 
"horizontal" ) 用 于 设置 弹性 盒 中 的 所 有 子 元 素 按照 水 平方 向 进行 布局 。 在 CSS3 中 ,box-orient 属性 
用 于 设置 或 检索 弹性 盒 中 的 子 元 素 的 排列 方式 。box-orient 属性 的 语法 格式 如 下 。 
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box - orient:horizontal | vertical | inline -axis | block- axis 


其 中 ,各 属性 值 的 意义 如 下 。 

(1) horizontal: 设置 弹性 盒 对 象 的 子 元 素 从 左 到 右 水 平 排列 。 
(2) vertical: 设置 弹性 盒 对 象 的 子 元 素 从 上 到 下 纵向 排列 。 
(3) inline-axis: 设置 弹性 盒 对 象 的 子 元 素 沿 行 轴 排 列 。 

(4) block-axis: 设置 弹性 盒 对 象 的 子 元 素 沿 块 轴 排 列 。 

此 实例 的 源 文件 名 是 myHtmlB083. html。 
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526 ”根据 收缩 因子 分 配 弹 性 盒 的 子 元 素 空间 


此 实例 主要 通过 设置 弹性 盒子 元 素 的 flex-shrink 属性 实现 根据 收缩 因子 分 配 弹性 盒 的 子 元 素 空 
间 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,弹性 盒 中 的 3 幅 图 片 (3 个 子 元 素 ) 将 根据 收缩 因子 
分 配 空间 ,如 图 526-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 526-1 


<! doctype html >< html >< head >< meta charset = "UTF - 8"> 
< style type = "text/css"> 
##myContainer { display: - webkit — flex;width: 400px;height:250px; 
margin: 0;padding: 0;list— style: none;} 
井 myContainer li {width: 250px; margin:1px;} 
#myContainer li:nth- child(1) { - webkit ~ flex— shrink: 2; 
background: gray;background — image: url(img/B096A. jpg);} 
井 myContainer li:nth— child(2) {background: lightpink; 
background — image: url( img/B096B. jpg) ;} 
#myContainer li:nth- child(3) { — webkit— flex— shrink: 2; 
background: lightblue; background - image: url(img/B096C. jpg);} 
</style></head> 
<body><ul id= "myContainer"><1i></li> <1i></li> <1i></li></ul ></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,flex-shrink 属性 用 于 设置 或 检索 弹 
性 盒 的 收缩 比率 ,弹性 盒 将 根据 收缩 比率 来 分 配 ( 收 缩 ) 子 元 素 的 空间 。flex-shrink 的 默认 值 为 1, 如 
果 没 有 显示 定义 该 属性 ,将 会 自动 按照 默认 值 1 在 所 有 因子 相 加 之 后 计算 比率 来 进行 空间 收缩 。 例 
如 ,弹性 盒 中 有 a、b、c 几 个 子 元 素 ,c 显 式 定 义 了 flex-shrink 属性 值 为 3,a\b 没有 显 式 定义 ,因此 将 
根据 默认 值 1 来 计算 ,可 以 看 到 总 共 将 剩余 空间 分 成 了 5 份 . 其 中 a 占 1 份 b 占 1 份 c 占 3 份 , 即 
1 : 1 : 3。 如 果 父 容器 (弹性 盒 ) 定 义 为 400px, 子 项 ( 子 元 素 ) 被 定义 为 200px, 相 加 之 后 即 为 600px, 超 
出 父 容器 200px。 那 么 超出 的 200px 需要 被 a、b、c 消化 .根据 收缩 因子 加 权 综 合 可 得 200X1 十 200X 
1 十 200X3 一 1000px。 于 是 可 以 计算 a、bc 将 被 移 除 的 溢出 量 。 

a 被 移 除 溢出 量 : (200X1/1000) X200, 即 等 于 40px; 

b 被 移 除 溢出 量 : (200X1/1000) X200, 即 等 于 40px; 
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c 被 移 除 溢 出 量 : (200X3/1000) X200, 即 等 于 120px。 
最 后 a、b.c 的 实际 宽度 分 别 为 200 一 40 一 160px、.200 一 40 一 160px.200 一 120 一 80px。 
此 实例 的 源 文件 名 是 myHtmlB096. html。 


527 ”根据 扩展 因子 分 配 弹性 盒 的 子 元 素 空间 


此 实例 主要 通过 设置 弹性 盒子 元 素 的 flex-grow 属性 实现 根据 扩展 因子 分 配 弹性 盒 的 子 元 素 空 
间 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,在 弹性 盒 中 的 3 幅 图 片 (3 个 子 元 素 ) 将 根据 扩展 因 
子 分 配 空间 ,如 图 527-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 527-1 


<! doctype html >< html >< head >< meta charset = "UTF - 8"> 
< style type = "text/css"> 
#myBox {display: — webkit - flex; height: 250px;width: 450px; 
margin: 0; padding: 10px;list— style: none;} 
#myBox 1i {width: 100px;height: 250px;margin: 1px;} 
#myBox li:nth— child(1) {background - image: url( img/B097A. jpg) ;} 
##myBox li:nth— child(2) { - webkit— flex 一 grow: 1; 
background — image: url( img/B097B. jpg);} 
##myBox li:nth— child(3) { ~— webkit ~ flex— grow: 3; 
background ~ image: url( img/B097C. jpg);} 
</style></head> 
<body><ul id= "myBox"><1i></li><1i></1li><1i></li></ul></body ></htnml > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,flex-grow 属性 用 于 设置 或 检索 弹性 
盒 的 扩展 比率 ,并 根据 弹性 盒子 元 素 所 设置 的 扩展 因子 作为 比率 来 分 配 剩余 空间 。flex-grow 属性 的 
默认 值 为 0, 如 果 没 有 显示 定义 该 属性 ,是 不 会 拥有 分 配 剩余 空间 权利 的 。 在 此 实例 中 ,第 二 个 和 第 三 
个 子 元素 都 显 式 定义 了 flex-grow 属性 值 . 即 弹性 盒 的 剩余 空间 被 分 成 了 4 份 ,其 中 第 二 个 元 素 占 1 
份 ,第 三 个 元 素 占 3 份 , 即 1:3 

此 实例 的 源 文件 名 是 myHtmlB097. html。 
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528 ”使 用 弹性 盒 控制 文本 始终 显示 在 正中 间 


此 实例 主要 通过 设置 弹性 盒 的 justify-content 属性 和 align-items 属性 实现 控制 文本 始终 显示 在 
容器 中 间 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,文本 内 容 始终 显示 在 图 片 的 正中 间 , 如 
图 528-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 





HHH- oo x 
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<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<style> 
. box { background: ## 0099CC; width: 400px; height: 250px; background - image: url ( img/B098. jpg); 
background - repeat: no - repeat; background - size: 100% 100%; display: flex; justify - 
content: center; align - items:center;} 
p{text - indent: 35px; width:350px;color:yellow; } 
</style></head> 
<body>< div class = "box">< p> 重庆 中 央 公 网 ,位 于 两 江 新 区 同 茂 大 道 和 节庆 大 道 之 间 , 是 目前 国内 最 大 的 开 
放 式 城市 中 心 公 网。 融会 中 西方 文化 ,依托 重庆 山水 风貌 特色 ,体现 自然 和 谐 之 美的 现代 城市 公园 , 主要 包含 了 
中 央 广场 活力 水 景 、 阳 光 草 坡 、 半 岛 镜 湖 和 密林 溪流 五 大 景区 。</p></div></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 .display: flex 表示 将 对 象 作为 弹性 伸 
缩 盒 显示 ; justify-content:center 表示 弹性 盒 的 子 元 素 将 向 行 中 间 位 置 对 齐 ; align-items :center 表示 
弹性 盒 的 子 元 素 在 该 行 的 侧 轴 ( 纵 轴 ) 上 居中 放置 。 

此 实例 的 源 文件 名 是 myHtmlB098. html。 


529 ”指定 子 元 素 分 配 弹 性 盒 的 纵向 剩余 空间 


此 实例 主要 通过 设置 元 素 的 display \flex-direction \flex 等 属性 实现 指定 子 元 素 分 配 弹性 盒 的 纵 
向 剩余 空间 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 , 单 击 * 首 项 分 配 纵向 剩余 空间 ”按钮 , 则 第 
一 项 (第 一 幅 图 片 * 武 隆 风 光 ”) 分 配 弹性 盒 的 纵向 全 部 剩余 空间 ,第 二 项 和 第 三 项 以 最 小 高 度 值 
(20px) 显示, 如 图 529-1 所 示 ; 单 击 “ 两 项 均 分 纵向 剩余 空间 ”按钮 . 则 第 一 项 ,第 二 项 (第 一 幅 图 片 “ 武 
隆 风 光 ” 第 二 幅 图 片 *“ 大 理 风光 ”) 平 均 分 配 弹性 盒 的 纵向 剩余 空间 ,第 三 项 以 最 小 高 度 值 (20px) 显 
示 , 如 图 529-2 所 示 ; 单 击 “ 三 项 均 分 纵向 剩余 空间 ”按钮 . 则 3 幅 图 片 平 均 分 配 弹 性 盒 的 纵向 剩余 空 
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间 ,如 图 529-3 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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首 顺 分 孔 扒 向 制作 空间 “| 两 需 均 分 检 向 制作 空间 | | 三 硕 均 分 纵向 制作 全 局 首 项 分 也 外 向 制作 空间 。 两 需 均 分 从 向 制作 空间 
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三 硕 均 分 纵向 笠 余 空间 








<! doctype html >< html><head><meta charset = "UTF - 8"> 
<script src= "js/jquery - 3.1.1.min. js"></script>< script language = "javascript"> 
$ (document). ready(function() { 
$ ("#myBtnOne"). click(function() { // 首 项 分 配 纵向 剩余 空间 
$ ("#myImagea").css("flex", "1"); 
$ ("#myImageb").css("flex", "0"); 
$ ("#myImagec").css("flex", "0"); 
}); 
$ ("#myBtnTwo").click(function() { // 两 项 均 分 纵向 剩余 空间 
$("#myImagea").css("flex", "1"); 
$("#myImageb").css("flex"”, "1"); 
$("#myImagec").css("flex", "0"); 
1D); 
$ ("#myBtnThree"). click(function() { // 三 项 均 分 纵向 剩余 空间 
$("#myImagea").css("flex", "1"); 
$ ("#myImageb").css("flex", "1"); 
$("#myImagec").css("flex", "1"); });}); 
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</script> 
< style type= "text/css"> 
# container {display: flex; flex - direction: column; border: solid lpx snow; width: 450px; height: 
250px; background - color: lightgoldenrodyellow; } 
#myImagea{ background - image: url(img/B099A. jpg); } 
#myImageb{ background - image: url(img/B099B. jpg) ;} 
#myImagec{ background - image: url(img/B099C. jpg) ;} 
间 myImagea， 间 myImageb，#myImagec{font - family: 楷体 ; font - size: 20px; 
padding: 5px; color:yellow;margin:1lpx; min- height:20px; } 
input{width:144px;} 
</style></head> 
<body >< input type = "button” value = " 首 项 分 配 纵向 剩余 空间 ”id= "myBtnone"/> 
<input type = "button" value = "两 项 均 分 纵向 剩余 空间 ”id = "myBtnTwo"/> 
<input type = "button" value= "三 项 均 分 纵向 剩余 空间 ”id = "myBtnThree"/> 
<div id= "container"> 
<div id= "myImagea"> 武 隆 风光 </div> 
<div id= "myImageb"> 大 理 风光 </div> 
<div id= "myImagec"> 长 寿 风光 </div></div></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,display: flex 表示 将 对 象 作为 弹性 伸 
缩 盒 显 示 ; flex-direction:column 表示 弹性 盒 的 子 元 素 按照 纵向 从 上 往 下 排列 ; flex 属性 用 于 设置 或 
险 索 弹性 盒 模型 对 象 的 子 元 素 如 何 分 配 空间 ,在 JavaScript 中 的 语法 格式 是 object. style. flex 一 "1"， 
即 具 体 数 值 应 该 加 引号 。 

此 实例 的 源 文件 名 是 myHtmlB099. html。 


530 ”指定 子 元 素 分 配 弹 性 盒 的 横向 剩余 空间 


此 实例 主要 通过 设置 元 素 的 display ,flex-direction ,flex 等 属性 实现 指定 子 元 素 分 配 弹 性 盒 的 横 
向 剩余 空间 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 , 单 击 * 首 项 分 配 横向 剩余 空间 "按钮 , 则 第 
一 项 (第 一 幅 图 片 * 武 隆 风 光 ”) 分 配 弹 性 盒 的 横向 (水 平方 向 ) 全 部 剩余 空间 ,第 二 项 和 第 三 项 以 最 小 
宽度 值 (20px) 显 示 ,如 图 530-1 所 示 ; 单 击 “ 两 项 均 分 横向 剩余 空间 ”按钮 , 则 第 一 项 ,第 二 项 (第 一 幅 
图 片 “ 武 隆 风光 ” ,第 二 幅 图 片 “ 大 理 风 光 ”) 平 均 分 配 弹 性 盒 的 横向 剩余 空间 ,第 三 项 以 最 小 宽度 值 
(20px) 显 示 , 如 图 530-2 所 示 ; 单 击 “ 三 项 均 分 横向 剩余 空间 ”按钮 , 则 3 幅 图 片 平均 分 配 弹性 盒 的 横 
向 剩余 空间 ,如 图 530-3 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
-oo x 
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放空 间 “| 两 项 均 分 烦 向 制 休 空间 | 三 项 均 分 涡 向 制作 空间 曾 项 分 阮 融 向 制作 空间 | 两 项 均 分 涡 向 制 休 空 间 “| 三 项 均 分 确 向 剩 休 空 间 | 
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图 530-2 图 530-3 


<! doctype html >< html >< head >< meta charset = "UTF - 8"> 
< script src= "js/jquery -3.1.1.min. js"></script>< script language = "javascript"> 
$ (document). ready(function() { 
$ ("#myBtnOne"). click(function() { // 首 项 分 配 横向 剩余 空间 
$ ("#myImagea").css("flex", "1"); 
$("#myImageb").css("flex", "0"); 
$ ("#myImagec").css("flex", "0"); 
D); 
$ ("#myBtnTwo").click(function() { // 两 项 均 分 横向 剩余 空间 
$("#myImagea").css("flex", "1"); 
$("#myImageb").css("flex", "1"); 
$("#myImagec").css("flex", "0"); 
]) 
$ ("#myBtnThree"). click(function() { // 三 项 均 分 横向 剩余 空间 
$("#myImagea").css("flex", "1"); 
$("#myImageb").css("flex", "1"); 
$("#myImagec").css("flex", "1"); });}); 
</script > 
< style type= "text/css"> 
#container{ display: flex; flex— direction:row; border: solid lpx snow; width: 450px; height: 250px; 
background - color: lightgoldenrodyellow;} 
井 myImagea{ background — image: url(img/B099R. jpg);} 
#myImageb{background - image: url( img/B099B. jpg) ;} 
#myImagec{background - image: url( img/B099C. jpg) ;} 
间 myImagea，##myImageb， 间 myImagec{ font - family: 楷体 ;font- size: 20px; 
padding: 5px; color:yellow; margin:1px; min— width:50px;} 
input {width:144px;} 
</style></head> 
<body >< input type = "button” value= " 首 项 分 配 横向 剩余 空间 ”id= "myBtnOne"/> 
< input type = "button”value = "两 项 均 分 横向 剩余 空间 ”id = "myBtnTwo"/> 
< input type = "button" value= "三 项 均 分 横向 剩余 空间 " id= "myBtnThree"/> 
<div id= "container"><div id= "myImagea"> 武 隆 风 光 </div> 
<div id= "myImageb"> 大 理 风光 </div> 
<div id= "myImagec"> 长 寿 风 光 </div></div></body></html > 





上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,display: flex 表示 将 对 象 作为 弹性 伸 
缩 盒 显 示 ; flex-direction:row 表示 弹性 盒 的 子 元 素 按照 横向 从 左 往 右 排列 ,flex 属性 用 于 设置 或 检索 
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弹性 盒 模型 对 象 的 子 元 素 如 何 分 配 空 


间 ,在 JavaScript 中 的 语法 格式 是 object. style. flex 王 "1", 即 具 
体 数值 应 该 加 引号 。 注 意 , 如 果 元 素 不 是 弹性 盒 模型 对 象 的 子 元 素 , 则 flex 属性 不 起 作用 
此 实例 的 源 文件 名 是 myHtmlB100. html。 


531 ”允许 弹性 盒 的 子 元 素 具 有 自动 换行 功能 


此 实例 主要 通过 设置 弹性 盒 元 素 的 display、\flex-wrap 等 属性 实现 允许 弹性 盒 的 子 元 素 具 有 自动 
换行 功能 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 , 拖 动 浏览 器 的 边框 线 改变 页 面 宽 度 , 则 页 面 


(弹性 盒 ) 中 的 小 图 片 ( 子 元 素 ) 在 一 行 不 能 显示 时 将 自动 换 到 下 一 行 显示 ,如 图 531-1 和 图 531-2 所 
示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 531-1 


<! doctype html >< html >< head >< meta charset = "UTF — 8" 


< script src= "js/jquery-3.1.1.min. js"></script>< script language = "javascript" 
$ (document). ready(function() {// 添 加 30 幅 图 片 
var myImage = "< img src= 'img/B101. png' width 
for(i=0;i<30;i++){ 
</script> 


= '50px' height = '50px' />"; 
$ ("body").append(myImage); } }); 


<style type= "text/css"> 


body{ display: - webkit — flex; — webkit ~ flex- wrap:wrap;} 
</style></head> 


<body ></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,display: flex 表示 将 对 象 作为 弹性 盒 


显示 ; flex-wrap 属性 用 于 控制 弹性 盒 的 子 元 素 是 单行 还 是 多 行 显示 ,同时 横 轴 的 方向 决定 了 新 行 堆 
释 的 方向 。flex-wrap 属性 的 语法 格式 如 下 。 


flex- wrap:nowrap | wrap | wrap- reverse 














中 ,nowrap 表示 弹性 盒 的 子 元 素 只 在 一 行 中 显示 ,在 该 情况 下 子 元 素 可 能 会 溢出 弹性 盒 ; 
wrap 表示 可 以 多 行 显示 弹性 盒 的 子 元 素 ,在 此 情况 下 弹性 盒子 元 素 的 溢出 部 分 会 被 放置 到 新 行 , 子 
项 内 部 会 发 ， 行 


项 内 部 会 发 生 断 行 , 即 换行 ; wrap-reverse 表示 反 转 wrap 排列 . 即 如 果 wrap 排列 是 从 开始 到 结束 , 则 
wrap-reverse 将 从 结束 到 开始 o 


此 实例 的 源 文件 名 是 myHtmlB101. html。 
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532 ”纵向 拉 伸 对 齐 弹 性 盒 中 的 各 个 子 元 素 


此 实例 主要 通过 设置 弹性 盒子 元 素 的 align-self 属性 实现 纵向 拉 伸 对 齐 弹性 盒 中 的 各 个 子 元 素 。 
当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 , 单 击 “居中 对 齐 ? 按 钮 , 则 弹性 盒 中 的 各 个 子 元 素 将 位 于 
弹性 盒 的 中 间 ,如 图 532-1 所 示 ; 单 击 * 拉 伸 对 齐 ? 按 钮 , 则 在 弹性 盒 中 的 各 个 子 元 素 将 纵向 拉 伸 ,纵向 
对 齐 弹 性 盒 ,如 图 532-2 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 532-1 图 532-2 


<! doctype html >< html >< head >< meta charset = "UTF - 8"> 
< script src= "js/jquery — 3.1.1.min. js"></script >< script language = "javascript"> 
$ (document). ready(function() { 
$ ("#myBtnCenter"). click(function() { // 居 中 对 齐 
$ ("li").css("align- self", " center"); 


DD); 


$ ("#myBtnStretch").click(function() { // 拉 伸 对 齐 
$ ("li").css("align— self", "stretch"); });}); 
</script > 
<style> 


.box { display: — webkit — flex; - webkit -align- items: flex- end; 
height: 250px; margin: 0; padding: 10px; border - radius: 5px; 
list — style: none;background - color: #EEE;} 
.box li { margin: 5px; padding: 10px; border - radius: 5px; background: # AAA; text - align: center; 
background - repeat: no - repeat; background - size: 100% 100% ;width: 100px; min - height: 100px;} 
.box li:nth- child(1){ background — image: url(img/B102A. jpg); } 
.box 1i:nth- child(2){ background — image: url(img/B102B. jpg); } 
.box li:nth- child(3){ background — image: url(img/B102C. jpg); } 
input { width: 193px; } 
</style></head> 
<body><p>< input type = "button" value = "居中 对 齐 ” id = "myBtnCenter"/> 
< input type= "button” value = " 拉 伸 对 齐 ” id = "myBtnStretch"/></p> 
<ul id= "box" class = "box"><1li></1i><1li></1i><1i></1i></ul></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , $ ("1i"). css("align-self"， 
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"stretch") 用 于 设置 弹性 盒 中 的 所 有 子 元 素 在 纵向 拉 伸 对 齐 。 在 CSS3 中 ,align-self 用 于 定义 弹性 盒 
的 子 元 素 单独 在 侧 轴 ( 纵 轴 ) 方 向 上 的 对 齐 方式 。align-self 的 语法 格式 如 下 。 


align - self:auto | flex- start | flex- end | center | baseline | stretch 


其 中 ,各 属性 值 的 意义 如 下 。 

(1) flex-start: 表示 弹性 盒 元 素 的 侧 轴 ( 纵 轴 ) 起 始 位 置 的 边界 紧 靠 着 该 行 的 侧 轴 起 始 边界 。 

(2) flex-end: 表示 弹性 盒 元 素 的 侧 轴 ( 纵 轴 ) 起 始 位 置 的 边界 紧 靠 着 该 行 的 侧 轴 结 束 边 界 。 

(3) center: 表示 弹性 盒 元 素 在 该 行 的 侧 轴 ( 纵 轴 ? 上 居中 放置 (如 果 该 行 的 尺寸 小 于 弹性 盒 元 素 
的 尺寸 , 则 会 向 两 个 方向 溢出 相同 的 长 度 ) 。 

(4) baseline: 表示 如 果 弹 性 盒 元 素 的 行内 轴 与 侧 轴 为 同一 条 , 则 该 值 与 flex-start 等 效 。 在 其 他 
情况 下 ,该 值 将 与 基线 对 齐 。 

(5) stretch: 表示 如 果 指 定 侧 轴 大 小 的 属性 值 为 auto, 则 其 值 会 使 元 素 的 边 距 盒 的 尺寸 尽 可 能 接 
近 所 在 行 的 尺寸 ,但 同时 会 遵照 min/max-width/height 属性 的 限制 。 

(6) auto: 表示 如 果 align-self 的 值 为 auto, 则 其 计算 值 为 元 素 的 父 元 素 的 alignritems 值 ,如 果 其 
没有 父 元 素 , 则 计算 值 为 stretch 。 

此 实例 的 源 文 件 名 是 myHtmlB102. html。 


533 ”根据 比例 分 配 弹 性 盒 的 子 元 素 剩余 空间 


此 实例 主要 通过 设置 弹性 盒子 元 素 的 flex-basis 属性 实现 子 元 素 根据 比例 分 配 弹性 盒 的 剩余 空 
间 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,弹性 盒 中 的 两 个 子 元 素 ( 图 片 ) 将 按照 1: 2 的 比例 
分 配 弹性 盒 的 剩余 空间 ,如 图 533-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 


-oo x 
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图 533-1 


<!doctype html >< html ><head><meta charset = "UTF - 8"> 
< style type= "text/css"> 
#myContainer {display:flex;width: 400px; height: 250px; 
margin: 0;padding: 0;list— style: none;} 
#myContainer li:nth- child(1) {flex ~ basis: 200px; 
background — image: url(img/B103A. jpg);} 
#myContainer li:nth- child(2) {flex - basis: 400px; 
background — image: url(img/B103B. jpg);} 
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#myContainer 1i {margin: 1px; background - repeat: no - repeat; 
background — size: 100% 100%;} 
</style></head> 
<body><ul id= "myContainer"><1i></li><1i></li></ul ></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,flex-basis 属性 用 于 设置 或 检索 弹性 
盒 的 伸缩 基准 值 , 如 果 所 有 子 元 素 的 基准 值 之 和 大 于 剩余 空间 , 则 会 根据 每 个 子 元 素 设置 的 基准 值 按 
比例 伸缩 剩余 空间 。 在 此 实例 中 ,第 一 个 子 元 素 ( 图 片 ) 的 宽度 是 267px, 第 二 个 子 元 素 (图 片 ) 的 宽度 
是 133px, 因 此 按照 如 下 规则 分 配 弹性 盒 的 宽度 。 

第 一 个 子 元 素 ( 图 片 ) 的 宽度 王 400X(400/(400 十 200)) 一 266. 666666667; 

第 二 个 子 元 素 ( 图 片 ) 的 宽度 ==400 X(200/(400 十 200)) 王 133. 333333333 。 

flex-basis 属性 的 语法 格式 如 下 。 








flex- basis:< length> | < percentage> | auto | content 


其 中 ,属性 值 < length > 表示 用 长 度 值 来 定义 宽度 ,不 允许 为 负 值 ; 属性 值 < percentage > 表示 用 百 
分 比 来 定义 宽度 ,不 允许 为 负 值 ; 属性 值 auto 表示 无 特定 宽度 值 .取决 于 其 他 属性 值 ; 属性 值 content 
表示 基于 内 容 自 动 计算 宽度 。 

此 实例 的 源 文件 名 是 myHtmlB103. html。 


534 ”保持 子 元 素 在 水 平方 向 上 始终 位 于 容器 的 正中 


此 实例 主要 设置 容器 元 素 的 width 属性 为 -webkit-fit-content, 从 而 实现 保持 子 元 素 在 水 平方 向 
上 始终 位 于 容器 的 正中 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,无 论 怎样 拖 动 浏览 器 的 右边 
框 线 改变 窗口 大 小 ,图 片 总 是 随 之 改变 ,并且 在 水 平方 向 上 始终 位 于 正中 间 ,如 图 534-1 所 示 。 有 关 此 
实例 的 主要 代码 如 下 。 








DD myHtmls133 html X 











图 534-1 


<! doctype html >< html >< head><meta charset = "UTF - 8"> 
< style type= "text/css"> 
.myContainer { margin: auto; width: - webkit - fit— content; } 
img{ border - radius: 5px;} 
</style></head> 
<body>< div class = "myContainer">< img src = "img/B005B. jpg" ></div></body></html> 
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上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,-webkit-fit-content 是 元 素 的 width 
属性 的 关键 字 , 它 可 以 在 实现 元 素 收缩 效果 的 同时 保持 原本 的 block 水 平 状态 ,于 是 就 可 以 直接 使 用 
margin:auto 实现 元 素 向 内 自 适应 居中 效果 。 

此 实例 的 源 文 件 名 是 myHtmlB133. html。 


535 ”通过 object-position 属性 控制 子 元 素 在 容器 中 的 位 置 


此 实例 主要 通过 设置 子 元 素 的 object-position 属性 实现 根据 left、right、top、bottom 控制 子 元 素 
相对 容器 四 边 的 位 置 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 , 单 击 * 右 下 角 定 位 ?按钮 , 则 图 像 
将 显示 在 距离 容器 下 边 和 右边 10px 的 位 置 ,如 图 535-1 所 示 ; 单 击 * 右 上 角 定 位 ?按钮 , 则 图 像 将 显示 
在 距离 容器 上 边 和 右边 10px 的 位 置 , 如 图 535-2 所 示 ; 单 击 其 他 按钮 ,图 像 则 会 按照 按钮 标题 所 示 的 
定位 进行 显示 。 有 关 此 实例 的 主要 代码 如 下 。 

本 一 口 x 本 一 口 x 
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左上 前 定位 左下 角 定 位 “| ，_ 右 上 角 定 位 有 下 前 定位 左上 角 定 位 左下 角 定 位 右上 角 定 位 有 下 角 定 位 

















图 535-1 图 


<!doctype html >< html >< head > < meta charset = "UTF - 8"> 
<script src= "js/jquery — 3.1.1.min.js"></script >< script language = "javascript"> 
$ (document). ready(function() { 
$ ("#myBtnLeftTop").click(function() { // 左 上 角 定 位 
$ ("img").css("object ~ position", "left 10px top 10px"); 
DD); 
$ ("#myBtnLeftBottom").click(function() { // 左 下 角 定 位 
$ ("img").css("object — position", "left 10px bottom 10px"); 
D); 
$ ("#myBtnRightTop").click(function() { // 右 上 角 定 位 
$ ("img").css("object — position", "right 10px top 10px"); 
Ds; 
$ ("#myBtnRightBottom"). click(function() { // 右 下 角 定 位 
$ ("img").css("object — position", "right 10px bottom 10px"); });}); 
</script > 
<style> 
div { width: 425px; height: 250px; background— color: darkgreen; 
border - radius: 5px; } 
img { width: 100% ; height: 100% ;border - radius: 5px;object ~ fit: none; 
object — position: 50% 50% } 
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input { width: 100px;} 
</style></head> 
<body><p>< input type = "button" value= "左上 角 定 位 ”id = "myBtnLeftTop"/> 
< input type = "button" value = "左下 角 定 位 ”id= "myBtnLeftBottom"/> 
< input type = "button" value = "右上 角 定 位 " id = "myBtnRightTop"/> 
< input type = "button"” value = " 右 下 角 定 位 "id= "myBtnRightBottom"/></p> 
<div>< img src = "img/B005B. jpg"></div></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,object-position: right 10px bottom 
10px 表示 在 距离 容器 右边 和 下 边 10px 的 位 置 显示 子 元 素 .object-position 的 默认 值 是 50% 50% ,也 
就 是 居中 显示 子 元 素 。 

此 实例 的 源 文件 名 是 myHtmlB138. html。 


536 ”在 水 平方 向 上 居中 显示 容器 中 的 子 元 素 


此 实例 主要 设置 容器 子 元 素 的 display 属性 为 block ,margin 属性 为 auto, 从 而 实现 在 水 平方 向 上 
居中 显示 容器 中 的 子 元 素 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,无 论 怎样 拖 动 浏览 器 的 右 
边框 线 改变 窗口 大 小 ,图 片 的 位 置 总 是 随 之 改变 ,并 且 在 水 平方 向 上 始终 位 于 正中 间 , 如 图 536-1 所 
示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 536-1 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
< style type = "text/css"> 
img{display: block;margin:auto; } 
</style></head> 
<body><div>< img src = "img/B105. jpg"/></div></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 .display 属性 规定 元 素 应 该 生成 的 盒 
子 类 型 ,display: block 表示 此 元 素 将 显示 为 块 级 元 素 ,此 元 素 前 后 可 以 带 有 换行 符 < br >。margin 简 
写 属性 用 于 在 一 个 声明 中 设置 所 有 外 边 距 属性 ,该 属性 可 以 有 1 到 4 个 值 .但 是 如 果 元 素 的 display 
为 block, 则 设置 元 素 的 margin 为 auto, 将 会 使 元 素 在 水 平方 向 上 始终 居中 显示 。 

此 实例 的 源 文件 名 是 myHtmlB144. html。 
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537” 自 定义 于 元 素 在 父 容器 中 的 自 适应 模式 


此 实例 主要 通过 设置 子 元 素 的 object-fit 属性 实现 定制 子 元 素 (图 像 ) 在 父 容器 中 的 自 适应 模式 。 
当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 , 单 击 *Contain 模式 ”按钮 , 则 图 像 的 显示 效果 如 图 537-1 
所 示 ; 单 击 “None 模式 ”按钮 , 则 图 像 的 显示 效果 如 图 537-2 所 示 ; 单 击 其 他 按钮 ,图 像 则 会 按照 按钮 
标题 所 示 的 模式 进行 显示 。 有 关 此 实例 的 主要 代码 如 下 。 











西 - oo x 西 - oo x 
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图 537-1 图 537-2 


<! doctype html >< html >< head >< meta charset = "UTF - 8"> 
< script src= "js/jquery — 3.1.1.min. js"></script>< script language = "javascript"> 
$ (document). ready(function() { 
$ ("#myBtnFill").click(function() { //Fill 模式 
$ ("img").css("object — fit"”, "fill"); 
DD); 
$ ("#myBtnContain").click(function() { //Contain 模式 
$ ("img").css("object — fit", "contain"); 
1D); 
$ ("#myBtnCover").click(function() { //Cover 模式 
$ ("img").css("object — fit", "cover"); 
D; 
$ ("#myBtnNone").click(function() { //None 模式 
$ ("img").css("object— fit", "none”); 


]) 7 


$ ("#myBtnScaledown").click(function() { //Scale - down 模式 
$ ("img").css("object — fit", "scale— down"); });}); 
</script> 
<style> 


div { width: 430px; height: 250px; background - color: darkgreen; 
border - radius: Spx; } 
img { width: 100% ; height: 100%; border— radius: 5px; } 
input{width:80px;} 
</style></head> 

<body><p>< input type = "button" value = "Fill 模式" id = "myBtnFill" /> 
< input type = "button" value = "Contain 模式 ”id = "myBtnContain" /> 
< input type = "button”value = "Cover 模式 " id= "myBtnCover" /> 
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< input type = "button"” value = "None 模式 " id = "myBtnNone" /> 
< input type = "button" value = "Scale 模式 " id= "myBtnScaledown" /></p> 
<div>< img src = "img/B005B. jpg"></div></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,object-fit 属性 用 于 设置 当前 子 元 素 
在 容器 中 的 适应 模式 ,object-fit 属性 包括 下 列 5 个 属性 值 。 

(1) fill: 默认 值 ,表示 替换 内 容 ( 子 元 素 ) 拉 伸 填 满 整 个 容器 ,不 保证 保持 原 有 的 比例 。 

(2) contain: 表示 保持 原 有 尺寸 比例 ,保证 替换 内 容 尺 寸 一 定 可 以 在 容器 里 面 放 得 下 ,因此 该 属 
性 值 可 能 会 在 容器 内 留 下 空白 。 

(3) cover: 表示 保持 原 有 尺寸 比例 ,保证 替换 内 容 ( 子 元 素 ) 尺 寸 一 定 大 于 容器 尺寸 ,宽度 和 高 度 
至 少 有 一 个 和 容器 一 致 ,因此 该 属性 值 可 能 会 让 替换 内 容 ( 如 图 片 ) 部 分 区 域 不 可 见 。 

(4) none: 表示 保持 原 有 尺寸 比例 ,同时 保持 替换 内 容 原 始 尺 寸 大 小 。 

(5) scale-down: 中 文 释义 为 “降低 ”, 就 好 像 依次 设置 了 none 或 contain, 最 终 呈 现 的 是 尺寸 比较 
小 的 那个 。 

此 实例 的 源 文件 名 是 myHtmlB137. html。 


538 ”使 用 cale() 实 现 元 素 与 容器 的 同步 变化 


此 实例 主要 通过 使 用 cale0) 函数 根 据 页 面 (容器 ) 的 当前 宽度 值 动态 计算 子 元 素 ( 图 片 ) 的 宽度 ， 
从 而 实现 子 元 素 ( 图 片 ) 与 容器 (页 面 ) 同 步 变 化 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 , 拖 动 
浏览 器 右 端的 边框 线 改变 页 面 大 小 , 则 图 片 的 宽度 也 随 之 缩放 ,但 图 片 与 页 面 右 端 始终 相距 50px, 如 
图 538-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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拖 动 浏览 器 边 框 找 区 二 苦 声 靖 放 ， 但 与 右 
端 始 终 相距 50px. oi 








图 538-1 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<style type= "text/css"> 
#myDiv{ width:calc(100% — 50px); height:250px;background - image: url(img/B104. jpg); margin: 1px; 
background - repeat: no— repeat; background — size: 100% 100% ;border - radius: 5px;} 
</style></head> 
<body ><div id= "myDiv"> 拖 动 浏览 器 边框 线 改变 大 小 , 则 图 片 随 之 缩放 ,但 与 右 端 始终 相距 50px. </div > 
</body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,width:calc(100% 一 50px) 用 于 根据 
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当前 页 面 的 宽度 设置 元 素 ( 图 片 ) 的 宽度 。 例 如 .如 果 当 前 容器 (页 面 ) 的 宽度 是 400px, 在 经 过 calc 
(100% 一 50px) 计 算 之 后 元 素 ( 图 片 ) 的 宽度 就 是 350px。 在 CSS3 中 ,calc() 函数 用 于 动态 计算 长 度 
值 ,任何 长 度 值 都 可 以 使 用 calc() 函 数 进行 计算 。calc() 函数 支持 十 、 一 、x 、/ 、mod 运算 ,以 后 还 可 能 
加 入 min()/max() 等 运算 。 

此 实例 的 源 文 件 名 是 myHtmlB104. html。 


539 ”使 用 column-rule 属性 设置 列 分 隔 样式 


此 实例 主要 通过 设置 列 的 column-rule 属性 实现 单行 配置 多 列 布局 的 列 与 列 之 间 的 列 规则 。 当 
在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,以 4 列 、 双 线 方式 显示 的 “短歌 行 " 如 图 539-1 所 示 。 有 关 
此 实例 的 主要 代码 如 下 。 
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何以 解忧 ? 


契 赂 谈 诬 ， 
心 念 旧 思 。 


CL 思 难 忘 。 





<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<style type= "text/css"> 
#myContainer {width: 400px; margin: 10px; background - color: #FFF; 
border: 1px solid # EEE; box - shadow: 5px 5px 5px 1px #999, 
0 0 40px rgba(0, 0, 0, 0.06) inset; position: relative; 
border - radius: 5px; padding: 20px;text - align: center;} 
/* 设 置 4 列 , 以 灰色 双 线 分 隔 * / 
井 myColumn { - webkit — column - count:4; — webkit - column - rule: 3px double gray;} 
body {background - color: lightgray;} 
</style></head> 
<body><div id= "myContainer"><div id= "myColumn"><h3 > 短歌 行 </h3><p> 对 酒 当 歌 ,人 生 几 何 ! 辟 如 朝露 ， 
去 日 苦 多 。 慨 当 以 慷 , 忧 思 难 忘 。 何 以 解忧 ? 唯 有 杜康 。 青 青子 罕 , 悠 悠 我 心 。 但 为 君 故 ,沉吟 至 今 。 哟 哟 鹿 鸣 ， 
食 野 之 莘 。 我 有 嘉宾 , 鼓 瑟 吹 笔 。 明 明 如 月 , 何 时 可 授 ? 优 从 中 来 ,不 可 断绝 。 越 陌 度 陡 , 枉 用 相 存 。 契 阁 谈 议 , 
心 念 旧 恩 。 月 明星 稀 , 乌 鹊 南 飞 。 绕 树 三 臣 , 何 枝 可 依 ? 山 不 厌 高 , 海 不 厌 深 。 周 公 吐 哺 , 天 下 归心 。</p></div> 
</div> 
</body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,-webkit-column-count:4 表示 在 div 
块 中 有 4 列 ; -webkit-column-rule: 3px double gray 表示 列 宽 为 3px. 以 灰色 双 线 分 隔 。column-rule 
属性 是 一 个 简写 属性 ,用 于 设置 所 有 column-rule- * 属性 , 即 设置 宽度 、 样 式 和 颜色 规则 ,column-rule 
属性 的 语法 格式 如 下 。 


column ~ rule: column ~ rule - width column - rule- style column ~- rule - color 
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其 中 ,column-rule-width 表示 设置 列 之 间 的 宽度 规则 ; column- rule-style 表示 设置 列 之 间 的 样 
式 规则 , 即 none| hidden|dotted|dashed|solid|double| groove|ridge|inset|outset; column-rule-color 
表示 设置 列 之 间 的 颜色 规则 。 

此 实例 的 源 文件 名 是 myHtmlB077. html。 


540 ”保持 子 元 素 在 水 平和 垂直 方向 上 始终 位 于 正中 


此 实例 主要 通过 设置 元 素 的 position top ,left 等 属性 实现 保持 子 元 素 在 水 平和 垂直 方向 上 始终 
位 于 容器 的 正中 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,无 论 怎样 拖 动 浏览 器 的 边框 线 改变 
窗口 大 小 ,图 片 总 是 位 于 浏览 器 的 正中 ,如 图 540-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 


| : 文 














口 myHeml8178 html x 
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图 540-1 


<!doctype html ><html >< head >< meta charset = UIF -8> 
<style type= "text/css"> 
img{ border - radius: 10px; width: 400px; height:250px; position: absolute; top: calc(50% - 125px); 
left: calc(50% — 200px); } 
</style></head> 
<body >< img src = "img/B151B. jpg"/></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,top: calc(50% 一 125px) 表 示 img 元 
素 的 左上 角 坐 标 top 值 是 容器 (浏览 器 窗口 ) 高 度 的 50% 减 去 img 元 素 高 度 (250px) 的 一 半 ( 即 
125px) 的 结果 值 ; left: cale(50% 一 200px) 表 示 img 元 素 的 左上 角 坐 标 left 值 是 容器 (浏览 器 窗口 ) 宽 
度 的 50% 减 去 img 元 素 宽度 (400px) 的 一 半 ( 即 200px) 的 结果 值 .任何 长 度 值 都 可 以 使 用 cale() 函 数 
进行 计算 ; position: absolute 表示 img 元 素 采 取 绝 对 定位 模式 。 在 CSS3 中 ,position 属性 用 于 检索 
对 象 的 定位 方式 ,绝对 定位 的 元 素 ,在 top ,right .bottom ,left 属性 未 设置 时 会 紧 随 在 其 前 面 的 兄弟 元 
素 之 后 ,但 在 位 置 上 不 影响 常规 流 中 的 任何 元 素 。position 属性 的 语法 格式 如 下 。 





position: static | relative | absolute | fixed | center | page | sticky 


其 中 ,各 属性 值 的 说 明 如 下 。 

(1) static: 表示 对 象 遵循 常规 流 , 此 时 4 个 定位 偏 移 属性 不 会 被 应 用 。 

(2) relative: 表示 对 象 遵循 常规 流 ,并 且 参 照 自身 在 常规 流 中 的 位 置 通过 top \right\bottom \left 
这 4 个 定位 偏 移 属性 进行 偏 移 时 不 会 影响 常规 流 中 的 任何 元 素 。 

(3) absolute: 表示 对 象 脱 离 常规 流 ,此 时 偏 移 属性 参照 的 是 离 自身 最 近 的 定位 祖先 元 素 , 如 果 没 
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有 定位 的 祖先 元 素 , 则 一 直 回 溯 到 body 元 素 。 盒 子 的 偏 移 位 置 不 影响 常规 流 中 的 任何 元 素 , 其 
margin 不 与 其 他 任何 margin 折 笃 。 

(4) fixed: 与 absolute 一 致 ,但 偏 移 定位 是 以 窗口 为 参考 , 当 出 现 滚动 条 时 对 象 不 会 随 着 滚动 。 

(5) center: 与 absolute 一 致 ,但 偏 移 定位 是 以 定位 祖先 元 素 的 中 心 点 为 参考 。 盒 子 在 其 包含 容 
器 垂直 \ 水 平 居中 。 

(6) page: 与 absolute 一 致 。 元 素 在 分 页 媒体 或 者 区 域 块 内 ,元 素 的 包含 块 始终 是 初始 包含 块 ， 
否则 取决 于 每 个 absolute 模式 。 

(7) sticky: 表示 对 象 在 常态 时 遵循 常规 流 。 它 就 像 是 relative 和 fixed 的 合体 , 当 在 屏幕 中 时 按 
常规 流 排版 , 当 卷 动 到 屏幕 外 时 的 表现 如 fixed。 该 属性 的 表现 是 现实 中 大 家 所 见 到 的 吸附 效果 。 

此 实例 的 源 文件 名 是 myHtmlB178. html。 


541 在 乖 直 方向 上 居中 显示 在 一 行文 本 中 插 人 的 图 像 


此 实例 主要 通过 设置 vertical-align 属性 实现 在 垂直 方向 上 居中 显示 在 一 行文 本 中 插 和 人 的 图 像 。 
当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,图 像 居 中 显示 的 效果 如 图 541-1 所 示 。 有 关 此 实例 的 
主要 代码 如 下 。 








百 - oo x 
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阿尔 伯 特 ， 爱 因 斯 坦 (1879. 3. 14-1955.4 18) 犹 术 商 


人 
年 ， 促 立 狭义 相对 论 。 1915 年 创立 广义 相对 





图 541-1 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<style> 
/* 创建 阴影 盒子 * / 
div { display: inline - block; padding: 15px; width: 450px; height: 218px; margin: 10px; background— 
color: #FFF; border: 1px solid # EEE; box — shadow: 5px 5px 5px 1px #999, 0 0 40px rgba(0, 0, 0, 
0.06) inset; position: relative; border — radius: 5px; } 
body { background - color: lightgray; } 
img {border - radius: 5px;width: 80px; margin: 5px; height: 100px; 
vertical- align: middle; } /Vx* 在 垂直 方向 上 居中 显示 图 像 * / 
</style></head> 
<body>< div><p> 阿 尔 伯 特 ? 爱 因 斯 坦 < img src = "img/B189. jpg"/>(1879.3.14- 1955.4.18) 犹 太 裔 物理 学 家 。 
他 于 1879 年 出 生 于 德国 乌 尔 姆 市 的 一 个 犹太 人 家 庭 (父母 均 为 犹太 人 ),1900 年 毕业 于 苏黎世 联邦 理工 学 院 , 入 
瑞士 国籍 。1905 年 , 获 苏黎世 大 学 哲学 博士 学 位 , 爱 因 斯 坦 提出 光子 假设 ,成 功 解释 了 光电 效应 ,因此 获得 1921 
年 诺 贝尔 物理 奖 ,同年 ,创立 狭义 相对 论 。1915 年 创立 广义 相对 论 。</p></div></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,vertical-align: middle 用 于 居中 对 齐 
图 像 ,如 果 设 置 为 vertical-align: bottom, 则 在 底部 对 齐 图 像 。 在 CSS 中 .vertical-align 属性 用 于 设置 
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元 素 的 垂直 对 齐 方式 ,该 属性 定义 行内 元 素 的 基线 相对 于 该 元 素 所 在 行 的 基线 垂直 对 齐 ,并 且 人 允许 指 
定 负 长 度 值 和 百分比 值 , 但 这 会 使 元 素 降 低 而 不 是 升 高 。 在 单元 格 中 ,这 个 属性 用 于 设置 单元 格 内 容 
的 对 齐 方式 。vertical-align 属性 支持 的 属性 值 的 说 明 如 下 。 

(1) baseline: 默认 值 ,表示 元 素 放置 在 父 元 素 的 基线 上 。 

(2) sub: 表示 垂直 对 齐 文本 的 下 标 。 

(3) super: 表示 垂直 对 齐 文本 的 上 标 。 

(4) top: 表示 把 元 素 的 顶端 与 行 中 最 高 元 素 的 顶端 对 齐 。 

(5) text-top: 表示 把 元 素 的 顶端 与 父 元 素 字体 的 顶端 对 齐 。 

(6) middle: 表示 把 此 元 素 放置 在 父 元 素 的 中 部 。 

(7) bottom: 表示 把 元 素 的 顶端 与 行 中 最 低 的 元 素 的 顶端 对 齐 。 

(8) text-bottom: 表示 把 元 素 的 底 端 与 父 元 素 字 体 的 底 端 对 齐 。 

(9) length: 表示 具体 数字 。 

(10) %: 表示 使 用 line-height 属性 的 百分比 值 来 排列 此 元 素 ,允许 使 用 负 值 。 

(11) inherit: 规定 应 该 从 父 元 素 继承 vertical-align 属性 的 值 。 

此 实例 的 源 文件 名 是 myHtmlB189. html。 


542 ”等 间距 排列 一 行 中 的 各 个 图 像 ( 元 素 ) 


此 实例 主要 设置 容器 的 text-align-last 属性 为 justify, 从 而 实现 均匀 分 布 单 行 中 的 多 个 独立 的 图 
像 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 , 单 击 * 两 端 对 齐 " 按 钮 , 则 在 容器 中 均匀 分 布 4 个 独 
立 的 图 像 , 如 图 542-1 所 示 ; 单 击 “向 左 对 齐 ” 按 钮 . 则 4 个 独立 的 图 像 将 靠 在 容器 的 左 侧 , 如 图 542-2 
所 示 ; 单 击 “ 向 右 对 齐 ” 按 钮 , 则 4 个 独立 的 图 像 将 靠 在 容器 的 右 侧 ,如 图 542-3 所 示 ; 单 击 * 居 中 对 齐 ” 
按钮 , 则 4 个 独立 的 图 像 将 在 容器 中 居中 对 齐 ,如 图 542-4 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 








/DD myHmls231heml x / D myHe8231htm * \W 
二 3 © D filey//D/myWork/myHtmlB231.html 它 三 § 3 © D filey/VDVmyworwmyHtmlB231html 空 三 

















向 左 对 齐 | | 向 右 对 齐 | | 届 中 对 齐 | | 两 问 对 齐 | | 向 左 对 齐 | | 向 对齐 | | 遇 中 对 章 | | 两 删 对 齐 | 








图 542-1 图 542-2 


/Dem x i /Dm x 
© 3 © Dfile///D/myWor/myHtmlB231.html 它 § 言 Dfile///D/myWorW/myHtmlB231.html 安 层 


| 由 对 齐 | | 。 向 右 对 间 | | 局 中 对 齐 | ， 两 对 齐 | [向 丰 对 章 | | 向 对 齐 | | 属 中 对 齐 | | 两 六 对 齐 | 























图 542-3 图 542-4 
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<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
< script src= "js/jquery - 3.1.1.min. js"></script>< script language = "javascript"> 
$ (document). ready(function() { 
$ ("#myLeft").click(function() { // 向 左 对 齐 
$ ("div").css("text -align— last", "left"); 
Hx 


$ ("#myRight"). click(function() { // 向 右 对 齐 
$ ("div").css("text -align— last", "right"); 
DD); 
$ ("#myCenter"). click( function() { // 居 中 对 齐 
$ ("div").css("text -align— last", "center"); 
DD); 
$ ("#myJustify").click(function() { // 两 端 对 齐 
$ ("div").css("text -align— last", "justify"); });}); 
</script> 
<style> 


div { box— shadow: 5px 5px 5px 1px #999, 0 0 40px rgba(0, 0, 0, 0.06) inset; 
height: 100px; width: 450px; text - align - last: justify; padding: 20px; border - radius: 5px; 
background ~ color: aquamarine;} 

img{ width:60px; height :60px; } 
input{ width:112px; margin: 3px;} 
</style></head> 

<body>< center ><p>< input type = "button" value= "向 左 对 齐 " id = "myLeft"/> 

< input type = "button"” value = "向 右 对 齐 ” id = "myRight"/> 
< input type = "button"” value = "居中 对 齐 ” id = "myCenter"/> 
< input type = "button” value = "两 端 对 齐 " id = "myJustify"/></p> 
<div><p>< img src="img/B066A. png"/>< img src= "img/B067A. png"/> 
< img src = "img/B209A. png"/>< img src = "img/B209B. png"/></p></div> 
</center ></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,textalign-last: justify 用 于 均匀 分 布 
容器 中 的 子 元 素 。 在 CSS 中 ,text-align-last 属性 规定 如 何 对 齐 文本 的 最 后 一 行 , 当 将 独立 的 图 像 视 
作 单个 汉字 之 后 也 能 实现 类 似 的 效果 。text-align-last 属性 的 语法 格式 如 下 。 


text -align- last: auto | left | right | center | justify | start | end | initial | inherit 


其 中 ,各 属性 值 的 意义 如 下 。 

(1) auto: 该 属性 值 是 默认 值 ,用 于 使 最 后 一 行 被 调整 ,并 向 左 对 齐 。 

(2) left: 该 属性 值 用 于 使 最 后 一 行 向 左 对 齐 。 

(3) right: 该 属性 值 用 于 使 最 后 一 行 向 右 对 齐 。 

(4) center: 该 属性 值 用 于 使 最 后 一 行 居中 对 齐 。 

(5) justify: 该 属性 值 用 于 使 最 后 一 行 被 调整 为 两 端 对 齐 。 

(6) start: 该 属性 值 用 于 使 最 后 一 行 在 行 开头 对 齐 ( 如 果 text-direction 属性 值 是 从 左 到 右 , 则 向 
左 对 齐 ; 如 果 text-direction 属性 值 是 从 右 到 左 . 则 向 右 对 齐 ) 。 

(7) end: 该 属性 值 用 于 使 最 后 一 行 在 行 末尾 对 齐 ( 如 果 text-direction 属性 值 是 从 左 到 右 , 则 向 右 
对 齐 ; 如 果 text-direction 属性 值 是 从 右 到 左 , 则 向 左 对 齐 ) 。 

(8) initial: 设置 该 属性 为 它 的 默认 值 。 

(9) inherit: 表示 从 父 元 素 继承 该 属性 。 

此 实例 的 源 文件 名 是 myHtmlB231. html。 
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543 ”调整 多 个 元 素 在 垂直 方向 上 的 间隔 距离 


此 实例 主要 设置 文本 行 间距 的 line-height 属性 ,从 而 调整 多 个 图 像 元 素 在 垂直 方向 上 的 间隔 距 
离 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 , 单 击 “ 小 间距 显示 ”按钮 . 则 3 幅 图 像 在 垂直 方向 上 
的 显示 效果 如 图 543-1 所 示 ; 单 击 " 大 间距 显示 ”按钮 , 则 3 幅 图 像 在 垂直 方向 上 的 显示 效果 如 图 543-2 
所 示 。 有 关 此 实例 的 主要 代码 如 下 。 





























图 543-1 图 543-2 


<!doctype html >< html >< head><meta charset = "UTF - 8"> 
<script src= "js/jquery-3.1.1.min.js"></script>< script language = "javascript"> 
$ (document). ready(function() { 
$ ("#myBtnSmall"). click(function() { // 小 间距 显示 
$ ("Pp").css("line— height", "5px"); 
D; 
$ ("#myBtnBig"). click( function() { // 大 间距 显示 
$ ("p").css("line— height", "100px"); });}); 
</script> 
<style type = "text/css"> 
div { text -align: center;background - color: lightgray; 
width:400px; border — radius: 10px; } 
img{ width:50px; height:50px; } 
button{ width: 195px; } 
</style></head> 
<body >< span >< button id= "myBtnSmall"/> 小 间距 显示 </button > 
< button id = "myBtnBig"/> 大 间距 显示 </button></span> 
<div><p>< img src="img/B066A. png"></p><p>< img src= "img/B066R. png"></p> 
<p>< img src= "img/B066A. png"></p></div></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,line-height 属性 用 于 设置 < p > 标签 
内 部 的 文本 及 其 之 间 的 距离 ( 行 高 ) ,该 属性 会 影响 行 框 的 布局 ,在 应 用 到 一 个 块 级 元 素 时 它 定义 了 该 
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元 素 中 基线 之 间 的 最 小 距离 而 不 是 最 大 距离 。line-height 与 font-size 的 计算 值 之 差 (在 CSS 中 成 为 
“ 行 间距 ”) 分 为 两 半 ,分别 加 到 一 个 文本 行内 容 的 顶部 和 底部 ,可 以 包含 这 些 内 容 的 最 小 框 就 是 行 框 。 
line-height 属性 支持 的 属性 值 说 明 如 下 。 

(1) normal: 默认 值 ,设置 合理 的 行 间距 。 

(2) number: 设置 数字 ,此 数字 会 与 当前 的 字体 尺寸 相 乘 来 设置 行 间距 。 

(3) length: 设置 固定 的 行 间距 。 

(4) %; 基于 当前 字体 尺寸 的 百分比 行 间距 。 

(5) inherit; 规定 应 该 从 父 元 素 继承 line-height 属性 的 值 。 

此 实例 的 源 文件 名 是 myHtmlB194. html。 


544 自 定 义 子 元 素 在 水 平方 向 上 的 排列 方向 


此 实例 主要 通过 设置 元 素 的 direction 属性 实现 动态 重 置 子 元 素 在 水 平方 向 上 的 排列 方向 。 当 在 
Google Chrome 浏览 器 中 显示 该 页 面 时 , 单 击 * 从 右 至 左 排列 ?按钮 , 则 3 幅 图 像 的 排列 方向 如 图 544-1 
所 示 ; 单 击 “ 从 左 至 右 排列 ”按钮 , 则 3 幅 图 像 的 排列 方向 如 图 544-2 所 示 。 有 关 此 实例 的 主要 代码 
如 下 。 
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<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<script src= "js/jquery - 3.1.1.min. js"></script >< script language = "javascript"> 
$ (document). ready(function() { 
$ ("#myBtnRTL"). click( function() { // 从 右 至 左 排列 
$("#myContainer").css("direction", "rtl1"); 
D); 
$("#myBtnLTR").click(function() { ”// 从 左 至 右 排列 
$("#myContainer").css("direction", "ltr"); });}); 
</script> 
<style type= "text/css"> 
#myContainer {display: - webkit - flex; width: 450px; } 
.myView {width: 130px; padding: 10px; background - color: darkgreen; 
margin: 1px; text - align: center; border - radius: 5px;} 
img{ border - radius: 5px;} 
</style></head> 
<body> 
<p>< input type= "button" value= "从 右 至 左 排列 " id= "myBtnRTL" style= "width:220px"/> 
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< input type = "button" value= "从 左 至 右 排 列 ”id = "myBtnLTR" style = "width:220px"/></p> 
<div id= "myContainer">< div class= "myView" >< img src= "img/B102R. jpg"></div> 
<divclass= "myView">< img src= "img/B102B. jpg"></div> 
<div class= "myView">< img src = "img/B102C. jpg"></div></div></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,direction 属性 规定 元 素 的 方向 ,该 属 
性 主要 有 ltr 和 rtl 两 个 属性 值 。ltr 是 默认 值 ,表示 left-to-right, 就 是 从 左 往 右 的 意思 ,比方 说 前 后 两 
个 图 片 ,在 默认 情况 下 ,DOM 在 前 的 就 显示 在 左边 ; rtl 则 是 right-to-left 的 缩写 ,就 是 从 右 往 左 的 意 
思 , 在 默认 情况 下 ,DOM 在 前 的 就 显示 在 右 侧 , 而 且 是 在 容器 的 右 端 。 

此 实例 的 源 文件 名 是 myHtmlB135. html。 


545 ”人 允许 或 禁止 与 相 邻 同 级 元 素 的 float 关系 


此 实例 主要 通过 设置 元 素 的 clear 属性 实现 允许 或 禁止 当前 元 素 与 相 邻 同 级 元 素 的 float 关系 。 
当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 , 单 击 "文字 在 下 端 ? 按 钮 , 则 将 禁止 文本 的 left 属性 值 ， 
即 禁止 向 左 流 式 布局 ,因此 文本 在 下 端 ,如 图 545-1 所 示 ; 单 击 * 文 字 在 右 下 端 ? 按 钮 , 则 将 取消 禁止 文 
本 的 left 属性 值 , 即 允 许 向 左 流 式 布局 (此 属性 是 图 像 的 float 属性 值 ), 因 此 文本 在 右 下 端 ,如 图 545-2 所 
示 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 545-1 图 545-2 


<!doctype html ><html >< head >< meta charset = "UTF - 8"> 
<script src= "js/jquery - 3.1.1.min. js"></script >< script language = "javascript"> 
$ (document). ready(function() { 
$ ("#myBtnBottom").click(function() { // 文 字 在 下 端 
$("p").css("clear", "left"); 
Ds; 
$ ("#myBtnRight"). click(function() { // 文 字 在 右 下 端 
$ ("p").css("clear", "none”); });}); 
</script> 
<style type= "text/css"> 
.box { width: 400px;border - radius: 5px; padding: 3px; 
background — color: aqua;} 
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img {float: left;margin: 5px;border - radius: 5px;} 

input {width: 195px;border - radius: 2px; padding: 3px;margin: 2px;} 

p{ margin: 2px;font - size: 14px;text — indent: 25px;} 
</style></head> 
<body>< div>< input type= "button"” value = "文字 在 下 端 " id= "myBtnBottom"/> 

< input type = "button" value = "文字 在 右 下 端 " id = "myBtnRight"/></div> 

<div class = "box">< img src = "img/B102B. jpg"><p> 中 央 电 视 台 (简称 央视 ,英语 China Central Television, 简 
称 CCTV), 是 中 华人 民 共 和 国 国家 电视 台 。1958 年 5 月 1 日 试播 ,9 月 2 日 正式 播 出 。 初 名 北京 电视 台 ,1978 年 5 
月 1 日 更 名 为 中 央 电 视 台 。 中 央 电 视 台 是 中 国 重要 的 新 闻 与 论 机 构 , 蚌 党 .政府 和 人 民 的 重要 喉舌 ,是 中 国 重要 
的 思想 文化 阵地 , 是 当今 中 国 最 具 竞 争 力 的 主流 媒体 之 一 ,具有 传播 新 闻 ,社会 教育 .文化 娱乐 .信息 服务 等 多 种 
功能 ,是 全 国 公 众 获 取信 息 的 主要 渠道 ,也 是 中 国 了 解 世 界 、 世 界 了 解 中 国 的 重要 窗口 ,在 国际 上 的 影响 正 日 益 
增强 。</p></div></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,clear 属性 规定 元 素 的 哪 一 侧 不 允许 


其 他 浮动 (float) 元 素 。 在 CSS1 和 CSS2 中 ,这 是 通过 自动 为 清除 元 素 ( 即 设置 了 clear 属性 的 元 素 ) 
增加 上 外 边 距 实现 的 。 在 CSS2. 1 中 ,会 在 元 素 上 外 边 距 之 上 增加 清除 空间 ,而 外 边 距 本 身 并 不 改变 。 
不 论 哪 一 种 改变 ,最 终结 果 都 一 样 , 如 果 声 明 为 左边 或 右边 清除 ,会 使 元 素 的 上 外 边框 边界 刚好 在 该 
边 上 浮动 元 素 的 下 外 边 距 边 界 之 下 。clear 属性 支持 的 属性 值 的 意义 如 下 。 


(1) left: 表示 在 左 侧 不 允许 浮动 元 素 。 

(2) right: 表示 在 右 侧 不 允许 浮动 元 素 。 

(3) both: 表示 在 左 、 右 两 侧 均 不 允许 浮动 元 素 。 

(4) none: 默认 值 ,表示 人 允许 浮动 元 素 出 现在 两 侧 。 

(5) inherit: 表示 规定 应 该 从 父 元 素 继承 clear 属性 的 值 。 
此 实例 的 源 文件 名 是 myHtmlB141. html。 


546 ”使 用 多 列 布局 实现 元 素 内 容 的 分 多 列 显示 


此 实例 主要 通过 设置 column-count 和 column-width 属性 实现 以 多 列 布局 的 方式 将 一 个 元 素 的 





内 容 分 为 两 列 或 多 列 显示 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,以 两 列 方式 显示 的 “长 恨 
歌 ”如 图 546-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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<!doctype html >< html >< head >< meta charset = "UTF — 8"> 
<style type= "text/css"> 
#myContainer { width: 560px;} 
提 myColumn { 一 webkit - column - count: 2; /x 设置 容器 有 两 列 , 列 宽 为 270pxx/ 
— webkit - column - width: 270px;text - align: center; } 
/=* 创 建 多 级 辉 光 的 标题 文字 * / 
#myTitle { width: 560px; height: 100px; color: black; text - shadow: 0 0 5px # FFF, 0 0 10px #FFF, 0 0 
15px 并 FFF，0 0 30px 并 FF00DE，0 0 45px 间 FF00DE; font: bold 40px/100% "微软 雅 黑 "， 
"Lucida Grande", "Lucida Sans", Helvetica, Arial, Sans; display: table - cell; vertical— 
align: middle; text ~ align: center;} 
img {margin: 5px;border - radius: 5px;} 
</style></head> 
<body>< div id = "myContainer"><div id= "myTitle"> 中 华 古 诗词 经 典 欣赏 </div> 
<div id= "myColumn">< h3> 长 歌 行 </h3><p> 青 青 网 中 莹 ,朝露 待 日 星 。< br> 
阳春 布 德 泽 , 万 物 生 光辉 。 < br > 常 恐 秋 节 至 , 烛 黄 华 叶 衰 。<br> 
百川 东 到 海 , 何 时 复 西 归 ?< br > 少壮 不 努力 ,老大 徒 伤 翡 。<br></p> 
<h3 > 长 恨 歌 </h3 > <p> 汉 皇 重 色 思 倾 国 , 御 宇多 年 求 不 得 。<br> 
杨 家 有 女 初 长 成 , 养 在 深 图 人 未 识 。<br> 天 生 丽 质 难 自 弃 ,一 朝 选 在 君王 侧 。<br> 
回眸 一 笑 百 媚 生 ,六 宫 粉 焦 无 颜色 。<br> 春 寒 赐 浴 华 清 池 ,温泉 水 清洗 凝脂 。< br > 
侍 儿 扶 起 娇 无 力 , 始 是 新 承 恩泽 时 。< br> 云 缀 花 颜 金 步 播 , 芙蓉 帐 暖 度 春宵 。< br > 
春宵 苦 短 日 高 起 , 从 此 君王 不 早 朝 。< br > </p > < img src = " img/B074. jpg"> </div > </div > 
</body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,column-count 属性 用 于 规定 元 素 应 
该 被 划分 的 列 数 ,该 属性 的 语法 格式 如 下 。 


column - count : number | auto 


其 中 ,number 属性 值 表示 元 素 内 容 将 被 划分 的 最 佳 列 数 , 即 一 具体 数字 ; auto 属性 值 表示 由 其 
他 属性 决定 列 数 ,例如 column-width。 
column-width 属性 用 于 规定 列 的 宽度 ,该 属性 的 语法 格式 如 下 。 


column- width: auto | length 


其 中 ,auto 属性 值 表示 由 浏览 器 决定 列 宽 ; length 属性 值 规定 列 的 宽度 , 即 一 具体 数字 。 
此 实例 的 源 文件 名 是 myHtmlB074. html。 


547” 自 定义 多 列 布局 的 列 与 列 之 间 的 分 隔 样 式 


此 实例 主要 通过 设置 列 的 column-count、 column-rule-style、 column-rule-width、 column-rule- 
color 等 属性 值 实现 定制 多 列 布局 的 列 与 列 之 间 的 分 隔 样式 。 当 在 Google Chrome 浏览 器 中 显示 该 
页 面 时 ,以 3 列 、 虚 线 方式 显示 的 ”长恨歌 节选 ?如 图 547-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 





<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
< style type = "text/css"> 
##myContainer { width: 420px; margin: 10px;background— color: #FFF; 
border: 1px solid # EEE; box— shadow: 5px 5px 5px 1px #999, 
0 0 40px rgba(0, 0, 0, 0.06) inset;position: relative; 
border - radius: 5px; padding: 20px; text — align: center;} 
/* 设 置 3 列 , 以 黑色 虚线 分 隔 * / 





第 6 部 分 有 局 


#myColumn { - webkit - column - count:3; - webkit - column - rule - style: dotted; - webkit - column— 
rule— width:2px; - webkit- column- rule- color:black;} 
body { background- color: lightgray;} 
</style></head> 

<body><div id= "myContainer"><div id= "myColumn"><h3 > 长 恨 歌 节选 </h3> 

<p> 金 闪 西 厢 邑 玉 肩 , 转 教 小 玉 报 双 成 。 闻 道 汉 家 天 子 使 , 九 华 帐 里 梦 魂 惊 。 揽 衣 推 枕 起 徘徊 , 珠 箱 银屏 筷 通 
开 。 云 颇 半 偏 新 睡觉 ,花冠 不 整 下 党 来 。 风 吹 仙 实 飘 飘 举 , 犹 似 壳 宾 羽 衣 舞 。 玉 容 寂寞 泪 闵 干 ,梨花 一 枝 春 带 
雨 。 含 情 凝 暗 谢 君王 ,一 别 音 容 两 渺茫 。 昭 阳 殿 里 恩爱 绝 ,蓬莱 宫 中 日 月 长 。 回 头 下 望 人 赛 处 ,不 见长 安 见 全 
雾 。 惟 将 旧 物 表 深 情 , 钢 合 金 银 寄 将 去 。 乌 留 一 股 合 一 扇 , 包 警 黄金 合 分 钢 。 但 教 心 似 金 铀 坚 , 天 上 人 间 会 相 
见 。 临 别 殷 勤 重 寄 词 , 词 中 有 斩 两 心 知 。 七 月 七 日 长 生 殿 ,夜半 无 人 私语 时 。 在 天 愿 作 比翼 鸟 , 在 地 愿 为 连理 
枝 。 天 长 地 久 有 时 尽 , 此 恨 编 绵 无 绝 期 。</p></div></div></body></html> 
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图 547-1 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,-webkit-column-count:3 表示 div 块 
中 有 3 列 ; -webkit-column-rule-width:2px 表示 div 块 中 的 列 分 隔 线 的 宽度 是 2px; -webkit-column- 
rule-color:black 表示 div 块 中 的 列 分 隔 线 的 颜色 是 黑色 ; -webkit- column-rule-style: dotted 表示 div 
块 中 的 列 分 隔 线 是 虚线 。column-rule-style 属性 的 语法 格式 如 下 。 


column- rule- style: none | hidden | dotted | dashed | solid | double 


其 中 ,none 定义 没有 规则 、hidden 定义 隐藏 规则 、dotted 定义 点 状 规则 、dashed 定义 虚线 规则 、 
solid 定义 实 线 规则 、double 定义 双 线 规则 。 

此 外 ,在 设置 列 与 列 之 间 的 样式 时 也 经 常用 到 column-gap 属性 ,column-gap 属性 规定 列 之 间 的 
间隔 ,如 果 列 之 间 设 置 了 column-rule, 它 会 在 间隔 中 间 显示 。column-gap 属性 的 语法 格式 如 下 。 


column - gap: length | normal 


其 中 ,属性 值 length 表示 把 列 间 的 间隔 设置 为 指定 的 长 度 , 例 如 50px; normal 规定 列 间 的 间隔 
为 一 个 常规 的 间隔 ,W3C 建议 的 值 是 lem。 
此 实例 的 源 文件 名 是 myHtmlB075. html。 


548 ”使 用 盒 布 局 解决 多 列 底部 不 能 对 齐 的 问题 


此 实例 主要 设置 容器 的 display 属性 为 box' 从 而 实现 使 用 盒 布 局 解决 多 列 底部 不 能 对 齐 的 问题 。 
当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 .3 列 的 高 度 原来 是 不 一 致 ( 即 根据 文本 内 容 的 大 小 来 显 
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示 列 的 高 度 ) 的 ,但 是 在 设置 容器 的 display 属性 为 box 后 3 列 的 高 度 与 最 长 列 的 高 度 一 致 ,如 图 548-1 所 
示 。 有 关 此 实例 的 主要 代码 如 下 。 











图 548-1 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
< style type = "text/css"> 
井 myYContainer{ display: — webkit— box; } 
#myLeft{width: 200px;padding: 10px; background— color: lightblue;} 
#myMiddle{ width: 150px; padding: 10px; background - color: lightpink; } 
#myRight{ width: 100px; padding: 10px; background - color: lightgreen; } 
#myLeft, #myMiddle, #myRight{ box- sizing: border ~ box; } 
h3{text -align: center; } 
</style></head> 
<body>< div id = "myContainer"> 
<div id= "myLeft"> <h3> 红 藉 香 残 玉 第 秋 </h3> <p> 红 和 藉 香 残 玉 纂 秋 。 轻 解 罗 党 , 独 上 兰 舟 。 云 中 谁 寄 锦 书 
来 , 雁 字 回 时 ,月 满 西 楼 。 花 自 飘 零 水 自流 。 一 种 相思 ,两 处 闲 愁 。 此 情 无 计 可 消除 , 才 下 眉头 , 却 上 心头 。</p> 
</div> 
<div id= "myMiddle"><h3> 寻 寻 更 更 </h3 ><p> 寻 寻 更 更, 冷 冷清 清 , 凌 凄惨 惨 戚 威 。 乍 暖 还 寒 时 候 , 最 难 将 
息 。 三 杯 两 蓄 淡 酒 , 怎 敌 他 、 晚 来 风 急 ? 雁 过 也 , 正 伤心 , 却 是 旧时 相识 。 满 地 黄花 堆积 。 惟 迟 损 , 如 今 有 谁 堪 摘 ? 
守 着 窗 儿 ,独自 怎 生得 黑 ?梧桐 更 兼 细 雨 ,到 黄昏 点 点 滴 滴 。 这 次 第 , 怎 一 个 愁 字 了 得 !</p></div> 
<div id= "myRight"><h3 > 春晚 </h3 ><p> 风 住 尘 香 花 已 尽 ,日 晚 倦 梳头 。 物 是 人 非 事 事 休 , 欲 语 泪 先 流 。 闻 说 
双 溪 春 尚好 ,也 拟 泛 轻舟 。 只 铠 双 溪 能 艇 舟 , 载 不 动 许多 悉 。</p> </div></div></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , display: -webkit-box 表示 将 对 象 作 
为 弹性 伸缩 盒 显示 。display 属性 的 语法 格式 如 下 。 
display:none | inline | block | list - item | inline- block | table | inline- table | table- caption | table— 
cell | table- row | table - row - group | table- column | table - column ~ group | table- footer - group | 
table - header ~ group | run- in | box | inline- box | flexbox | inline- flexbox | flex | inline- flex 
中 ,各 属性 值 的 说 明 如 下 。 
) none: 表示 隐藏 对 象 .与 visibility 属性 的 hidden 值 不 同 . 它 不 为 被 隐藏 的 对 象 保留 其 物理 空间 。 
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(2) inline: 指定 对 象 为 内 联 元 素 。 

(3) block: 指定 对 象 为 块 元 素 。 

(4) listritem: 指定 对 象 为 列表 项 目 。 

(5) inline-block: 指定 对 象 为 内 联 块 元 素 。 

(6) table: 指定 对 象 作为 块 元 素 级 的 表格 .类 同 于 html 标签 < table>。 

(7) inline-table: 指定 对 象 作为 内 联 元 素 级 的 表格 .类 同 于 html 标签 < table >。 
(8) table-caption: 指定 对 象 作为 表格 标题 ,类 同 于 html 标签 < caption >。 

(9) table-cell: 指定 对 象 作为 表格 单元 格 , 类 同 于 html 标签 < td >。 

0) table-row: 指定 对 象 作为 表格 行 , 类 同 于 html 标签 < tr >。 

1) table-row-group: 指定 对 象 作为 表格 行 组 ,类 同 于 html 标签 < tbody >。 

2) table-column: 指定 对 象 作为 表格 列 ,类 同 于 html 标签 < col >。 

3) table-column-group: 指定 对 象 作为 表格 列 组 显示 ,类 同 于 html 标签 < colgroup >。 
4) table-header-group: 指定 对 象 作为 表格 标题 组 ,类 同 于 html 标签 < thead >。 
5) table-footer-group: 指定 对 象 作为 表格 脚注 组 ,类 同 于 html 标签 < tfoot >。 
6) run-in: 根据 上 下 文 决定 对 象 是 内 联 对 象 还 是 块 级 对 象 。 

7) box: 将 对 象 作为 弹性 伸缩 盒 显示 。 

8) inline-box: 将 对 象 作 为 内 联 块 级 弹性 伸缩 盒 显 示 。 

9) flexbox: 将 对 象 作为 弹性 伸缩 盒 显 示 。 

(20) inline-flexbox: 将 对 象 作为 内 联 块 级 弹性 伸缩 盒 显 示 。 

(21) flex: 将 对 象 作为 弹性 伸缩 盒 显 示 。 

(22) inline-flex: 将 对 象 作为 内 联 块 级 弹性 伸缩 盒 显 示 。 

此 实例 的 源 文件 名 是 myHtmlB076. html。 


549 ”在 自 适 应 多 列 布局 中 决定 是 否 开启 新 列 


此 实例 主要 通过 设置 column-break-before 属性 值 实现 在 自 适应 的 多 列 布局 中 决定 是 否 开 启 新 
列 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 , 单 击 * 新 建 一 列 ? 按 钮 , 则 * 黄 锥 楼 "将 从 第 3 列 开始 
显示 ,如 图 549-1 所 示 ; 单 击 “ 接 续 前 列 ” 按 钮 . 则 “ 黄 稚 楼 ”将 在 第 2 列 的 尾部 开始 显示 ,如 图 549-2 所 
示 。 有 关 此 实例 的 主要 代码 如 下 。 
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HTML5+CSS3 炫 酷 应 用 实例 集锦 


<!doctype html ><html >< head><meta charset = "UTF — 8"> 
< script src= "js/jquery - 3.1.1.min. js"></script>< script language = "javascript"> 
$ (document). ready(function() { 
$ ("#myBtnAlways").click(function() { // 新 建 一 列 
$ ("#myNewColumn").css("column— break — before”, "always"); 
Ds; 


$ ("#myBtnAuto").click(function() { // 接 续 前 列 
$ ("#myNewColumn"). css("column— break- before"，"auto"); });}); 
</script > 


<style type= "text/css"> 
# myContainer {width: 420px; margin: 10px; background — color: # FFF; border: lpx solid #EEE; 
position: relative; box- shadow: 5px 5px 5px lpx #999, 0 0 40px rgba(0, 0, 0, 0.06) 
inset; border - radius: 5px;padding: 20px; text - align: center;} 
/* 设 置 3 列 , 以 黑色 虚线 分 隔 * / 
#myColumn { - webkit — column— count: 3; - webkit- column- rule— style: dotted; 
— webkit — column - rule 一 width: 2px; - webkit - column - rule— color: black;} 
body {background - color: lightgray;} 
input {width:100px} 
</style></head> 
<body>< div id = "myContainer"> 
<p>< input type = "button” value= "新 建 一 列 " id = "myBtnAlways"/> 
< input type = "button”value = "接续 前 列 ”id = "myBtnAuto"/></p> 
<div id= "myColumn"> 
<h3 > 长 恨 歌 节选 </h3 ><p> 回 头 下 望 人 赛 处 , 不 见长 安 见 尘 雾 。 惟 将 旧 物 表 深 情 , 钢 合 金 角 寄 将 去 。 乌 留 一 
股 合 一 扇 , 包 玖 黄金 合 分 铀 。 但 教 心 似 金 铀 坚 , 天 上 人 间 会 相 见 。 临 别 股 勤 重 寄 词 , 词 中 有 上 折 两 心 知 。 七 月 七 日 
长 生 殿 ,夜半 无 人 私语 时 。 在 天 愿 作 比翼 乌 , 在 地 愿 为 连理 枝 。 天 长 地 久 有 时 尽 , 此 恨 绵绵 无 绝 期 。</p> 
<h3 id= "myNewColumn"> 黄 锥 楼 </h3> <p> 昔 人 已 乘 黄 稚 去 ,此 地 空余 黄 稚 楼 。 黄 稚 一 去 不 复 返 , 白云 千 载 空 
悠悠 。 晴 川 历 历 汉 阳 树 , 芳 草 葵 复 鹦鹉 洲 。 日 草 乡 关 何 处 是 ?烟波 江上 使 人 愁 。</p></div></div></body> 
</html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 . $ ("#myNewColumn"). css("column- 
break-before" ，"always") 用 于 设置 当前 标题 “ 黄 锥 楼 ?在 新 的 一 列 中 显示 。 在 CSS3 中 ,column- 
break-before 属性 用 于 设置 或 检索 对 象 之 前 是 否 中 断 , 该 属性 的 语法 格式 如 下 。 


column - break - before:auto | always | avoid 


其 中 ,auto 表示 既 不 强迫 也 不 禁止 在 元 素 之 前 中 断 并 产生 新 列 ; always 表示 总 是 在 元 素 之 前 中 
断 并 产生 新 列 ; avoid 表示 避免 在 元 素 之 前 中 断 并 产生 新 列 。 
此 实例 的 源 文 件 名 是 myHtmlB084. html。 


550 ”在 自 适 应 多 列 布局 中 决定 是 否 强 制 开 启 新 列 


此 实例 主要 通过 设置 column-break-after 属性 值 实现 在 自 适应 的 多 列 布局 中 决定 后 续 内 容 是 否 
开启 新 列 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 , 单 击 “ 强 制 后 面 的 内 容 新 建 一 列 " 按 钮 , 则 
“ 丰 都 鬼城 "将 在 第 2 列 的 开始 位 置 显示 .如 图 550-1 所 示 ; 单 击 * 允 许 后 面 的 内 容 共存 一 列 ? 按 钮 , 则 
“ 丰 都 鬼城 "将 在 第 2 列 的 中 部 位 置 显示 ,与 “长 寿 湖 ” 的 简介 共存 一 列 ,如 图 550-2 所 示 。 有 关 此 实例 
的 主要 代码 如 下 。 
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<!doctype html >< html >< head >< meta charset = "UTF — 8"> 
<script src= "js/jquery -3.1.1.min. js"></script >< script language = "javascript"> 
$ (document). ready(function() { 


$ ("#myBtnAlways").click(function() { // 强 制 后 面 的 内 容 新 建 一 列 
$ ("p").css("column - break — after", "always"); }); 


$ ("#myBtnAuto").click(function() { // 允 许 后 面 的 内 容 共存 一 列 
$ ("p").css("column - break ~ after", "auto"); });}); 
</script> 


< style type = "text/css"> 
# myContainer {width: 420px;margin: 10px; background - color: # FFF; border: 1px solid # EEE; text — 
align: center; position: relative;border - radius: 5px;padding: 20px; box - shadow: 5px 
Spx 5px 1px #999,0 0 40px rgba(0, 0, 0, 0.06) inset; } 
##myColumn { — webkit ~ column— count: 3;} 
body {background - color: lightgray;} 
input {width: 195px; margin: 5px;} 
img {width: 125px;height: 80px;border — radius: 5px;} 
p {text - align: left; - webkit - column - break 一 after: always; 
background - color: lightcyan;border - radius: 3pxipadding: 5px;} 
</style></head> 
<body>< div id = "myContainer"> 
< input type= "button" value= "强制 后 面 的 内 容 新 建 一列 ”id = "myBtnAlways"/> 
< input type= "button”value= "人 允许 后 面 的 内 容 共 存 一 列 ”id = "myBtnAuto"/> 
<div id= "myColumn">< h3 > 长 寿 湖 </h3 >< img src= "img/B085A. jpg"/><p> 长 寿 湖 位 于 长 寿 区 东部 , 距 重庆 
市 区 128 千 米 ,为 20 世纪 50 年 代 拦 截 龙 溪 河 而 成 的 人 工 湖 , 因 地 处 长 寿 区 境内 而 得 名 。 长 寿 湖 坝 长 1014 米 ,高 
51 米 , 项 宽 8 米 ,湖水 面积 6000 公顷 。 一 般 水 深 15 米 , 最 深 处 50 米 。 湖 内 港 汉 纵 横 交 错 , 有 岛屿 200 多 个 ,是 
重庆 市 最 大 的 湖泊 旅游 风景 区 。</p> 
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<h3> 丰 都 鬼城 </h3 >< img src= " img/B085B. jpg"/><p> 丰 都 鬼城 旧名 时 都 鬼城 , 古 为 " 巴 子 别 都 ,东汉 和 帝 
永 元 二 年 置 县 , 距 今 已 有 近 2000 年 的 历史 ,位 于 重庆 市 下 游 丰 都 县 的 长 江北 岸 ,是 长 江 游轮 旅客 的 一 个 观光 胜地 。 
丰 都 鬼城 又 称 为 " 幽 都 "、" 鬼 国 京都 "" 中 国 神曲 之 乡 "。 鬼 城 以 各 种 阴 曹 地 府 的 建筑 和 造型 而 著名 。 鬼 城内 有 哼 
哈 祠 .天子 砍 , 奈 河 桥 、 黄 泉 路 、. 望 乡 台 ` 药 王 砍 等 多 座 表现 阴间 的 建筑 。</p></div></div></body></htm1> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,.$("p"). css("column-break- after"， 
"always") 用 于 设置 每 个 段落 (如 风景 区 简介 ) 后面 的 内 容 在 新 的 一 列 中 显示 。 在 CSS3 中 ,column- 
break-after 属性 用 于 设置 或 检索 对 象 之 后 是 否 中 断 , 该 属性 的 语法 格式 如 下 。 


column - break -after:auto | always | avoid 











其 中 ,auto 表示 既 不 强迫 也 不 禁止 在 元 素 之 后 中 断 并 产生 新 列 ; always 表示 总 是 在 元 素 之 后 中 
断 并 产生 新 列 ; avoid 表示 避免 在 元 素 之 后 中 断 并 产生 新 列 。 
此 实例 的 源 文件 名 是 myHtmlB085. html。 


551 ”使 用 随机 数 模拟 照片 墙 的 多 图 散 列 布局 


此 实例 主要 通过 使 用 Math. random() 酚 数 产 生 随 机 数 设置 图 像 的 坐标 、 转 角 、 索 引 等 参数 ,从 而 
实现 模拟 照片 墙 的 多 图 散 列 布局 效果 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,9 幅 图 像 的 散 
列 布局 效果 如 图 551-1 所 示 ; 重新 剧 新 当前 页 面 , 则 9 幅 图 像 的 散 列 布局 效果 如 图 551-2 所 示 , 即 每 次 
显示 页 面 时 9 幅 图 像 的 散 列 布局 都 各 不 相同 。 有 关 此 实例 的 主要 代码 如 下 。 
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<!doctype html >< html >< head ><meta charset = "UTF - 8"> 
< script src= "js/jquery - 3.1.1.min. js"></script>< script type = "text/javascript"> 
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$ (function(){ 

for(var i=1;i<10;i++){ 
var x= Math. floor(Math. random() * (document. body. scrollWidth - 170)); 
var y= Math. floor(Math. random() * (document. body. scrollHeight - 50)); 


var myIndex = Math. floor(Math. random() * 999); // 随 机 z- index 值 
var myDegree = Math. floor(Math. random( ) * 360); 
$ (".myBox").append("< img src ="'img/B333A" +i+".jpg' id='img" +i+"' 


style = 'top:"+ y+ "px; 
left:" +x+"px;z— index:" +myIndex+";— webkit— transform:rotate(" + myDegree + "deg)'/>"); } }); 
</script > 


<style type= "text/css"> 
. myBox img { position: absolute; width:120px; height:160px; 


border - radius: 5px; box - shadow: 2px 2px 5px black; } 
</style></head> 


<body>< div class = "myBox"></div></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,Math. random() 函 数 用 于 返回 0 和 1 
之 间 的 伪 随 机 数 ,因此 实例 通过 使 用 该 伪 随 机 数 乘 以 适当 的 系数 作为 图 像 的 坐标 、 转 角 、Z 轴 索 引 ; 


Math. floor( x) 函数 用 于 返回 小 于 等 于 数字 参数 的 最 大 整数 , 即 对 数字 进行 下 舍 入 ,例如 Math. floor 
(5. 99) 的 结果 是 5 而 不 是 6。 


此 实例 的 源 文件 名 是 myHtmlB333. html。 


552 ”使 用 随机 数 模拟 党 布 流风 格 的 多 图 布局 


此 实例 主要 通过 使 用 Math. random() 函 数 产生 随机 数 设置 图 像 的 高 度 , 从 而 实现 模拟 瀑布 流风 
格 对 多 幅 图 像 进行 布局 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,以 瀑布 流风 格 显示 的 多 幅 图 
像 如 图 552-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
< script src= "js/jquery - 3.1.1.min. js"></script>< script type = "text/javascript"> 
$ (function() {// 添 加 10 幅 图 像 ,并 用 随机 数 设置 图 像 高 度 
for (var i=0; i<10; it+)1{ 
$ (".myBox").append('<div class = "myImage”style = "height:'+ (Math.floor(Math. random() * 100)+ 
100) + 'px;"></div>'); }}); 
</script> 
<style type= "text/css"> 
.myBox { — webkit - column - width: 160px; -webkit - column - gap: lpx; } 
/* 设 置 图 像 盒 子 样式 * / 
div:not(. myBox) { — webkit - border - radius: 5px; background: 井 D9D9D9; border: # CCC lpx solid; 
display: inline— block; width: 157px; position: relative;} 
/* 设 置 图 像样 式 */ 
div. myImage { background - image: url("img/B3221. jpg"); 
background — size: 157px 100% ; } 
</style></head> 
<body>< div class = "myBox"></div></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,Math. random() 函 数 返回 0 和 1 之 
间 的 伪 随 机 数 ,因此 实例 通过 使 用 该 伪 随 机 数 乘 以 100 作为 图 像 高 度 的 波动 范围 ，Math. floor(x) 函 
数 返 回 小 于 等 于 数字 参数 的 最 大 整数 , 即 对 数字 进行 下 舍 入 ,例如 Math. floor(5. 99) 的 结果 是 5 而 不 
是 6。 

此 实例 的 源 文 件 名 是 myHtmlB323. html。 


553 ”通过 调整 列 宽 将 横向 文字 变 为 纵向 文字 


此 实例 主要 通过 设置 元 素 的 column-width 属性 实现 将 横向 排列 的 文字 改 为 纵向 排列 。 当 在 
Google Chrome 浏览 器 中 显示 该 页 面 时 , 单 击 * 沿 水 平方 向 排列 文字 ”按钮 , 则 下 面 的 文字 将 沿 着 水 平 
方向 排列 ,如 图 553-1 所 示 ; 单 击 * 沿 垂直 方向 排列 文字 ”按钮 , 则 下 面 的 文字 将 沿 着 垂直 方向 排列 ,如 
图 553-2 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 








DD myHemlB327 html x 
3 © Dfile///D/myWork/myHtmlB327. 它 
| 必 水 平方 向 排列 文字 








西 - 6 x 
DD myHtmlB327 html x 
人 3 © DO fle///D/myWorW/myHtmlB3271¢Y 三 
| 丑 水 平方 向 排列 文字 人 必 重 直方 向 排列 文字 














图 553-1 图 553-2 





第 6 部 分 布局 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<script src= "js/jquery- 3.1.1.min. js"></script >< script type = "text/javascript"> 
$ (function() { 
$ ("#myHorizontal").click(function() { // 沿 水 平方 向 排列 文字 
$ ("div. myBox").css(" — webkit ~ column — width", "initial"); 
Ds 


$ ("#myVertical"). click(function() { // 沿 垂直 方向 排列 文字 
$ ("div. myBox"). css(" ~ webkit - column — width"，"30px"); });}); 
</script> 


<style type= "text/css"> 
* { margin: 0; padding: 0;} 
. myBox { font — size: 18px;color: black; padding: 20px;box - shadow: 0 5px 5px darkgrey; border - radius: 
Spx; background - color: lightseagreen; margin: 5px;} 
button { width: 198px; margin: Spx;} 
</style></head> 
<body ><p><button id= "myHorizontal"> 沿 水 平方 向 排列 文字 </button> 
<button id= "myVertical"> 沿 垂直 方向 排列 文字 </button></p> 
<div class = "myBox"> 最 早 的 编程 语言 是 在 电脑 发 明之 后 产生 的 , 当时 是 用 来 控制 提花 织 布 机 及 自动 演奏 钢琴 
的 动作 。 在 电脑 领域 已 发 明了 上 千 不 同 的 编程 语言 ,而 且 每 年 仍 有 新 的 编程 语言 诞生 。 很 多 编程 语言 需要 用 指 


令 方 式 说 明 计算 的 程序 , 而 有 些 编程 语言 则 属于 声明 式 编程 , 说 明 需 要 的 结果 , 而 不 说 明 如 何 计算 。</div > 
</body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , $ ("div. myBox"). css ("-webkit- 
column-width"，"initial" ) 表 示 使 用 默认 值 设置 元 素 的 文字 列 宽 。 在 CSS 中 ,initial 关键 字 用 于 设置 
CSS 属性 为 它 的 默认 值 ,initial 关键 字 可 用 于 任何 HTML 元 素 上 的 任何 CSS 属性 。$ ("div. 
myBox"). css("-webkit-column-width","30px") 用 于 设置 元 素 的 文字 列 宽 为 30px。 

此 实例 的 源 文 件 名 是 myHtmlB327. html。 


中 J 


DO 
选择 器 


554 使 用 first-line 选择 器 定制 文本 的 首 行 样式 


此 实例 主要 通过 使 用 first-line 选择 器 实现 定制 文本 的 首 行 样式 。 当 在 Google Chrome 浏览 器 
中 显示 该 页 面 时 ,两 首 唐诗 的 首 行将 以 红色 粗 体 字 显示 ,如 图 554-1 所 示 。 有 关 此 实例 的 主要 代码 


如 下 。 








百 2 口 x 
[DD myHtmlB007 html 和 
全 3 CDfile//DVmyWworwmyHtmlt 安 | 三 


昨夜 星辰 昨夜 风 ， 来 去 空 言 去 绝 踪 ， 
月 斜 楼 上 五 更 钟 。 
Ey 二 


成 里 未 
春 酒 瞪 ， 蜡 归 半 答 金 翡翠 ， 
今 曹 射 覆 蜡 灯 红 。 户 束 微 度 颖 芙蓉 。 
唑 余 听 芯 应 官 去 ， 刘 郎 已 恨 各 山 远 ， 
走马 兰 台 类 转 秆 。 更 隔 逐 山 一 万 重 。 





图 554-1 


<! doctype html >< html >< head ><meta charset = "UTF - 8"> 
<style> 


/* 创建 有 阴影 的 盒子 * / 
div. myFrame{float:left; margin:5px; width:150px; padding:10px; border: 1px solid # BFBFBF; background 


— color:white; box - shadow :2px 2px 3px gray;} 
p:first - line{ color:red; font- size:18px; font - weight: bold;} 
</style></head> 
<body>< div class = "myFrame"> 
<P > 昨夜 星辰 昨夜 风 ,<br> 画 楼 西 畔 桂 堂 东 。< br > 身 无 彩 凤 双飞 翼 ,<br> 
心有灵犀 一 点 通 。<br> 隔 座 送 钩 春 酒 暖 ,< br> 今 曹 射 覆 螨 灯 红 。< br> 
显 余 听 鼓 应 官 去 ,<br> 走马 兰 台 类 转 蓬 。<br></p></div> 
<div class = "myFrame"> 
<p > 来 去 空 言 去 绝 踪 ,<br> 月 斜 楼 上 五 更 钟 。<br > 梦 为 远 别 啼 难 唤 ,<br > 
书 被 催 成 墨 未 浓 。<br> 螨 照 半 笼 金 翡翠,< br > 磨 委 微 度 乡 英 著 。< br> 
刘 郎 已 恨 鞍山 远 ,<br> 更 隔 茵 山 一 万 重 。< br></p></div></body></html> 
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上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 .p:first-line 是 一 个 伪 元 素 选择 器 。 
伪 元 素 选择 器 并 不 是 针对 真正 的 元 素 使 用 的 选择 器 ,而 是 针对 CSS 中 已 经 定义 的 伪 元 素 使 用 的 选择 
器 。 在 CSS 中 主要 有 4 个 伪 元 素 选 择 器 , 即 first-line 选择 器 first-letter 选择 器 、before 选择 器 ,after 
选择 器 。 选 择 器 的 使 用 方法 如 下 。 

选择 器 : 伪 元 素 { 属 性 : 值 } 

选择 器 也 可 以 与 类 配合 使 用 ,使 用 方法 如 下 。 

选择 器 .类 名 : 伪 元 素 { 属 性 : 值 } 

此 实例 的 源 文件 名 是 myHtmlB007. html。 


555 ”使 用 first-letter 选择 器 定制 文本 的 首 字样 式 


此 实例 主要 通过 使 用 first-letter 选择 器 实现 定制 文本 的 首 字样 式 。 当 在 Google Chrome 浏览 器 
中 显示 该 页 面 时 ,第 一 首 唐诗 的 首 字 将 以 红色 粗 体 字 显示 ,第 二 首 英文 诗 的 首 字 母 也 将 以 红色 粗 体 字 
显示 ,如 图 555-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
百 - oo x 


DD myHtmyB008 html x 
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上 昨 么 星 折 昨 夜 风 ， 画 楼 西 时 桂 堂 东 。 
, 心有灵犀 一 点 通 。 

卫 座 1 今 基 身 村 婧 林 红 - 

翌 余 听 鼓 应 官 去 ， 走 马兰 台 类 转 莉 , 


Whenever you need me, 1'11 be here. 
Whenever you re in trouble, 1’m 
always near. Whenever you feel alone, 
and you think everyone has given 
up. .Reach out for me, and I will 
give you my everlasting love 





图 555-1 


<!doctype html ><html >< head >< meta charset = "UTF - 8"> 
<style> 
div. myFrame{float :left; margin: 5px; width:300px; padding:10px; border: 1px solid # BFBFBF; background 
— color:white; box — shadow:2px 2px 3px gray;} 
p:first ~ letter{color:red;font — size:28px;font — weight: bold;} 
</style></head> 
<body><div class = "myFrame"> 
<p> 上 昨夜 星辰 昨夜 风 , 画 楼 西 畔 桂 堂 东 。<br> 身 无 彩 凤 双 飞 翼 , 心 有 灵犀 一 点 通 。< br> 
隔 座 送 钩 春 酒 暖 , 今 曹 射 覆 蜡 灯 红 。< br> 星人 余 听 鼓 应 官 去 ,走马 兰 台 类 转 莲 。<br> </p></div> 
<div class = "myFrame"> <p > Whenever you need me，I'11 be here. Whenever you're in trouble，I'm always 
near. Whenever you feel alone，and you think everyone has given up. . . Reach out for me, and I will give you my 
everlasting love </p></div> 
</body></html > 


HTML5+CSS3 炫 酷 应 用 实例 集锦 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 .p:firstletter 是 一 个 伪 元 素 选 择 器 。 
该 选择 器 的 主要 功能 是 设置 p 元 素 中 首 字母 的 样式 为 红色 、 粗 体 ,字体 尺寸 为 28px。 
此 实例 的 源 文件 名 是 myHtmlB008. html。 


556 ”使 用 before 选择 器 在 元 素 之 前 插 人 内 容 


此 实例 主要 通过 使 用 before 选择 器 和 after 选择 器 实现 在 1i 元 素 的 前 后 分 别 插入 新 内 容 。 当 在 
Google Chrome 浏览 器 中 显示 该 页 面 时 ,将 在 每 种 图 书 的 名 称 前 面 插入 皂 ”后 面 插入 “了 ,如 图 556-1 
所 示 。 有 关 此 实例 的 主要 代码 如 下 。 














本 和 口 x 
癌 myHeml8o09 html x\ 
“3 CC DfileV/DVmyWorwmyHtmlB00' 安 三 


10 月 份 新 上 榜 计算 机 图 书 


【JavaScript DON 编 程 艺 术 】 
【利用 Python 进行 数据 分 析 】 
【SRE，Google 运 维 解密 】 
【Head First 设 计 模式 】 
【深入 理解 Java 虚 拟 机 】 
【JavaScript 高 级 程序 设计 】 
【第 一 行 代 码 Android】 








图 556-1 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<style> 
div. myFrame {float: left; margin: 5px; width: 350px; padding: 15px; border: lpx solid #BFBEFBF; 
background - color: white; box - shadow: 2px 2px 3px gray;} 
1i {list— style— type: none;} 
li:before{content:"["; font - size:18px; color:red;} 
li:after{content:")"; font- size:18px; color:red;} 
</style></head> 
<body>< div class = "myFrame"><h3 > 10 月 份 新 上 榜 计算 机 图 书 </h3> 
<ul ><1i> JavaScript DOM 编程 艺术 </1i><1i> 利 用 Python 进行 数据 分 析 </1i> 
<1i> SRE: Google 运 维 解密 </1i><1i> Head First 设计 模式 </1i> 
<1i> 深 入 理解 Java 虚拟 机 </1i><1i> JavaScript 高 级 程序 设计 </1i> 
<1i> 第 一 行 代码 Android </1i></ul></div></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,li:before 是 一 个 伪 元 素 选择 器 ,该 选 
择 器 用 于 在 li 元 素 之 前 插入 一 些 内 容 , 此 内 容 除了 文本 以 外 也 可 以 是 图 片 等 其 他 内 容 , 如 果 将 实例 中 
的 li: before{content:"【";font-size: 18px; color: red;) 修 改 为 li: before {content: url(img/B005A. 
jpg) ;) , 则 将 在 每 种 书 名 的 前 面 显 示 图 像 。li:after 也 是 一 个 伪 元 素 选择 器 ,该 选择 器 用 于 在 li 元 素 之 
后 插入 一 些 内 容 ,此 内 容 除了 文本 以 外 也 可 以 是 图 像 等 其 他 内 容 , 例 如 li:after{content: url(img/ 
B005B. jpg); }。 

此 实例 的 源 文件 名 是 myHtmlB009. html。 








第 7 部 分 将 《63》 


557 ”使 用 before 选择 器 在 页 面 顶端 添加 阴影 


此 实例 主要 通过 在 before 选择 器 中 设置 -webkit-box-shadow 属性 实现 在 页 面 顶端 添加 阴影 。> 
在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,在 页 面 的 顶端 将 显示 10px 高 的 阴影 ,如 图 557-1 所 示 。 
有 关 此 实例 的 主要 代码 如 下 。 








D myHemls217 html x 
全 3 © Dfile///D/myWork/myHtmlB 广 





图 557-1 


<! doctype html >< html >< head >< meta charset = "UTF - 8"> 
< style type = "text/css"> 
body:before { content: ""; position: fixed; top: ~ 10px; left: Opx; width: 100%; height: 10px; — 
webkit - box - shadow: Opx Opx 10px rgba(0,0,0, 0.8); z - index: 999;} 
html { background— color: white; } 
</style></head> 
<body ></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,body:before 用 于 设置 在 页 面前 显示 
的 内 容 ( 此 实例 即 为 阴影 ), 常 用 来 和 content 属性 一 起 使 用 ,并且 必须 定义 content 属性 值 。content 
属性 用 于 插入 生成 内 容 ,该 属性 与 before 选择 器 及 after 选择 器 配合 使 用 ,将 生成 内 容 放 在 一 个 元 素 
内 容 的 前 面 或 后 面 。content 属性 的 语法 格式 如 下 。 


content:normal | string | attr() | uri() | counter() 


其 中 ,normal 是 默认 值 ; string 表示 插入 文本 内 容 ; attr( ) 表 示 插 入 元 素 的 属性 值 ; uri() 表 示 插 
和 人 一 个 外 部 资源 (如 图 像 、 声 频 、 视 频 或 浏览 器 支持 的 其 他 任何 资源 ); counter() 表 示 一 个 计数 器 ,用 
于 插入 排序 标识 。 

-webkit-box-shadow: 0px 0px 10px rgba(0,0,0, 0. 8) 用 于 创建 高 度 为 10px、 透 明度 为 0.8 的 
明 影 。 

此 实例 的 源 文件 名 是 myHtmlB217. html。 


558 ”使 用 before 选择 器 创建 图 文 并 列 的 按钮 


此 实例 主要 通过 使 用 before 选择 器 在 按钮 文本 左边 插入 图 像 , 从 而 实现 创建 图 像 和 文本 并 列 显 
示 的 按钮 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,使 用 before 选择 器 创建 的 图 像 和 文本 并 列 
按钮 的 效果 如 图 558-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 








<!doctype html >< html >< head >< meta charset = "UTF — 8"> 
<style type= "text/css"> 
body { font: 15px/1.3 'Raleway', sans— serif; color: #5E5B64; padding— bottom: 120px; text - align: 
center; } 


HTML5+CSS3 炫 酷 应 用 实例 集锦 


ay a:visited { outline: none; color:black; } 
a:hover { text - decoration: none; } /* 取 消 下 夯 线 x*/ 
.myButton { display: inline- block; font — size: 18px; color: black; text - decoration: none ! important; 
box - shadow: 0 5px 5px #0CCC; padding: 10px 30px; border - radius: 10px;background — image: 
一 webkit - linear - gradient (top, snow, red); margin: 5px; width:250px;} /x* 设置 按钮 基 
本 样式 * / 
. myButton: before { display: inline - block; content: ""; margin - right: 15px; background - position: 
center; background— repeat: no - repeat; background - image: url("img/B324. png "); 
width:16px; height:16px;} /V* 设置 按钮 左边 的 图 像样 式 * / 





</style></head> 
<body><a href ="# "class= "myButton"> 华 西 包装 集团 公司 </a><br> 
<a href =" 间 "class = "myButton"> 兴 业 投 资 集团 公司 </a><br> 
<a href = " 井 " class = "myButton"> 重 庆 市 国有 资产 管理 委员 会 </a><br> 
<a href = "http://www.cq. gov. cn” class = "myButton"> 重 庆 市 政府 网 </a><br> 
</body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,before 选择 器 用 于 在 被 选 元 素 的 内 
容 前 面 插入 内 容 ,myButton:before{ } 即 在 按钮 文本 的 前 面 插入 内 容 ( 图 像 )。 如 果 需 要 在 按钮 文本 的 
后 面 插入 内 容 ( 图 像 ), 则 应 该 使 用 after 选择 器 。 

此 实例 的 源 文件 名 是 myHtmlB324. html。 





百 pa 口 x 
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图 558-1 


559 ”使 用 after 选择 器 创建 箭头 风格 的 提示 框 


此 实例 主要 通过 在 after 选择 器 中 以 切 分 边框 线 的 策略 切 出 一 个 三 角形 作为 指示 箭头 ,从 而 实现 
创建 箭头 风格 的 提示 框 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 , 带 三 角形 箭头 提示 框 的 显示 
效果 如 图 559-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 





<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<style type= "text/css"> 
x { margin: Opx; padding: Opx;} 
.myTips { position: absolute; top: 50px; left: 50% ;transform: translate( — 50%, — 50% );background 
— color:1ightgreen; border - radius: Spx; width: 400px; padding: 10px; text - align: left; 
font - size: 14px; } /* 设 置 提示 框 的 圆 角 和 矩形 * / 
/=* 在 圆 角 矩形 的 下 面 添加 三 角形 ( 即 指示 箭头 ) * / 
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. myTips: after { content: ''; position: absolute; bottom: 0; left: 50%; border: 20px solid 
transparent; border - top - color: lightgreen; border - bottom: 0; border - left: 0; 
margin: 0 0 — 20px — 10px; } 

.myBox{ margin: 105px auto 10px; width: 420px; height: 250px; border — radius: Spx; 

box - shadow: 2px 2px 8px black; } 
img{ width: 420px; height: 250px; border — radius: 5px; } 
</style></head > 
<body ><div class = "myTips"> 香 港 是 全 球 高 度 繁荣 的 国际 大 都 会 之 一 , 全 境 由 香港 岛 .九龙 半岛 .新 界 等 3 大 
区 域 组 成 。 管 辖 陆地 总 面积 1104. 32 平方 公里 ,截至 2014 年 末 , 总 人 口 约 726.4 万 人 ,人 口 密度 居 全 球 界 第 三 。 
</div> 
<div class= "myBox">< img src= "img/B266C. jpg"></div></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 myTips:after 用 于 在 myTips 中 插 
入 指定 的 内 容 (三 角形 )。 在 CSS3 中 after 选择 器 用 于 在 被 选 元 素 的 内 容 后 面 插入 内 容 ,内 容 通常 放 
在 content 属性 中 。 在 此 实例 中 ,由 于 只 需要 插入 部 分 三 角形 ,因此 content 属性 为 空白 。 

此 实例 的 源 文件 名 是 myHtmlB269. html。 
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和 和 
ED 





560 ”使 用 focus 选择 器 设置 焦点 文本 框 的 边框 线 


此 实例 主要 通过 在 focus 选择 器 中 设置 outline-color 属性 实现 焦点 文本 框 显示 红色 的 边框 线 以 
区 别 普通 文本 框 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,如 果 “ 用 户 名 称 : "文本 框 获 得 焦点 ， 
则 其 边框 线 显示 红色 ,如 图 560-1 所 示 ; 如 果 “ 联 系 电话 :" 文 本 框 获得 焦点 , 则 其 边框 线 也 将 显示 红 
色 , 如 图 560-2 所 示 ; 如 果 “ 用 户 密码 : "文本 框 获 得 焦点 , 则 其 边框 线 仍 将 显示 红色 。 有 关 此 实例 的 主 
要 代码 如 下 。 





<! doctype html >< html >< head>< meta charset = UIF - 8> 
< style type = "text/css"> 
input {width: 200px;} 
input:focus { outline - color: red;} /* 设 置 焦 点 文本 框 的 边框 线 为 红色 x*/ 
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</style></head> 

<body>< center ><formaction="" method= "post"><br> 
<label id= "myUser"> 用 户 名 称 :< input type= "text"></label ><br><br> 
<jlabel id = "myPassword"> 用 户 密码 :< input type = "text"></label><br><br> 
< label id = "myPhone"> 联 系 电话 :< input type = "text"></label> 

</form></center ></body></html> 








百 = 口 x 百 = 口 x 


DD myHtmle218 html x D myHemlB218 html x\ 
5 3 © Dfie///D/myWork/myHtml 安 5 3 CC Dfie///D/myWork/myHtmlsY 三 


用 户 名 称 L |] 用 户 名 称 :| 
用 户 密码 :| ] 用 户 密码 :| 
联系 电话 :| 联系 电话 |] 








图 560-1 图 560-2 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,input:focus 选择 器 用 于 选取 获得 焦 
点 的 文本 框 ; outline-color:red 用 于 设置 文本 框 的 边框 线 为 红色 。 在 CSS 中 ,outline-color 属性 用 于 
设置 元 素 轮廓 的 颜色 ,该 属性 支持 的 属性 值 的 意义 如 下 。 

(1) color_name: 该 属性 值 规定 颜色 值 为 颜色 名 称 的 轮廓 颜色 (例如 red) 。 

(2) hex_number: 该 属性 值 规定 颜色 值 为 十 六 进 制 值 的 轮廓 颜色 (例如 # FF0000)。 

(3) rgb_number: 该 属性 值 规定 颜色 值 为 rgb 代码 的 轮廓 颜色 (例如 rgb(255,0,0)) 。 

(4) invert: 该 属性 值 是 默认 值 ,执行 颜色 反 转 (逆向 的 颜色 ) ,可 使 轮廓 在 不 同 的 背景 颜色 中 都 可 见 。 

outline-width 属性 设置 元 素 整个 轮廓 的 宽度 ,只 有 当 轮 廓 样式 不 是 none 时 这 个 宽度 才 会 起 作 
用 ,如 果 样 式 为 none, 宽 度 实际 上 会 重 置 为 0。outline-width 属性 支持 的 属性 值 的 意义 如 下 。 

(1) thin: 该 属性 值 规定 细 轮 廓 。 

(2) medium: 该 属性 值 是 默认 值 ,规定 中 等 的 轮廓 。 

(3) thick: 该 属性 值 规定 粗 轮廓 。 

(4) length: 该 属性 值 允许 规定 轮廓 粗细 值 。 

outline-style 属性 用 于 设置 元 素 的 整个 轮廓 样式 ,样式 不 能 是 none, 否则 轮廓 不 会 出 现 。outline- 
style 属性 支持 的 属性 值 如 表 560-1 所 示 。 


表 560-1 ”outline-style 属性 支持 的 属性 值 





属 性 值 意 义 
none 默认 ,定义 无 轮廓 
dotted 定义 点 状 的 轮廓 
dashed 定义 虚线 轮廓 
solid 定义 实 线 轮廓 
double 定义 双 线 轮廓 , 双 线 的 宽度 等 同 于 outline -width 的 值 
groove 定义 3D 止 模 轮廓 .此 效果 取决 于 outline-color 值 
ridge 定义 3D 凸 槽 轮廓 ,此 效果 取决 于 outline-color 值 
inset 定义 3D 凹 边 轮廓 ,此 效果 取决 于 outline-color 值 
Outset 定义 3D 凸 边 轮廓 ,此 效果 取决 于 outline-color 值 


inherit 规定 应 该 从 父 元 素 继承 轮廓 样式 的 设置 
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实际 上 ,outline-color、outline-width、outline-style 这 3 个 属性 的 属性 值 可 以 合并 到 outline 属性 
中 ,例如 outline:red solid medium 。 
此 实例 的 源 文件 名 是 myHtmlB218. html。 


561 ”使 用 selection 选择 器 突出 显示 选中 文本 


此 实例 主要 通过 在 selection 选择 器 中 定制 阴影 文字 样式 实现 以 3D 阴影 效果 显示 选中 的 文本 。 
当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 .使 用 鼠标 选中 的 文本 “ 花 秋月 何 ” 的 3D 阴影 显示 效果 如 
图 561-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 





<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
< style type = "text/css"> 
p{ font: bold 60px/100 $% "微软 雅 黑 "，"Lucida Grande"，"Lucida Sans", Helvetica, Arial, Sans; } 


/* 设 置 选中 文本 的 样式 * / 
p::selection {text— shadow: — lpx 一 1px0 #FFF, lpx lpx 0 #333, lpx lpx 0 #444; 
background - color: lightgray;} /* 创建 阴影 文字 * / 
body { background - color: gray; } /* 设置 灰色 背景 * / 
</style></head> 


<body > <center ><p> 春 花 秋月 何 时 了 </p></center ></body ></html > 





上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 百 一 5 


分 代码 中 , selection 选择 器 用 于 定义 用 户 的 鼠标 已 选 |/ Dmmea9hml x 
CD fileyVDymyworlvmyHtmlB239html 字 三 


择 文本 的 样式 ,在 此 选择 器 中 能 够 设置 的 属性 相当 有 
限 ,大 多 数 CSS 样式 属性 设置 以 后 都 不 起 作用 .但 此 
实例 设置 的 text-shadow 属性 已 经 测试 通过 。 在 CSS3 
中 ,text-shadow 属性 支持 给 文字 加 上 阴影 ,从 而 增加 
文字 的 质感 而 不 用 使 用 任何 图 片 ,text-shadow 属性 的 
语法 格式 如 下 。 





561-1 
text - shadow:color length length length 图 5 


其 中 ,color 表示 颜色 ; length 分 别 按 顺 序 指 “X 轴 方 向 长 度 Y 轴 方向 长 度 阴影 模糊 半径 ”, 正 值 
在 X 轴 表示 向 右 , 负 值 表示 向 左 , 同 样 的 道理 ,Y 轴 负 值 表示 向 上 。 其 中 任意 一 个 值 可 以 为 零 也 可 为 
空 (将 做 默认 处 理 ) 。 

此 实例 的 源 文件 名 是 myHtmlB239. html。 


562 ”使 用 hover 选择 器 定制 选中 元 素 的 样式 


此 实例 主要 通过 使 用 hover 选择 器 实现 定制 当前 图 像 的 选中 样式 。 当 在 Google Chrome 浏览 器 
中 显示 该 页 面 时 ,如 果 上 鼠标 指针 悬浮 在 第 二 幅 图 像 上 , 则 该 图 像 的 背后 将 出 现 阴 影 ,如 图 562-1 所 示 ; 
如 果 鼠 标 指针 悬浮 在 第 三 幅 图 像 上 , 则 该 图 像 的 背后 也 将 出 现 阴影 ,如 图 562-2 所 示 。 有 关 此 实例 的 
主要 代码 如 下 。 





<!doctype html >< html >< head >< meta charset = "UTF — 8"> 
< style type= "text/css"> 
img :hover{box — shadow:5px 5px 2px gray; cursor:pointer;} 
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img{ margin:5px; border - radius:10px; width: 100px;height :150px;} 
</style></head> 


<body>< div>< img src = "img/B012A. jpg"/>< img src = "img/BO12B. jpg"/> 
< img src = "img/B012C. jpg"/></div ></body ></html1 > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,hover 选择 器 主要 用 于 当 页 面 中 的 
img 元 素 处 于 hover 状态 时 设置 其 背景 为 阴影 并 且 和 鼠标 指针 呈现 手指 形状 ,常用 的 选择 器 有 下: 


hover,E:active\E:focus\E:enabled\E:disabled,\E:read-only\E:read-write\E: checked,E: selection、 





E:default\E:indeterminate,\E:invalid\E:valid\E:required\E:optional\E:in-range\E:out-of-range。 


此 实例 的 源 文件 名 是 myHtmlB022. html。 
百 - oo 


人 
[DD myHtmlB022 html x 





口 myHtml8o22 html X 


GDfileyV/DymyworwmyHtn 立 
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563 ”使 用 empty 选择 器 定制 元 素 内 容 空白 时 的 样式 


此 实例 主要 通过 使 用 empty 选择 器 实现 定制 元 素 内 容 空白 时 的 样式 。 当 在 Google Chrome 浏览 
器 中 显示 该 页 面 时 必 原 产地 ?空白 的 两 个 单元 格 的 背景 颜色 被 设置 为 天 蓝 色 ,如 图 563-1 所 示 。 有 关 
此 实例 的 3 





E 要 代码 如 下 。 





DY myHtmlBoloheml x 


© Dfile///D/myWork/myHtmlB01C 字 三 























<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<style> 
table { margin: 0 auto;width: 400px; font - size: 14px; 


border - collapse: collapse;text - align: center;} 
:empty {background ~ color: lightblue;} 
</style></head> 


<body>< div style = "width:400px"><table id= "mytable" border = "1" > 
<tr style = "background - color: lightgray; font - size: 16px;"> 
< td> 葡 葡 酒 名 称 </td>< td> 原 产地 </td><td> 葡 萄 品种 </td></tr> 
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<tr><td> 罗 博克 葡萄 酒 </td><td></td><td> 歌 海 娜 </td></tr> 

<tr><td> 科 洛 文 红 葡萄 酒 </td><td> 法 国 </td><td> 丹 魄 </td></tr> 

<tr><td> 马 蒂 尔 伯 盏 葡萄 酒 </td><td></td><td> 朗 布 罗斯 科 </td></tr></table></div> 
</body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,empty 选择 器 的 主要 作用 就 是 当 单 
元 格 的 内 容 空白 时 设置 其 背景 为 天 蓝 色 。 
此 实例 的 源 文件 名 是 myHtmlB010. html。 


564 ”使 用 not 选择 器 自 定 义 子 结构 元 素 的 样式 


此 实例 主要 通过 使 用 not 选择 器 实现 对 某 个 结构 元 素 使 用 样式 ,但 是 排除 这 个 结构 元 素 (div) 下 面 的 
子 结构 元 素 (p) 使 用 该 样式 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,(div) 唐 诗 的 标题 采用 大 字体 、 
黑色 显示 ,其 下 的 内 容 (p) 使 用 小 字体 、 绿 色 显 示 , 如 图 564-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 


百 = 口 x 








DD myHtmlB011html x 
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锦 瑟 
多 5 无 六 十 弦 ， 一 弦 一 柱 四 华 年。 
计生 晓 殷 于 地 坚 ， 户 这 春心 插 社 光 。 


论 海 月 明 球 有 泪 ， 苦 田 日 咕 玉 生 烟 。 
此 情 可 待 成 记忆 ， 只 是 当时 已 届 状 。 





图 564-1 


<! doctype html >< html >< head >< meta charset = "UTF - 8"> 
<style> 
div. myFrame { float: left;margin - left: 30px; width: 300px;padding: 10px; border: 1px solid # BFBFBF; 
background - color: white; box— shadow: 2px 2px 3px gray; text - align: center; font ~ size: 24px; font 一 
weight: bold; } /* 创建 有 阴影 的 盒子 * / 
body * :not(div) {color: green; font ~ size: 14px;} 
</style></head> 
<body >< div class = "myFrame"> 锦 瑟 
<p> 锦 瑟 无 端 五 十 弦 , 一 弦 一 柱 思 华 年 。</p><p> 庄 生 晓 梦 迷 蝴 蝶 , 望 帝 春 心 托 杜 鹏 。</p> 
<p> 沧 海 月 明珠 有 泪 , 蓝 田 日 暖 玉生 烟 。</p><p> 此 情 可 待 成 追忆 ,只 是 当时 已 位 然 。</p> </div></body > 
</html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,not(div) 选 择 器 的 主要 作用 是 设置 


div 下 面 的 p 元 素 的 字体 大 小 为 14px、 字 体 颜色 为 绿色 。 
此 实例 的 源 文件 名 是 myHtmlB011. html。 


565 ”使 用 only-child 选择 器 定制 唯一 子 元 素 


此 实例 主要 通过 使 用 only-child 选择 器 定制 在 元 素 中 只 有 一 个 子 元 素 的 样式 。 当 在 Google 
Chrome 浏览 器 中 显示 该 页 面 时 ,在 3 组 榜 单 中 只 有 一 本 图 书 的 榜 单 书 名 以 定制 的 隶书 和 浅 蓝 色 背景 
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显示 ,其 他 两 个 榜 单 的 书 名 以 正常 样式 显示 ,如 图 565-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
-oo x 

















癌 myHtmlB021 html x\ 
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12 月 份 新 上 榜 科 普 图 书 


科学 的 旅程 
无 言 的 宇宙 ， 隐 藏 在 24 个 数学 公式 背后 的 故事 
中 国 国家 地 理 百 科 全 书 


12 月 份 新 上 榜 计 算 机 图 书 


JapaSenipt 权 大 拒 南 (第 
12 月 份 新 上 榜 经 管 图 书 


移动 互联 网 思维 
移动 互联 网 时 代 的 新 4 法 则 








图 565-1 


<!doctype html >< html><head><meta charset = "UTF - 8"> 
< style type = "text/css"> 
pionly- child{ background ~ color: lightblue; border - radius:5px; 
font - weight: bold;font - family: 华文 隶书 ; } 
p{padding - left: 8px;width:340px ; margin:10px ;} 
</style></head> 
<body><h3>12 月 份 新 上 榜 科 普 图 书 </h3>< div><p> 科 学 的 旅程 /p> <p> 无 言 的 宇宙 : 隐藏 在 24 个 数学 公 
式 背 后 的 故事 </p><p> 中 国 国家 地 理 百科 全 书 </p></div> 
<h3>12 月 份 新 上 榜 计算 机 图 书 </h3 ><div><p>JavaScript 权威 指南 (第 6 版 )</p></div> 
<h3>12 月份 新 上 榜 经 管 图 书 </h3>< div><p> 移 动 互联 网 思维 </p><p> 移 动 互联 网 时 代 的 新 4C 法 则 </p> 
</div></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,p:only-child 选择 器 用 于 设置 元 素 中 
符合 要 求 的 唯一 子 元 素 以 隶书 字体 和 浅 蓝 色 背 景 显示 。 
此 实例 的 源 文件 名 是 myHtmlB021. html。 


566 ”使 用 first-child 选择 器 定制 开始 子 元 素 


此 实例 主要 通过 使 用 first-child 选择 器 定制 列表 中 的 第 一 个 子 元 素 的 样式 。 当 在 Google 
Chrome 浏览 器 中 显示 该 页 面 时 ,5 本 图 书 的 第 1 本 图 书 将 以 定制 的 灰色 背景 显示 ,如 图 566-1 所 示 。 
有 关 此 实例 的 主要 代码 如 下 。 


<!doctype html ><html >< head >< meta charset = "UTF - 8"> 
<style type= "text/css"> 
li:first ~ child{background - color: lightgray; border - radius:5px;} 
1liflist - style— type: none;padding— left: 8px;width:340px ;margin:10px ;} 
</style></head> 
<body><h2>12 月 份 新 上 榜 科技 图 书 </h2> 
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<ul><1i> 科 学 的 旅程 </1i> 
<1i> 万 物 解释 者 : 复杂 事物 的 极 简 说 明 书 </1i> 
<1i> 地 球 与 太空 : 美国 宇航 局 NASA 珍贵 摄影 集 </1i> 
<1i> 迷 人 的 数学 : 315 个 烧 脑 游 戏 玩 通 数学 史 </1i> 
<1i> 无 言 的 宇宙 : 隐藏 在 24 个 数学 公式 背后 的 故事 </1i></ul ></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,li; first-child 选择 器 用 于 设置 列表 中 
第 一 个 列表 项 目的 背景 为 浅 灰 色 , 并 且 圆 角 。 此 前 如 果 需 要 对 列表 中 的 第 一 个 列表 项 目 指定 不 同 的 
背景 色 , 采 用 的 做 法 是 直接 给 第 一 个 列表 项 目 设 置 class 属性 ,然后 通过 class 属性 定制 样式 。 

此 实例 的 源 文 件 名 是 myHtmlB013. html。 





百 - oo x 


DD myHtmlB013 html x\ 





二 3 CC Dfile///D/myWork/myHtmlB013.4 窑 | 三 


12 月 份 新 上 榜 科 技 图 书 


科学 的 旅程 
万 物 解 释 者 ,复杂 事物 的 极 简 说 明 书 


地 球 与 太 宁 ， 美 国 宇航 局 NASA 了 贵 摄 及 和 集 
迷人 的 数学 ，315 个 烧 脑 游戏 玩 通 数学 史 
无 言 的 宇宙 ， 隐 藏 在 24 个 数学 公式 背后 的 故事 





图 566-1 


567 ”使 用 last-child 选择 器 定制 末尾 子 元 素 


此 实例 主要 通过 使 用 last-child 选择 器 定制 列表 中 的 最 后 一 个 子 元 素 的 样式 。 当 在 Google 


Chrome 浏览 器 中 显示 该 页 面 时 ,最 后 一 本 图 书 的 名 称 将 以 定制 的 灰色 背景 显示 ,如 图 567-1 所 示 。 
有 关 此 实例 的 主要 代码 如 下 。 





D myHtmlB014html x\ 
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12 月 份 新 上 榜 科 技 图 书 





科学 的 旅程 


万 物 解释 者 ， 复 杂事 物 的 极 简 说 明 书 

地 球 与 太 宁 ， 美国 宇航 局 NASA 珍 贵 所 影集 
迷人 的 数学 ，315 个 烧 脑 游戏 玩 通 数学 史 

无 言 的 宇宙 ， 隐藏 在 24 个 数学 公式 背后 的 故事 





图 567-1 


<!doctype html >< html >< head>< meta charset = "UTF - 8"> 
< style type = "text/css"> 


1li:last - childfbackground- color: lightgray;border — radius:5px;} 
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1liflist - style- type: none;padding- left: 8px;width:340px ;margin:10px ;} 
</style></head> 
<body><h2>12 月 份 新 上 榜 科 技 图 书 </h2 > 
<ul><1i> 科 学 的 旅程 </1i> 
<1i> 万 物 解释 者 : 复杂 事物 的 极 简 说 明 书 </1i> 
<1i> 地 球 与 太空 : 美国 宇航 局 NASA 珍贵 摄影 集 </1i> 
<1i> 迷 人 的 数学 : 315 个 烧 脑 游戏 玩 通 数学 史 </1i> 
<1i> 无 言 的 宇宙 : 隐藏 在 24 个 数学 公式 背后 的 故事 </1i></ul ></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,li: last-child 选择 器 用 于 设置 列表 中 
最 后 一 个 列表 项 目的 背景 为 浅 灰 色 , 并 且 圆 角 。 此 前 如 果 需 要 对 列表 中 的 最 后 一 个 列表 项 目 指定 不 
同 的 背景 色 ,采用 的 做 法 是 直接 给 有 关 的 列表 项 目 设 置 class 属性 ,然后 通过 class 属性 定制 样式 。 

此 实例 的 源 文 件 名 是 myHtmlB014. html。 


568 ”使 用 nth-child 选择 器 定制 指定 序号 元 素 


此 实例 主要 通过 使 用 nth-child 选择 器 定制 列表 中 指定 序号 的 子 元 素 的 样式 。 当 在 Google 
Chrome 浏览 器 中 显示 该 页 面 时 ,第 二 本 图 书 的 名 称 将 以 定制 的 灰色 背景 显示 ,如 图 568-1 所 示 。 有 
关 此 实例 的 主要 代码 如 下 。 








DD myHtmlso15 heml 和 
全 3 © Dfile///D/myWork/myHtmlB015.4Y?| 三 


12 月 份 新 上 榜 科技 图 书 


科学 的 旅程 

万 物 解释 者 ， 复 杂事 物 的 极 而 说 明 书 

地 球 与 太 宁 ， 美国 宇航 局 NASA 珍 贵 摄影 集 
迷人 的 数学 ，315 个 烧 脑 游戏 玩 通 数学 史 
无 言 的 宇宙 隐藏 在 24 个 数学 公式 背后 的 故事 





图 568-1 


<!doctype html >< html >< head><meta charset = "UTF ~ 8"> 
< style type = "text/css"> 
li:nth- child(2){background ~ color: lightgray; border— radius:5px;} 
li{list - style— type: none;padding — left: 8px; 
width: 340px; margin:10px ;} 
</style></head> 
<body><h2>12 月份 新 上 榜 科 技 图 书 </h2 > 
<ul><1i> 科 学 的 旅程 </1i> 
<1i> 万 物 解 释 者 : 复杂 事物 的 极 简 说 明 书 </1i> 
<1i> 地 球 与 太空 : 美国 宇航 局 NASA 珍贵 摄影 集 </1i> 
<1i> 迷 人 的 数学 : 315 个 烧 脑 游戏 玩 通 数学 史 </1i> 
<1i> 无 言 的 宇宙 : 隐藏 在 24 个 数学 公式 背后 的 故事 </1i></ul></body></html1> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,li:nth-child(2) 选 择 器 用 于 设置 列表 
中 第 二 个 列表 项 目的 背景 为 浅 灰 色 ,并 且 圆 角 。 注 意 ,li:nth-child(2) 的 2 表示 按照 默认 的 顺序 顺 数 
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第 二 个 子 元 素 ,li:nth-lastrchild(2) 的 2 表示 按照 默认 的 顺序 倒数 第 二 个 子 元 素 , 这 两 个 选择 器 的 计数 
基准 完全 不 同 , 因 此 指向 的 是 不 同 的 子 元 素 。 
此 实例 的 源 文件 名 是 myHtmlB015. html。 


569 ”使 用 nth-last-child 选择 器 定制 倒数 元 素 


此 实例 主要 通过 使 用 nth-last-child 选择 器 定制 列表 中 倒数 指定 序号 的 子 元 素 的 样式 。 当 在 
Google Chrome 浏览 器 中 显示 该 页 面 时 ,倒数 第 二 本 图 书 的 名 称 将 以 定制 的 灰色 背景 显示 ,如 图 569-1 所 
示 。 有 关 此 实例 的 主要 代码 如 下 。 











| - 


[DD myHemlB016 heml x 





‘ 3 © Dfie///D/myWor/myHtmlB0161 字 | 三 


12 月 份 新 上 榜 科技 图 书 
科学 的 旅程 
万 物 解 释 者 ， 复 杂事 物 的 极 阐 说 明 书 
地 球 与 太 宁 ， 美 国 宇航 局 NASA 珍 贵 摄影 集 
未 人 的 数学 ，315 个 境 脑 游戏 玩 通 歼 学 史 
无 言 的 宇宙 ， 隐 藏 在 24 个 数学 公式 背后 的 故事 








图 569-1 


<! doctype html >< html >< head >< meta charset = "UTF - 8"> 
< style type = "text/css"> 
li:nth- last ~ child(2){ background — color: lightgray;border - radius: 5px;} 
1i{ list— style— type: none;padding — left: 8px; width:340px;margin:10px ;} 
</style></head> 
<body><h2>12 月 份 新 上 榜 科 技 图 书 </h2> 
<ul><1i> 科 学 的 旅程 </1i> 
<1i> 万 物 解 释 者 : 复杂 事物 的 极 简 说 明 书 </1i> 
<1i> 地 球 与 太空 : 美国 宇航 局 NASA 珍贵 摄影 集 </1i> 
<1i> 迷 人 的 数学 : 315 个 烧 脑 游戏 玩 通 数学 史 </1i> 
<1i> 无 言 的 宇宙 : 隐藏 在 24 个 数学 公式 背后 的 故事 </1i></ul ></body></html> 





上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,li:nth-lastrchild(2) 选 择 器 用 于 设置 
列表 中 倒数 第 二 个 列表 项 目的 背景 为 浅 灰 色 ,并且 圆 角 。 注 意 ,li:nth- child(2) 的 2 表示 按照 默认 顺 
序 的 第 二 个 子 元 素 ,li:nth-last-child(2) 的 2 表示 按照 默认 的 顺序 倒数 第 二 个 子 元 素 。 

此 实例 的 源 文件 名 是 myHtmlB016. html。 


570 ”使 用 target 选择 器 定制 目标 元 素 的 样式 


此 实例 主要 通过 使 用 target 选择 器 定制 目标 元 素 的 样式 。 当 在 Google Chrome 浏览 器 中 显示 该 页 
面 时 , 单 击 “ 黑 海 夺 金 " 超 链接 , 则 下 面 的 “黑海 夺 金 "电影 海报 图 像 将 旋转 17 并 显示 阴影 ,如 图 570-1 所 
示 ; 单 击 * 误 鬼 刑 警 " 超 链接 , 则 下 面 的 “ 训 鬼 刑警 "电影 海报 图 像 也 将 旋转 17 并 显示 阴影 ,如 图 570-2 所 
示 。 有 关 此 实例 的 主要 代码 如 下 。 
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<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
< style type= "text/css"> 
:target { transform: rotate(17deg) ;border:1px solid # BFBFBF; 
box — shadow:2px 2px 3px gray; } 
img {margin: 20px;} 
</style></head> 
<body> 
<p id= "menu" style= "margin— left: 200px"> 
<a href =" 间 myMoviel"> 终 极 硬汉 </a> | <a href = "#myMovie2"> 黑 海 夺 金 </a> | 
<a href =" 间 myMovie3"> 衰 鬼 刑警 </a></p> 
<div>< img id= "myMoviel" src = "img/B012A. jpg"/> 
< img id= "myMovie2" src= "img/B012B. jpg"/> 
< img id= "myMovie3" src="img/B012C. jpg"/></div></body ></html > 





[DY myHemlso12 html x 


所 © D file///D/myWork/myHtmlB012.html#myMovie2 


终极 硬汉 | 黑 洛 二 爹 | 训 皇 刑 时 


< _ 
衰 风 刑 药 








[DY myHemlB012 html x 


所 3 © Dfile///D/myWork/myHtmlB012.htmi#myMovie3 


给 要 硬汉 | 黑 治本 爹 | 训 皇 刑 时 


日 sme 











图 570-2 
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上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,target 选择 器 主要 用 于 对 页 面 中 的 
某 个 target 元 素 ( 该 元 素 的 id 被 当 作 页 面 中 的 超 链 接 来 使 用 ) 指 定 样式 ,该 样式 只 有 在 用 户 单 击 了 页 
面 中 的 超 链接 ,并 且 跳 转 到 target 元 素 后 起 作用 。 在 此 实例 中 ,target 选择 器 的 主要 功能 是 设置 目标 
元 素 的 样式 为 旋转 17 并 带 有 阴影 和 边框 线 。 

此 实例 的 源 文 件 名 是 myHtmlB012. html。 


571 使 用 属性 选择 器 筛选 超 链 接 并 追加 内 容 


此 实例 主要 通过 使 用 属性 选择 器 (a[href * 一 jd]:after) 实 现 筛选 超 链接 并 在 其 后 追加 内 容 。 当 
在 Google Chrome 浏览 器 中 显示 该 页 面 时 将 对 5 个 超 链 接 的 href 属性 进行 筛选 ,并 在 其 后 添加 符合 
要 求 的 文字 说 明 ,如 图 571-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 





DD myHtmlBoo6.html 








<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<style type= "text/css"> 
a[href * = jd]:after{content:"[ 京 东 在 售 商品 ]"; color: red; font - size: 20px; } 
a[href* = tmall]:after{content:"[ 天 猫 在 售 商品 ]";color: green; font - size: 20px; } 
</style></head> 
<body>< div style = "text - align:center;margin— top:5px"> 
<a href = "http://item. jd. com/2212217. html"> 西 班 牙 索 之 光 干 红 葡萄 酒 </a><br> 
<a href = "http://item. jd. com/822935. html"> 五 谷 道场 方便 面 五 连 包 </a><br> 
<a href = "http://item. jd.com/1521193. html"> 雕 牌 生姜 洗 滞 精 1.5kg</a><br> 
< a href = ”https://detail. tmall. com/item. htm? spm = a220m. 1000858. 1000725. 8. 51fwcH&id = 
44538838610&skuId = 984226604868areald = 500000g8cat _ id = 557500l0grn = 
ccaaf2agceel3ac7e5256dc67874c62b&user_id = 1646318507&is_b = 1"> DELSEY 法 国 大 使 拉杆 箱 </a>< br> 
<a href = " https://detail. tmall. com/item. htm? spm = a220m. 1000858. 1000725. 13. nu63d4&id = 


533028473699&skuId = 31849202574728areald = 5000008cat _ id = 56148012&rn = 
3293d2aa56dfe47b95ee67d28d50675dsuser_id = 1807289316&is_b= 1"> 小 米 手 环 2 智能 手 环 运 动 计 步 器 </a> 
<br></div></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,aLhref x 一 jdj:after 属性 选择 器 表示 
在 超 链接 中 筛选 href 属性 中 包含 jd 的 超 链接 ,然后 在 其 后 追加 content, 并 设置 文字 颜色 和 尺寸 。 
CSS3 中 还 有 两 个 支持 通配符 的 属性 选择 器 .[att “三 val] 属 性 选择 器 用 于 筛选 att 属性 值 的 开始 字符 
是 val 的 元 素 ; [att $ 三 val 属性 选择 器 用 于 筛选 att 属性 值 的 结尾 字符 是 val 的 元 素 。 

此 实例 的 源 文 件 名 是 myHtmlB006. html。 
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572 ”使 用 属性 选择 器 筛选 超 链接 并 插 人 元 素 


此 实例 主要 通过 使 用 属性 选择 器 (aLhref * 一 jd]:before) 实 现 筛选 超 链 接 并 在 其 前 面 插 人 图 像 。 
当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 将 对 5 个 超 链接 的 href 属性 进行 筛选 ,如 果 该 超 链接 表 
示 的 是 京东 在 售 商品 , 则 在 该 超 链 接 前 面 添加 京东 logo 图 像 ; 如 果 该 超 链接 表示 的 是 天 猫 在 售 商品 ， 
则 在 该 超 链接 前 面 添加 天 猫 logo 图 像 , 如 图 572-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 


百 要 口 x 
DD myHtmlB025 html x 
全 3 © Dfile///D/myWork/myHtmlB(tY 三 





"JD 二 之 光 于 红 攻 本 

宛 JD 8 五 场 广 人 面 五 这 

字 )D Ze 生 关 和 省 sks 
as 


上 it 








图 572-1 


<! doctype html >< html >< head >< meta charset = "UTF - 8"> 
< style type = "text/css"> 
a[href * = jd] :before {content: url( img/B025A.jpg);} /* 搬 和 人 京东 logo 图像 x*/ 
a[href x = tmall]:before { content: url(img/B025B. jpg);} /* 插入 天 猫 logo 图 像 */ 
</style></head> 
<body>< div style = "text - align: left;margin - top:5px"> 
<a href = "http://item. jd. com/2212217. htm1"> 西 班 牙 索 之 光 干 红 葡 菊 酒 </a>< br > 
<a href = "http://item. jd. com/822935. html"> 五 谷 道场 方便 面 五 连 包 </a><br> 
<a href = "http://item. jd. com/1521193. html"> 雕 牌 生姜 洗 洁 精 1.5kg</a><br> 
< a href = " https://detail. tmall. com/item. htm? spm = a220m. 1000858. 1000725. 8. 51fwcH&id 
44538838610&skuId = 98422660486&areald = 500000gcat _ id = 55750010grn 
ccaaf2a9ceel3ac7e5256dc67874c62b&user id = 1646318507&is_b = 1"> DELSEY 法 国 大 使 拉杆 箱 </a>< br> 
<a href = "https://detail. tmall. com/item. htm?spm = a220m. 1000858.1000725. 13. nu63d4&id = 5330284736 
99&skuId = 3184920257472&areaId = 500000gcat_id = 56148012&rn = 3293d2aa56dfe47b95ee67d28d50675dguser_ 
id=1807289316&is_b=1"> 小 米 手 环 2 智能 手 环 运动 计 步 器 </a><br></div></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 .aLhref x 二 jdj :before 属性 选择 器 表 
示 在 超 链接 中 筛选 href 属性 中 包含 jd 的 超 链接 ,然后 在 其 前 面 插入 图 像 ; aLhref * 二 tmall]: before 
属性 选择 器 表示 在 超 链接 中 筛选 href 属性 中 包含 tmall 的 超 链接 ,然后 在 其 前 面 插入 图 像 。 注 意 ,如 
果 content 属性 表示 的 是 纯 文本 , 则 应 该 为 纯 文本 添加 双 引 号 ,例如 content: "京东 在 售 商品 "; 如 果 需 
要 在 超 链接 的 后 面 添加 图 像 , 则 应 该 使 用 aLhref* 二 jdj:after 属性 选择 器 。 

此 实例 的 源 文件 名 是 myHtmlB025. html。 


573 ”使 用 属性 选择 器 筛选 超 链接 并 禁止 插 人 


此 实例 主要 在 超 链 接 中 指定 类 别 myNone, 并 使 用 属性 选择 器 (a[href * 一 jd]. myNone: before) , 
从 而 实现 筛选 超 链接 并 禁止 在 其 前 面 插入 图 像 或 文字 等 内 容 。 当 在 Google Chrome 浏览 器 中 显示 该 








第 7 部 分 和 中 《GD 


页 面 时 将 对 5 个 超 链接 的 href 属性 进行 得 选 ,如 果 该 超 链接 表示 的 是 京东 在 售 商品 , 则 在 该 超 链接 前 
面 添加 京东 logo 图 像 , 但 是 如 果 该 超 链接 的 类 别 为 myNone. 则 禁止 添加 京东 logo 图 像 ,例如 ”五 谷 道 
场 方便 面 五 连 包 ”; 如 果 该 超 链接 表示 的 是 天 猫 在 售 商品 . 则 在 该 超 链 接 前 面 添加 天 猫 logo 图 像 ,如 
图 573-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 





西 - ox 


DD myHemlB026 html x 
3 CC Dfiley//D/myWork/myHtmlB( 安 











<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<style type= "text/css"> 


a[href * = jd]:before {content: url( img/B025A. jpg); } /* 捅 入 京东 logo 图 像 */ 

a[href * = jd].myNone:before { content:normal; } /* 禁 止 插入 logo 图 像 */ 

a[href * = tmall]:before { content: url(img/B025B. jpg);}  /V* 插 和 人 天 和 猫 logo 图 像 */ 
</style></head> 


<body>< div style = "text - align:left;margin - top:5px"> 

<a href = "http://item. jd. com/2212217. html"> 西 班 牙 索 之 光 干 红 葡萄 酒 </a><br> 

<a href = "http://item. jd. com/822935. html” class = "myNone"> 五 谷 道场 方便 面 五 连 包 </a><br> 

<a href ="http://item. jd.com/1521193. htm1"> 雕 牌 生姜 洗 洁 精 1.5kg</a><br> 

<a href = "https://detail. tmall. com/ item. htm? spm = a220m. 1000858. 1000725. 8.51fwcH&id= 44538838610&s 
kuId = 98422660486&areald = 500000gcat_id = 55750010&rn = ccaaf2a9ceel3ac7e5256dc67874c62b&user_id = 
1646318507&is_b= 1"> DELSEY 法 国 大 使 拉杆 箱 </a><br> 

<a href = "https://detail. tmall. com/item. htm?spm = a220m. 1000858.1000725. 13.nu63d4&id= 53302847369 
9&skuId = 3184920257472SareaId = 500000gcat_id = 56148012&rn = 3293d2aa56dfe47b95ee67d28d50675d&user_ 
id=1807289316&is_b = 1"> 小 米 手 环 2 智能 手 环 运 动 计 步 器 </a><br></div></body></htnl > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,aLhref * 二 jdj. myNone:before 属性 
选择 器 表示 在 超 链接 中 筛选 href 属性 中 包含 jd 的 超 链 接 , 并 禁止 在 其 前 面 插入 图 像 。 
此 实例 的 源 文件 名 是 myHtmlB026. html。 


574 使 用 属性 选择 器 筛选 数据 实现 列表 过 小 


此 实例 主要 通过 使 用 CSS3 的 属性 选择 器 实现 筛选 数据 并 选择 城市 。 当 在 Google Chrome 浏览 
器 中 显示 该 页 面 时 , 单 击 * 所 在 城市 :" 文 本 框 则 会 滑 出 一 个 下 拉 列 表 框 ,可 以 直接 在 下 拉 列 表 框 中 选 
择 城市 ; 也 可 以 在 文本 框 中 输入 拼音 或 汉字 .例如 “ou”. 则 将 在 下 拉 列 表 中 显示 拼音 包含 “ou” 的 所 有 
城市 ,选择 符合 要 求 的 城市 ,该 城市 就 会 自动 填充 到 文本 框 中 ,如 图 574-1 所 示 。 有 关 此 实例 的 主要 代 
码 如 下 。 

<!doctype html ><html ><head><meta charset = "UTF — 8"> 


<style type= "text/css"> 
.search { width: 180px; padding: Spx; — webkit— box— sizing: content— box;} 
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.datalist {display: block;visibility: hidden; width: 193px; 
background ~ color: #FFF; overflow: hidden; 
box- shadow: 0 1px 间 CCC, lpx 0 间 CCC，1lpx 0 #CCC, 0 - 1px #CCC;} 
. search:focus + .datalist {visibility: visible;} 
.list { margin- top: - lpx; padding: 4px 10px; border - top: lpx solid # EEE;} 
p{ float: left; text- align: center;line— height: 2px;} 
</style></head> 
<body><p> 所 在 城市 : < div>< input type = "search" class="search" id= 
"输入 省 会 或 直辖 市 名 称 "/> 
<label class = "datalist" for = "city"> 
<divclass= "list" data- index= "重庆 市 chongqing"> 重 庆 市 </div> 
<div class= "list” data- index= "哈尔滨 市 haerbing"> 哈 尔 滨 市 </div> 
<divclass="list" data- index= "长 春 市 changchun"> 长 春 市 </div> 
<divclass= "jlist" data- index=" 兰 州 市 lanzhou"> 兰 州 市 </div> 
<divclass= "list" data- index= "北京 市 beijing"> 北 京 市 </div> 
<div class= "list" data- index= "杭州 市 hangzhou"> 杭 州 市 </div> 
<div class= "1list" data- index= "长 沙市 changsha"> 长 沙市 </div> 
<div class= "list" data- index= "沈阳 市 shenyang"> 沈 阳 市 </div> 
<div class= "list"” data- index= "成 都 市 chengdu"> 成 都 市 </div> 
<div class= "list" data- index= "合肥 市 hefei"> 合 肥 市 </div> 
<divclass= "list" data- index=" 天 津 市 tianjin"> 天 津 市 </div> 
<div class= "list” data- index= "西安 市 xian"> 西 安 市 </div> 
<div class= "list" data- index= "武汉 市 wuhan"> 武 汉 市 </div> 
<div class= "list"” data- index= "济南 市 jinan"> 济 南 市 </div> 
<divclass= "list" data- index= "广州 市 guangzhou"> 广 州 市 </div> 
<divclass="list”data- index= "南京 市 nanjing"> 南 京 市 </div> 
<div class= "list" data- index=" 上 海 市 shanghai"> 上 海 市 </div> 
<divclass="list” data- index=" 昆 明 市 kunming"> 昆 明 市 </div> 
<divclass="list" data- index= "郑州 市 zhengzhou"> 郑 州 市 </div> 
<div class= "list" data- index= "贵阳 市 guiyang"> 贵 阳 市 </div> 
<divclass="list" data- index= "西宁 市 xining"> 西 宁 市 </div> 
<div class= "list" data- index = "海口 市 haikou"> 海 口 市 </div> 
<divclass="list" data- index= "南昌 市 nanchang"> 南 昌 市 </div> 
<div class= "list" data- index= "香港 特区 xianggang"> 香 港 特区 </div> 
<divclass= "list”" data- index= "澳门 特区 aomen"> 澳 门 特区 </div></label> 
< script language = "javascript"> 
if (document. addEventListener) { 
var eleStyle = document. createElement ("style"), 
eleInput = document. querySelector("#city"), 
eleDatalist = document. querySelector(". datalist"); 
document. querySelector( "head" ) . appendChild(eleStyle); 
eleInput. addEventListener("input", function() { // 文 本 框 输入 
var val = this. value. trim( ). toLowerCase( ); 
if (val =="'') { eleStyle. inmerHIML ='. list:not([data- indexx ="'+this.value+'"]) { display: none; }'; 
} else { eleStyle. innerHTML = "''; } }); 
eleDatalist.addEventListener("mousedown", function(event) { // 单 击 确定 
eleInput. value = event. target. innerHTML; 
eleInput. blur(); });} 
</script ></div></p></body ></html > 





ity" placeholder = 






























上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,list: not (Ldata-index * 二 "ou"]) 
{ display: none; } 表 示 隐 藏 在 data-index 中 不 含有 ou 的 所 有 城市 。data-index * 一 "ou" 的 本 意 是 选 
择 自 定义 属性 data-index 中 含有 ou 的 所 有 城市 .但 它 前 面 有 个 not 过 滤器 ,因此 取 反 。CSS3 常用 的 


第 7 部 分 六 《C7》 


属性 选择 器 有 [att]( 有 该 属性 ) [att 一 xxx]( 属 性 值 是 xxx)、[att“ 一 xxx]( 属 性 值 是 以 xxx 开头 )、 
[att$ 二 xxxj( 属 性 值 是 以 xxx 结尾 ) [att * 一 xxx]( 属 性 值 包含 xxx) 。 
此 实例 的 源 文件 名 是 myHtmlB162. html。 








1 DD myHtmlB162html 
$$ 3 C Dfile///D/myWork/myHtmlB162 窑 











图 574-1 


575 ”使 用 兄弟 选择 器 定制 同 级 指定 元 素 的 样式 


此 实例 主要 通过 使 用 div 一 p 兄弟 选择 器 实现 定制 同 级 指定 元 素 的 样式 。 当 在 Google Chrome 
浏览 器 中 显示 该 页 面 时 ,移动 互联 网 思维 》 和 《移动 互联 网 时 代 的 新 4C 法 则 ) 与 (新 上 榜 科 普 图 书 》 
div 元 素 是 同 级 兄弟 关系 ,前 两 本 书 名 是 p 元 素 ,因此 这 两 本 书 的 书 名 以 定制 的 隶书 粗 体 字 显示 ;《 科 
学 的 旅程 兴 无 言 的 宇宙 : 隐藏 在 24 个 数学 公式 背后 的 故事 兴 中 国 国家 地 理 百 科 全 书 兴 JavaScript 权 
威 指南 (第 6 版 )》 虽 是 p 元 素 , 但 是 与 (新 上 榜 科普 图 书 )div 元 素 不 是 同 级 兄弟 关系 ,因此 不 以 定制 的 
样式 显示 ;《Python 程序 设计 入 门 到 实战 ) 虽 与 (新 上 榜 科 普 图 书 》div 元 素 是 同 级 兄弟 关系 ,但 它 是 
output 元 素 ,而 不 是 p 元 素 ,因此 也 不 以 定制 的 样式 显示 ,如 图 575-1 所 示 。 有 关 此 实例 的 主要 代码 
如 下 。 


/ DD myHemlso24heml x mg 
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<!doctype html >< html >< head > <meta charset = "UTF - 8"> 
<style type= "text/css"> 
div, p, h3, output {background - color: lightgray;} 
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div ~ p { border - radius:5px; font - weight: bold; font - family: 华文 隶书 ;} 
</style></head> 

<body>< div ><h3> 新 上 榜 科普 图 书 </h3> 
<p> 科 学 的 旅程 </p><p> 无 言 的 宇宙 : 隐藏 在 24 个 数学 公式 背后 的 故事 </p> 
<p> 中 国 国 家 地 理 百科 全 书 </p></div> 

<div><p>JavaScript 权威 指南 (第 6 版 )</p></div> 

<p> 移 动 互联 网 思维 </p>< output > Python 程序 设计 入 门 到 实战 </output > 

<p> 移 动 互联 网 时 代 的 新 4C 法 则 </p></body></html> 





上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 .div 一 p 兄弟 选择 器 用 于 定制 样式 以 
圆 角 、 粗 体 字 和 隶书 显示 元 素 。 在 CSS3 中 ,兄弟 选择 器 用 来 指定 位 于 同一 个 元 素 之 中 的 某 个 元 素 之 
后 的 所 有 其 他 某 个 类 型 的 兄弟 元 素 所 使 用 的 样式 . 它 的 定义 格式 如 下 。 

< 子 元 素 > 一 < 子 元 素 之 后 的 同 级 兄弟 元 素 >{ 


// 指 定 样式 
} 


此 实例 的 源 文件 名 是 myHtmlB024. html。 


576 ”使 用 选择 器 定制 元 素 的 奇数 子 元 素 的 样式 


此 实例 主要 通过 使 用 nth-child(odd) 选 择 器 和 nth-last-child(odd) 选 择 器 实现 定制 列表 中 顺 数 为 
奇数 的 子 元 素 和 倒数 为 奇数 的 子 元 素 的 样式 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,在 6 本 
图 书 名 称 中 顺 数 为 奇数 的 图 书 书 名 以 灰色 背景 显示 ,倒数 为 奇数 的 图 书 书 名 以 浅 绿色 背景 显示 并 且 
字体 为 粗 体 , 如 图 576-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 


百 口 x 
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图 576-1 


<!doctype html ><html ><head>< meta charset = "UTF - 8"> 
<style type= "text/css"> 
li:nth— child(odd){ background— color: lightgray; border - radius:5px;} 
li:nth— last ~ child(odd){background- color: lightgreen; 
border - radius: Spx; font - weight: bold;} 
1liflist - style— type: none;padding — left: 8px;width:340px ;margin:10px ;} 
</style></head> 
<body><h2>12 月 份 新 上 榜 科 技 图 书 </h2 > 
<ul><1i> 科 学 的 旅程 </1i> 





第 7 部 分 和 中》 


<1i> 万 物 解释 者 : 复杂 事物 的 极 简 说 明 书 </1i> 
<1i> 地 球 与 太空 : 美国 宇航 局 NASA 珍贵 摄影 集 </1i> 
<1i> 迷 人 的 数学 : 315 个 烧 脑 游戏 玩 通 数学 史 </1i> 
<1i> 无 言 的 宇宙 : 隐藏 在 24 个 数学 公式 背后 的 故事 </1i> 
<1i> 中 国 国 家 地 理 百科 全 书 </1i></ul></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,li:nth-childCodd) 选 择 器 用 于 设置 列 
表 中 顺 数 为 奇数 的 所 有 列表 项 目的 背景 为 浅 灰 色 .并且 圆 角 ; li: nth-last- child(odd) 选 择 器 用 于 设置 
列表 中 倒数 为 奇数 的 所 有 列表 项 目的 背景 为 浅 绿色 ,字体 为 粗 体 并 且 圆 角 。 

此 实例 的 源 文件 名 是 myHtmlB017. html。 


S77 


此 实例 3 


使 用 选择 器 定制 元 素 的 偶数 子 元 素 的 样式 


主要 通过 使 用 nth-child(even) 选 择 器 和 nth-last-child(even) 选 择 器 实现 定制 列表 中 顺 数 





为 偶数 的 子 元 素 和 倒数 为 偶数 的 子 元 素 的 样式 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,在 6 
本 图 书 名 称 中 , 顺 数 为 偶数 的 图 书 书 名 以 灰色 背景 显示 ,倒数 为 偶数 的 图 书 书 名 以 浅 绿色 背景 显示 并 
且 字 体 为 粗 体 ,如 图 577-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 





百 口 x 


D myHemlB018 html x 
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12 月 份 新 上 榜 科技 图 书 





图 577-1 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<style type= "text/css"> 


li:nth 
li:nth 


— child( even){background — color: lightgray;border - radius:5px;} 
— last - child(even) {background - color: lightgreen; 
border - radius:5px; font - weight: bold;} 


li{list - style— type: none;padding — left: 8px;width:340px ;margin:10px ;} 
</style></head> 


<body>< 


h2>12 月 份 新 上 榜 科 技 图 书 </h2 > 


<ul><1i> 科 学 的 旅程 </1i> 
<1i> 万 物 解 释 者 : 复杂 事物 的 极 简 说 明 书 </1i> 
<1i> 地 球 与 太空 : 美国 宇航 局 NASA 珍贵 摄影 集 </1i> 
<1i> 迷 人 的 数学 : 315 个 烧 脑 游戏 玩 通 数 学 史 </1i> 
<1i> 无 言 的 宇宙 : 隐藏 在 24 个 数学 公式 背后 的 故事 </1i> 
<1i> 中 国 国家 地 理 百科 全 书 </1i></ul></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,li:nth-childCeven) 选 择 器 用 于 设置 
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列表 中 顺 数 为 偶数 的 所 有 列表 项 目的 背景 为 浅 灰 色 ,并 且 圆 角 ; li:nth-last- child(even) 选 择 器 用 于 设 
置 列表 中 倒数 为 偶数 的 所 有 列表 项 目的 背景 为 浅 绿色 ,字体 为 粗 体 并 且 圆 角 。 在 CSS3 中 ,nth-child(n) 
选择 器 匹配 父 元 素 中 的 第 n 个 子 元 素 ,n 可 以 是 一 个 数字 ,一 个 关键 字 ( 例 如 odd 、even 等 ) ,或 者 一 个 
公式 (例如 3n 十 1) 。 

此 实例 的 源 文件 名 是 myHtmlB018. html。 


578 ”使 用 选择 器 定制 元 素 的 倍数 子 元 素 的 样式 


此 实例 主要 通过 使 用 nth-of-type(3n 十 1) 选 择 器 和 nth-last-of-type(3n 十 1) 选 择 器 实现 定制 元 素 
中 顺 数 为 (3n 十 1) 的 子 元 素 和 倒数 为 (3n 十 1) 的 子 元 素 的 样式 。 当 在 Google Chrome 浏览 器 中 显示 该 
页 面 时 ,在 6 本 图 书 名 称 中 , 顺 数 为 (3n 十 1) 的 图 书 分 别 是 1.4, 因 此 这 两 个 图 书 书 名 以 灰色 背景 显示 ， 
倒数 为 (3n 十 1) 的 图 书 分 别 是 6、3, 因 此 这 两 个 图 书 书 名 以 浅 蓝 色 背景 显示 并 且 字 体 为 隶书 ,如 图 578-1 
所 示 。 有 关 此 实例 的 主要 代码 如 下 。 














百 -o x 
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12 月 份 新 上 榜 科技 图 书 


科学 的 旅程 
万 物 解释 者 ， 复 杂事 物 的 极 简 说 明 书 





过 人 的 数学 ，315 个 烧 脑 游戏 玩 通 数 学 史 
无 言 的 宇宙 ， 隐 荆 在 24 个 数学 公式 背后 的 故事 
下 回避 家 节理 百科 人 








图 578-1 


<! doctype html >< html >< head >< meta charset = "UTF - 8"> 
< style type = "text/css"> 
/* 顺 数 倍数 (3n+ 1) 选 择 器 * / 
p:nth- of -type(3n+1){ background - color: lightgray;border — radius:S5px;} 
/* 倒数 倍数 (3n+ 1) 选 择 器 * / 
p:nth- last- of ~ type(3n+1){ background— color: lightblue; border - radius:5px; 
font - weight: bold; font - family: 华文 隶书 ; } 
p{padding - left: 8px;width:340px ; margin:10px ;} 
</style></head> 
<body><h2>12 月份 新 上 榜 科技 图 书 </h2> 
<div><p> 科 学 的 旅程 </p> 
<P> 万 物 解释 者 : 复杂 事物 的 极 简 说 明 书 </p> 
<p> 地 球 与 太空 : 美国 宇航 局 NASA 珍贵 摄影 集 </p> 
<p> 迷 人 的 数学 : 315 个 烧 脑 游戏 玩 通 数学 史 </p> 
<p> 无 言 的 宇宙 : 隐藏 在 24 个 数学 公式 背后 的 故事 </p> 
<Bp> 中 国 国 家 地 理 百 科 全 书 </p></div></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,p:nth-of-type(3n 十 1) 选 择 器 用 于 设 
置 元 素 (div) 中 顺 数 为 (3n 十 1) 的 所 有 子 元 素 (p) 的 背景 为 浅 灰 色 , 并 且 圆 角 ; p:nth-lastoftype(3n 十 1) 
选择 器 用 于 设置 元 素 (div) 中 倒数 为 (3n 十 1) 的 所 有 子 元 素 (p) 的 背景 为 浅 蓝 色 , 字 体 为 隶书 并 且 圆 
角 。 在 CSS3 中 ,nth-of-type(n) 选 择 器 用 于 匹配 同类 型 中 的 第 n 个 同 级 兄弟 元 素 ,n 可 以 是 一 个 数 
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字 , 一 个 关键 字 ( 例 如 odd 、even 等 ) ,或 者 一 个 公式 (例如 3n 十 1) 。 
此 实例 的 源 文 件 名 是 myHtmlB019. html。 


579 ”使 用 选择 器 实现 表格 隔行 错 色 显示 


此 实例 主要 通过 使 用 nth-of-type(2n 十 0) 选 择 器 和 nth-child(2n 十 1) 选 择 器 实现 动态 生成 的 任意 
行 数 的 表格 隔行 错 色 显示 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,表格 的 奇数 行 以 灰色 背景 
显示 ,偶数 行 以 浅 绿色 背景 ,隶书 字体 显示 ,如 图 579-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 


[| 口 x 
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<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<script src= "js/jquery- 3.1.1.min. js"></script >< script language = "javascript"> 
$ (function() { 
var myTable = document. createElement ("table"); 


for (var i=0; i<500; it++) { //500 行 
Var myTr = document. createElement ("tr"); 
for (var j=0; j<5; j++) { /1/5 列 


var myTd = document. createElement ("td"); 

Var myText = document. createTextNode( i+ " 行 " + j+" 列 "); 
myTd. style. border = "1px solid #dfdfdf"; 

myTd. style. width= "80px"; 

myTd. style. height = "20px"; 

myTd. style. textAlign = "center"; 

myTd. appendChild(myText); 


myTr. appendChild(myTd) ; // 向 行 中 添加 列 ( 单 元 格 ) 
有 appendChild(myTr) ; // 向 表 中 添加 行 
人 // 在 指定 位 置 添加 表 
A 
<style> 


table { margin: 0 auto; font - size: 14px; 
border - collapse: collapse; text - align: center;} 
tr:nth- of ~ type(2n +0) { background — color: lightgreen; 


font - family: 华文 隶书 ; font - size: 18px; } /= 偶数 行 样式 选择 器 * / 
tr:nth- child(2n +1) { background- color: lightgray; } /* 奇 数 行 样式 选择 器 * / 
</style></head> 


<body>< div id= "myDiv"></div></body ></html > 
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上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,tr:nth-oftype(2n 十 0) 选 择 器 用 于 设置 
表格 中 行 号 为 偶数 的 所 有 行 的 背景 为 浅 绿色 .字体 为 隶书 ; tr:nth- child(2n 十 1) 选 择 器 用 于 设置 表格 中 
行 号 为 奇数 的 所 有 行 的 背景 为 浅 灰 色 。 通 过 修改 公式 (例如 2n 十 1) 可 以 实现 表格 行 以 其 他 样式 显示 。 

此 实例 的 源 文件 名 是 myHtmlB020. html。 


580 ”使 用 选择 器 实现 下 拉 列 表 框 的 选项 隔行 错 色 显示 


此 实例 主要 通过 使 用 nth-child 选择 器 设置 符合 条 件 的 选项 颜色 ,从 而 实现 下 拉 列 表 框 的 奇数 行 
选项 和 偶数 行 选项 分 别 使 用 不 同 的 颜色 显示 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,下 拉 列 
表 框 的 奇数 行 选项 显示 青色 ,偶数 行 选项 显示 粉色 ,如 图 580-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 








西 - 5 x 


D mytemle363html x\N 
二 3 © Dfile///D/myWork/myHt' 字 三 








图 580-1 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<style type= "text/css"> 
select{width: 320px; height:25px; background - color: cyan; margin: 10px; } 
/* 设 置 偶数 行 选项 的 背景 颜色 * / 
select option:nth- child(2n){ background - color: pink;} 
</style></head> 
<body>< div align = "center"> 
< select >< option selected > 华海 电子 商务 有 限 公 司 </option> 
<option > 嘉 利 房地产 (集团 ) 股 份 有 限 公司 </option> 
<option > 大 华 建 材 股份 有 限 公 司 </option> 
<option > 渝 能 国际 电力 股份 有 限 公 司 </option> 
< option > 西部 铜 业 发 展 有 限 公 司 </option> 
< option > 北岸 联合 网 络 投 资 有 限 公司 </option></select ></div></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 .select option: nth- child (2n) 
{ background-color: pink; } 表 示 设 置 select 下 拉 列 表 框 的 所 有 偶数 行 选项 的 背景 颜色 为 粉色 。 在 
CSS3 中 ,nth-child(n) 选 择 器 匹配 属于 其 父 元 素 的 第 n 个 子 元 素 , 不 论 元 素 的 类 型 ; n 可 以 是 数字 、 关 
键 字 或 公式 ; odd 和 even 是 可 用 于 匹配 下 标 是 奇数 或 偶数 的 子 元 素 的 关键 字 。 因 此 ,上 面 的 代码 也 
可 以 修改 成 : select option:nth-child(even) {background-color: pink;})。 

此 实例 的 源 文件 名 是 myHtmlB363. html。 


581 使 用 选择 器 定制 超 范围 文本 框 的 显示 样式 


此 实例 主要 通过 使 用 input[type 一 "number"]: in-range 和 input[type 一 "number"]: out-of- 
range 选择 器 实现 定制 数字 文本 框 的 值 在 超出 限定 范围 时 的 外 观 样 式 。 当 在 Google Chrome 浏览 器 
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中 显示 该 页 面 时 ,如 果 在 “出 生年 份 (1990 一 1999) : "文本 框 中 输入 的 值 大 于 1999 或 者 小 于 1990, 则 该 
文本 框 的 背景 将 出 现 红 色 ,如 图 581-1 所 示 ; 如 果 在 “出 生年 份 (1990 一 1999): ”文本 框 中 输入 的 值 在 
1990 一 1999 的 有 效 范围 内 , 则 该 文本 框 的 背景 将 以 正常 的 白色 显示 。 有 关 此 实例 的 主要 代码 如 下 。 








5 x 
DD myHtmlB023 html x\ 
全 3 © Dfie///D/myWork/myHtmlB02 窑 | 三 
考生 姓名 :| 


出 生年 份 (1990-1999) : 二 时 到 





图 581-1 


<!doctype html >< html >< head > < meta charset = "UTF - 8"> 
<style type= "text/css"> 


/* 在 范围 内 时 背景 为 白色 * / 

input[type = "number" ] :in - range{ background- color: white;} 

/* 超 出 范围 内 时 背景 为 红色 */ 

input[type = "number" ] :out — of - range{ background - color: red;} 
</style></head> 


<body >< form> 考 生 姓 名 :< input type = "text" name = "myName"/><br><br> 
出 生年 份 (1990 - 1999): < input type = number min = 1990 max = 1999 ><br><br></form> 
</body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,input[type 二 "number"]: in-range 
选择 器 用 于 设置 数字 文本 框 的 值 在 有 效 范围 内 时 以 白色 背景 显示 ; input[type 二 "number"]:;out-of- 
range 选择 器 用 于 设置 数字 文本 框 的 值 在 超出 范围 时 以 红色 背景 显示 。 

此 实例 的 源 文件 名 是 myHtmlB023. html。 


582 ”使 用 选择 器 实现 内 圆 弧 化 的 渐变 曲线 图 形 


此 实例 主要 通过 使 用 before 和 after 选择 器 实现 内 圆 弧 化 的 渐变 曲线 图 形 。 当 在 Google 
Chrome 浏览 器 中 显示 该 页 面 时 ,内 圆 弧 化 的 渐变 曲线 图 形 效果 如 图 582-1 所 示 。 有 关 此 实例 的 主要 
代码 如 下 。 








<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<style type= "text/css"> 

.myBox { margin ~— top: 50px; z — index: 3; overflow: hidden; background: linear - gradient (white, 
darkgreen); width:400px; height :250px; padding bottom: 25px; }/ * 绘制 渐变 的 矩形 * / 

.myBox: before{ content:""; display: block; position: relative; top: - 95px; border - radius: 50%; 
z- index: 4; width:400px; height:190px; background - color:white; }/ x 绘制 上 面 的 椭圆 x / 

.myBox: after { content:""; display: block; position: relative; top: — 64px; border - radius: 50%; 
z- index:5; width:400px; height:190px; background - color: white;box - shadow: 2px 2px 8px black inset; }/* 绘 
制 下 面 的 椭圆 x / 

/* 设 置 文 字 块 的 基本 样式 */ 

.myBox div{ position:relative; bottom:80px; font — size:50px; font— weight: bold; } 

</style></head> 
<body> 
<div align= "center"> 
<div class = "myBox”><div> 炫 酷 实 例 集锦 </div></div></div> 
</body></html> 
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上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,myBox:before{} 选 择 器 用 于 绘制 上 
面 的 椭圆 ,myBox:after{ } 选 择 器 用 于 绘制 下 面 的 椭圆 ,由 于 此 实例 的 椭圆 没有 边框 线 , 并 且 背 景色 与 
容器 的 颜色 相同 ,因此 造成 内 圆 弧 的 视觉 效果 ,但 它们 的 实际 构造 如 图 582-2 所 示 ,椭圆 的 其 余部 分 
被 overflow: hidden 了 。 在 CSS3 中 ,before 选择 器 用 于 在 被 选 元 素 的 内 容 前 面 插入 内 容 , 插 和 人 内容 
在 content 属性 中 指定 ; after 选择 器 用 于 在 被 选 元 素 的 内 容 后 面 插 和 内容, 搬入 内 容 在 content 属性 
中 指定 。 

此 实例 的 源 文件 名 是 myHtmlB346. html。 














百 = 口 x 
DY myrtemlB346 ht x 
“ 3 © Dfile///D/myWork/myHtmlB346.h 窜 三 





百 - 6 x 
[DD myHtmlB346 html x 
对 3 © Dfile///D/myWorW/myHtmlB346.htry 三 











图 582-1 图 582-2 


583 ”使 用 选择 器 绘制 扇形 样式 的 多 级 彩虹 


此 实例 主要 通过 使 用 before 和 after 选择 器 实现 绘制 扇形 样式 的 多 级 彩虹 。 当 在 Google Chrome 浏 
览 器 中 显示 该 页 面 时 ,扇形 样式 的 多 级 彩虹 效果 如 图 583-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 


<! doctype html >< html >< head >< meta charset = "UTF - 8"> 
< style type = "text/css"> 

/* 设置 盒子 的 基本 样式 * / 

.myBox { margin: 10px auto; overflow: hidden; width: 400px; height: 200px; } 

/* 绘 制 半圆 形 的 彩虹 * / 

.myRainbow { margin — top: 10px; border - radius: 50%; width: 400px; height: 400px; background: 
— webkit — radial - gradient(##FFFFFF 80px, #FF6633 100px， 井 FFFF00 120px, green 140px, #008AFF 160px, 
purple 180px, cyan 200px); } 

/* 以 白色 切 掉 半 圆 形 彩虹 的 左边 小 部 分 */ 

.myRainbow: before { content: ""; display: block; width: 0; height: 0; position: relative; border: 
200px solid transparent; border - left: 200px solid white; } 

/* 以 白色 切 掉 半圆 形 彩虹 的 右边 小 部 分 * / 





第 7 部 分 0 


.myRainbow:after { content: ""; display: block;width: 0; height: 0; border: 200px solid transparent; 
border - right: 200px solid white; position: relative; top: ~ 400px;} 
</style></head> 
<body><div class = "myBox"><div class= "myRainbow"></div></div></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , background: -webkit- radial- 
gradient( # FFFFFF 80px, #FF6633 100px, # FFFFO00 120px, green 140px, #008AFF 160px， 
purple 180px，cyan 200px) 用 于 绘制 多 级 彩虹 ,因为 盒子 的 高 度 等 于 半径 200px, 因 此 显示 半圆 形 的 
多 级 彩虹 ; myRainbow:before{ } 选 择 器 用 于 裁剪 半圆 形 彩 虹 的 左边 部 分 , 它 的 实际 形状 如 图 583-2 的 
灰色 部 分 所 示 , 在 此 实例 中 由 于 设置 其 颜色 为 与 盒子 背景 相同 的 白色 ,用 白色 遮盖 半圆 形 彩 虹 的 左边 
部 分 ; 即 在 视觉 上 产生 被 裁剪 的 效果 。myRainbow: after() 选 择 器 用 于 裁剪 半圆 形 彩虹 的 右边 部 分 ， 
它 的 裁剪 原理 与 myRainbow: before() 选 择 器 的 原理 相同 , 仅 方 向 相反 。 在 CSS3 中 ,before 选择 器 用 
于 在 被 选 元 素 的 内 容 前 面 插入 内 容 , 插 入 内 容 在 content 属性 中 指定 ; after 选择 器 用 于 在 被 选 元 素 的 
内 容 后 面 插入 内 容 , 插 入 内 容 在 content 属性 中 指定 。 在 此 实例 中 仅 使 用 了 两 个 选择 器 的 形状 ,并 没 
有 使 用 其 content 属性 。 

此 实例 的 源 文件 名 是 myHtmlB349. html。 

| - 末 一 交 西 - 6 x 
[DD myHtmlB349 html x 全 SD we x 
“ 3 C fleV/DVmyWorwmyHtml8349 安 三 “ 3 © Dfile///D/myWorW/myHtmlB349 字 三 
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图 583-1 图 583-2 


584 ”使 用 选择 器 将 按钮 拆 分 成 左 、 右 两 部 分 


此 实例 主要 使 用 before 选择 器 添加 内 容 并 设置 样式 ,从 而 实现 将 一 个 按钮 拆 分 成 左 、 右 两 部 分 。 
当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,每 个 按钮 将 被 分 成 左 , 右 两 部 分 , 左 半 部 分 显示 排名 , 右 
半 部 分 显示 书 名 ,如 图 584-1 所 示 ; 如 果 单 击 第 2 个 按钮 . 则 该 按钮 的 左右 两 部 分 将 同时 下 陷 ,如 
图 584-2 所 示 ,然后 弹出 一 个 消息 框 。 单 击 其 他 按钮 将 显示 类 似 的 效果 。 有 关 此 实例 的 主要 代码 
如 下 。 


<!doctype html >< html>< head >< meta charset = "UTF - 8"> 
< style type = "text/css"> 
/=* 设 置 盒子 的 基本 样式 * / 
.myBox { margin: 15px auto Opx auto; width: 350px; } 
/* 设 置 按钮 右 半 部 分 的 样式 * / 
.myBtn { margin: 20px;background — color: #3BB3E0; position:relative; font- size:12px; font - family: 
'Open Sans', sans— serif; text— decoration:none; color:#FFF; padding:10px 10px;border: none; border — 
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left:solid lpx #2AB7EC; margin - left:55px; background- image: - webkit - linear ~ gradient(bottom，rgb 
(44,160,202) 0%, rgb(62,184,229) 100% ); - webkit - border - radius: 0 5px 5px 0; — webkit - box— 
shadow: inset Opx 1px 0px #2AB7EC, Opx 5px 0px 0px #156785, Opx 10px 5px #999; text- align: left;} 

/* 设 置 按钮 左 半 部 分 的 样式 */ 

.myBtn: :before { content:""; width:35px; height:100% ;position:absolute; display: block; padding — 
top:8px; top:0px; left: - 36px; font - size:16px; font - weight: bold; color: # 8FD1EA; text - shadow: 1px 
1px 0px # 07526E; border - right: solid lpx # 07526E; background — image: - webkit - linear - gradient 
(bottom, rgb(10,94,125) 0%, rgb(14,139, 184) 100% ) ; - webkit - border - radius: 5px 0 0 5px; — webkit— 
box - shadow: inset Opx lpx Opx # 2AB7EC, Opx 5px Opx 0px # 032B3A, Opx 10px 5px # 999; text - align: 
center; } 

/ * 设 置 按钮 左 半 部 分 的 内 容 */ 

#al.myBtn: :before { content:"1"; } 

井 a2.myBi before { content:"2"; } 

#a3. myBtn: :before { content:"3"; } 

#a4. myBtn: :before { content:"4"; } 

/* 设 置 单 击 时 的 按钮 样式 * / 

.myBtn:active { top:3px; — webkit — box - shadow: inset Opx 1px Opx #2AB7EC, Opx 2px Opx 0px #156785, 
Opx 5px 3px #999; } 

</style></head> 
<body >< div class = "myBox" align = "center"> 

<divalign= "center"” class= "myBtn” id= "al" onclick ="alert('')">Tomcat 权威 指南 </div> 

<divalign= "center"” class= "myBtn”id="a2”onclick = "alert('')"> MySQL 数据 库 应 用 从 入 门 到 精通 
</div> 

<divalign= "center"” class="myBtn" id= "a3" onclick= "alert('')">Oracle Database 12c 完全 参考 手册 
</div> 

<divalign= "center"” class= "myBtn” id="a4" onclick = "alert('')"> 数 理 统计 与 数据 分 析 </div></div> 
</body></html> 








上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 .myBtn: :before{ } 选 择 器 用 于 在 按钮 
的 前 面 插入 内 容 。 在 此 实例 中 ,由 于 每 个 按钮 的 内 容 均 不 相同 ,因此 可 以 将 myBtn: :before { } 选 择 器 
的 代码 分 成 两 部 分 ,内 容 部 分 单独 定制 ,例如 #al. myBtn::before { content:"1"; } 。 
此 实例 的 源 文件 名 是 myHtmlB371. html。 
百 - o x 百 - o x 
口 myHtmlB371html x 证 DD myHtmlB371html x 
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图 584-1 图 584-2 
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585 ”使 用 localStorage 读 取 或 保存 本 地 数据 


此 实例 主要 通过 使 用 localStorage 实现 在 本 地 硬盘 中 读 取 或 保存 页 面 上 的 数据 。 当 在 浏览 器 中 
显示 该 页 面 时 ,在 “用 户 名 称 :" 和 “用户 密 码 : "文本 框 中 分 别 输入 内 容 , 单 击 “ 在 本 地 保存 数据 ”按钮 ， 
则 在 两 个 文本 框 中 的 内 容 将 被 保存 到 本 地 硬盘 中 ; 重新 刷新 页 面 ,“ 用 户 名 称 :” 和 * 用 户 密码 "文本 框 


呈现 空白 , 单 击 “ 在 本 地 读 取 数 据 " 按 钮 , 则 将 自动 在 "用 户 名 称 :”" 和 “用 户 密码 :" 文 本 框 中 显示 此 前 保 
存 的 内 容 , 如 图 585-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 





口 X 
园 localhost653342/myWor x 


6 3 © BD localhost:63342/myWork/myHt 安 
用 户 名 称 : binluobin 


用 户 密码 : [123456 








|_ 从 本 地 总 取 数 据 | | 在 本 地 保存 数据 | 


图 585-1 
<!doctype html >< html >< head ><meta charset = UTF - 8> 


<script src= "js/jquery -3.1.1.min. js"></script>< script language = "javascript"> 
$ (document). ready(function() { 


$ ("#myBtnRead").click(function() { // 从 本 地 读 取 数 据 
$ ("#myUsername").val( localStorage. myUsername) ; 
$("#myPassword").val( localStorage. myPassword) ; 

D; 


$ ("#myBtnSave").click(function() { // 在 本 地 保存 数据 
var myUsername = $ ("#myUsername"). val(); 

localStorage. myUsername = myUsername; 

var myPassword = $ ("#myPassword").val(); 

localStorage. myPassword = myPassword; 


1D;}); 
</script ></head> 
<body><p><1label > 用 户 名 称 :< input id= "myUsername" type = "text" 
</label ></p> 


maxlength= "20" > 
<p><label > 用 户 密码 :< input id = "myPassword" type = "text" 


maxlength = "20" > 
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</label ></p> 
<p><input type= "button" value= "从 本 地 读 取 数据 " id= "myBtnRead" style = "width: 122px">< input type 
= "button" value= "在 本 地 保存 数据 ”id = "myBtnSave" style= "width: 122px"></p></body></html > 





上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,localStorage 用 于 将 页 面 上 的 指定 数 
据 保存 到 客户 端 本 地 的 硬件 (通常 是 硬盘 ,也 可 以 是 其 他 硬件 设备 ) 设 备 中 ,即使 浏览 器 被 关闭 了 ,该 
数据 仍然 存在 ,下 次 打开 浏览 器 访问 页 面 时 仍然 可 以 继续 使 用 该 数据 。sessionStorage 具有 与 
localStorage 类 似 的 功能 ,sessionStorage 是 将 数据 保存 到 session 对 象 中 。 所 谓 session, 是 指 用 户 在 
浏览 某 个 网 站 时 从 进入 网 站 到 浏览 器 关闭 所 经 过 的 这 段 时 间 , 也 就 是 用 户 浏览 这 个 网 站 所 花费 的 时 
间 。session 对 象 可 以 用 来 保存 在 这 段 时 间 内 所 要 求 保存 的 任何 数据 。 

此 实例 的 源 文件 名 是 myHtmlA074. html。 


586 ”使 用 localStorage 修改 和 保存 表格 数据 


此 实例 主要 通过 使 用 localStorage 实现 在 本 地 硬盘 中 读 取 和 保存 表格 table 中 的 修改 数据 。 当 在 
浏览 器 中 显示 该 页 面 时 , 单 击 从 本 地 读 取 表格 数据 "按钮 ,将 从 本 地 硬盘 中 读 取 数据 并 显示 在 表格 
中 ,如 图 586-1 所 示 ; 任意 修改 表格 的 数据 ,例如 将 “海马 刀 红 酒 开 瓶 器 艾 拉 提 诺 ” 修 改 为 “海马 刀 红 
酒 ”, 单 击 “ 在 本 地 保存 表格 数据 "按钮 , 则 修改 结果 将 被 保存 到 本 地 硬盘 中 ,如 图 586-2 所 示 ; 单 击 “ 清 
空 本 地 数据 ”按钮 , 则 会 删除 保存 在 本 地 硬盘 中 的 数据 修改 结果 。 有 关 此 实例 的 主要 代码 如 下 。 


口 X 
w 国 ,ccalhost63342/mywWor x \ 
二 3 CC Dllocalhost63342/mywWork/myHt 安 三 后 3 © Dlocalhost63342/myWork/myHt 安 | 去 











从 本 地 该 取 表 格 数 据 | | 在 志 地 保存 表格 数据 揭 从 志 地 该 取 表格 数据 | | 在 本 地 保存 表格 数据 | | ”青空 本 地 数据 _ 








<!doctype html >< html >< head >< meta charset = UTF -8> 
< script src= "js/jquery -3.1.1.min. js"></script>< script language = "javascript"> 

// 数 据 源 ,JSON 格式 

var myWarehouse = [{" id": 6，"Merchandise":" 土 老 囊 香 辣 豆 残 "， "Price": "35"}, {"id": 7, 
"Merchandise" : "百草 味 牛肉 干 五 香 牛肉 条 "，"Price" : "20"}, {"id" : 8,"Merchandise" : "五 谷 道场 方便 面 骨 汤 
蔬菜 致 汁 羔 排 面 "，"Price": "15"}, {"id": 9,"Merchandise": “法国 原 瓶 限量 版 红酒 巴士 底 城堡 NOC 级 干 红 葡 
葡 酒 "，"Price" : "15205"}, {"id": 10，"Merchandise" : "海马 刀 红 酒 开 瓶 器 艾 拉 提 诺 "，"Price": "35"}, {"id" 
11，"Merchandise" : " 果 珍 阳光 甜 橙 袋 装 "，"Price" : "20"},{"id": 12, "Merchandise": "七 匹 狼 (SEPTWOLVES) 男 
士 皮带 "，"Price" : "220"},{"id" : 13，"Merchandise":“ 老 榨 坊 四 川 风味 菜 籽 油 "，"Price": "125"}]; 

$ (document). ready(function() { 

$ ("#myBtnRead").click(function() { // 从 本 地 读 取 表 格 数据 
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var myText = "" + localStorage. myText; 
if(myText. length> 20){ // 读 取保 存在 本 地 硬盘 中 的 数据 
var myParent = myText. split(" + "); 
var tab = "< table id='myTable'>"; 
for (i=0; i<myParent. length— 1; i++) { 
var myElement = myParent[i]. split(","); 
tab+= "<tr align='center'>" 
for(j= 0;j<myElement. length; j++ ){ 
tab+= "<td>" + myElement[j] +"</td>" 
} 
tab+= "</tr >"; 
1 
tab+= "</table >"; 
$ ("#div"). html(tab); 
$ ('#myTable'). prop("contenteditable", true); 
}else{// 首 次 访问 网 页 时 采用 示例 数据 
var tab = "< table id= 'myTable'>"; 
$ .each(myWarehouse，function (id，item) /遍历 解析 JSON 
tab+= "<tr align='center'><td>"+ item. id+ "</td>< td>" + item. Merchandise + "</td><td>"+ 
item. Price+ "</td></tr>"; }) 
tab+= "</table >"; 
$ ("#div"). html (tab); 
$ ('#myTable'). prop( "contenteditable", true); 
}1); 
$("#myBtnSave").click(function() { /在 本 地 保存 表格 数据 
var myText = " "7 
for (row =0; row<$ ("#myTable").prop('rows'). length; row++) { 
myText 十 = ""; 
var myCell =$ ("#myTable").find("tr:eq("+ row+ ")").find("td:eq(0)"). text(); 
myText += myCell + ","; 
var myCell =$ ("#myTable").find("tr:eq(" +row+ ")").find("td:eq(1)"). text(); 
myText += myCell + ","; 
var myCell =$ ("#myTable"). find("tr:eq(" + row+")"). find("td:eq(2)"). text(); 
myText += myCell +"+"; 
} 
localStorage. myText = myText; 
1D); 
$("#myBtnClear").click(function() { ”// 清 空 本 地 数据 
localStorage. clear(); 
$ ("#myBtnRead"). trigger("click"); 
1D);}) 
</script > 
< style type= "text/css"> 
td {background - color: lightblue; padding: 5px;} 
table {width: 400px;font - size: 14px; } 
</style></head> 
<body><p>< input type = "button" value = "从 本 地 读 取 表 格 数据 ”id = "myBtnRead" 
style = "width:131px"> 
< input type= "button”value = "在 本 地 保存 表格 数据 ”id = "myBtnSave” 
style = "width:131px"> 
< input type = "button" value = "清空 本 地 数据 ”id= "myBtnClear" 
style = "width:120px"> </p><div id= "div"></div ></body ></html > 
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上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,localStorage 用 于 将 页 面 上 的 指定 数 
据 保存 到 客户 端 本 地 的 硬件 设备 中 ,即使 浏览 器 被 关闭 该 数据 仍然 存在 :下 次 打开 浏览 器 访问 页 面 时 
仍然 可 以 继续 使 用 该 数据 ; $ ('#myTable'). prop("contenteditable" ,true) 用 于 设置 表格 的 每 个 单 
元 格 是 可 编辑 的 ; localStorage. clear() 可 以 清除 此 页 面 在 本 地 硬盘 中 保存 的 所 有 内 容 。 

此 实例 的 源 文件 名 是 myHtmlA075. html。 


587 ”在 本 地 保存 文件 时 申请 和 查询 磁盘 配额 


当 在 计算 机 中 保存 数据 时 ,用 户 首先 需要 向 计算 机 申请 一 定 的 磁盘 配额 ( 即 当 前 应 用 可 以 使 用 的 
磁盘 空间 大 小 ), 此 实例 主要 使 用 window. webkitStoragelnfo. requestQuota ( ) 和 window. 
webkitStoragelnfo. queryUsageAndQuota() 方 法 实现 在 用 户 计算 机 中 申请 磁盘 配额 和 查询 磁盘 配 
额 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 .在 “配额 大 小 (bytes):" 文 本 框 中 输入 磁盘 配额 ,以 
字 节 为 单位 , 单 击 “ 申 请 磁盘 配额 ”按钮 ,将 弹出 如 图 587-1 所 示 的 确认 消息 框 , 单 击 “ 允 许 ” 按 钮 ,成 功 
申请 后 将 在 弹出 的 消息 框 中 显示 当前 应 用 可 使 用 的 磁盘 配额 ,如 图 587-2 所 示 ; 单 击 “查询 磁盘 配额 ” 
按钮 ,也 将 在 弹出 的 消息 框 中 显示 当前 应 用 可 使 用 的 磁盘 配额 。 有 关 此 实例 的 主要 代码 如 下 。 


百 -o x 


‘ 3 © DIlocalhost63342/myWork/myH 安 | 三 








图 localhost63342/myWor x 


配额 大 小 (bytes) :|1534567890 ] 


申请 说 仍 防 医 | 











-oo x 


园 localhost63342/myWor x localhost-63342 上 的 网 页 显示 ; 革 





所 他 y 6334 kV/myH 安 | 三 
© D localhost 2/mywWorkwymyH 安 二 人 


配额 大 小 (bj htp//iocalhest63342 起 要: 。 藉 拿 止 此 页 再 旦 示 9 远 本 


申请 说 人 在 此 设备 上 存储 文件 [na | 


允许 束 止 




















图 587-1 图 587-2 


<!doctype html >< html ><head>< meta charset = UIF -8> 
< script src= "js/jquery - 3.1.1.min. js"></script>< script language = "javascript"> 
function errorHandler(e) { // 磁 盘 配 额 操作 失败 时 执行 的 回调 函数 
Var msg=""; 
switch(e. code) { 
case FileError. QUOTA _ EXCEEDED ERR: 
msg= "文件 系统 所 使 用 的 存储 空间 的 尺寸 超过 磁盘 限额 控制 中 指定 的 空间 尺寸 "7 
break; 
case FileError. NOT_FOUND ERR: 
msg=' 未 找到 文件 或 目录 '; 
break; 
case FileError. SECURITY ERR: 
msg= "操作 不 当 引 起 安全 性 错误 '; 
break; 
case FileError. INVALID MODIFICATION ERR: 
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msg=' 对 文件 或 目录 所 指定 的 修改 处 理 不 能 被 执行 '; 
break; 
case FileError. INVALID STATE ERR: 
msg=' 指 定 的 状态 无 效 '; 
} 
alert(' 当 前 操作 引发 错误 :'+ msg); 
} 
$ (document). ready(function() { 
$ ("#myBtnGet"). click(function() { // 申 请 磁盘 配额 
var mySize= document. getElementById("mySize"). value; 
window. webkitStorageInfo. requestQuota( PERSISTENT, mySize, 
function (grantedBytes) { // 申 请 磁盘 配额 成 功 时 执行 的 回调 函数 
var myInfo= "成 功 申请 磁盘 配额 :" 
Var strBytes, intBytes; 
if (grantedBytes > = 1024 * 1024* 1024) { 
intBytes = Math. floor(grantedBytes/(1024 x* 1024 x* 1024)); 
myInfo+= intBytes + "GB "; 
grantedBytes = grantedBytes % (1024 * 1024 * 1024); 
上 
if (grantedBytes >= 1024x 1024) { 
intBytes = Math. floor( grantedBytes/(1024 * 1024) ) 
myInfo+= intBytes + "MB " 
grantedBytes = grantedBytes (1024 * 1024); 
} 
if (grantedBytes>= 1024) { 
intBytes = Math. floor( grantedBytes/1024); 
myInfo+= intBytes + "KB "; 
grantedBytes = grantedBytes % 1024; 
} 
myInfo += grantedBytes + "Bytes" ; 
alert(myInfo) ; }, errorHandler); 
1); 
$ ("六 myBtnQuery").click(function() { // 查 询 磁 盘 配 额 
window. webkitStorageInfo. queryUsageAndQuota( PERSISTENT, 
function (myUsage, myQuota) { // 查 询 磁盘 配额 信息 成 功 时 执行 的 回调 函数 
var myInfo = "查询 磁盘 配额 信息 成 功 \n 已 用 磁盘 空间 :” 
var strBytes, intBytes; 
if (myUsage > = 1024*1024*1024) { 
intBytes = Math. floor(myUsage/(1024 * 1024 * 1024)); 
myInfo += intBytes + "GB "; 
myUsage = myUsage % (1024 x* 1024 * 1024); 
} 
if (myUsage > =1024*1024) { 
intBytes = Math. floor (myUsage/1024 * 1024); 
myInfo+= intBytes + "MB "; 
myUsage = myUsage % 1024 * 1024; 
| 
if (myUsage > = 1024) { 
intBytes = Math. floor (myUsage/1024); 
myInfo+= intBytes + "KB "; 
myUsage = myUsage % 1024; 
} 
myInfo+= myUsage + "Bytes"; 
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myInfo+= "\n 磁盘 配额 总 空间 :"; 
if (myQuota>=1024*1024*1024) { 
intBytes = Math. floor (myQuota/ (1024 * 1024 * 1024) ) ; 
myInfo+= intBytes + "GB "; 
myQuota = myQuota % (1024 x 1024 * 1024); 
| 
if (myQuota>=1024x*1024) { 
intBytes = Math. floor( myQuota/(1024 * 1024) ) ; 
myInfo += intBytes + "MB "; 
myQuota = myQuota % (1024 * 1024); 
if (myQuota>=1024) { 
intBytes = Math. floor(myQuota/1024); 
myInfo+= intBytes + "KB "; 
myQuota = myQuota % 1024; 
} 
myInfo += myQuota + "Bytes"; 
alert(myJInfo) ; }, errorHandler); 
D2}); 
</script ></head> 
<body ><p>< label > 配额 大 小 (bytes) :< input id= "mySize" type = "text" maxlength = "20" 
value = "1234567890"></label ></p> 
<p>< input type = "button" value = "申请 磁盘 配额 "id = "myBtnGet" style= "width:150px"> 
< input type = "button” value = "查询 磁盘 配额 ”id = "myBtnQuery” style = "width:150px"> </p></body> 
</html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , window, webkitStorageInfo. 
requestQuota() 方 法 用 于 申请 磁盘 配额 ,该 方法 使 用 4 个 参数 ,第 1 个 参数 指定 类 型 ,可 能 值 为 
TEMPORARY 或 PERSISTENT, 当 值 为 TEMPORARY 时 表示 为 临时 数据 申请 磁盘 配额 , 当 值 为 
PERSISTENT 时 表示 为 永久 数据 申请 磁盘 配额 。 如 果 在 用 户 计算 机 中 保存 临时 数据 , 当 用 户 计算 机 
中 其 他 磁盘 空间 不 足 时 可 能 会 删除 此 应 用 在 磁盘 配额 中 的 数据 。 在 磁盘 配额 中 保存 数据 后 , 当 浏览 
器 被 关闭 或 关闭 计算 机 电源 时 这 些 数据 不 会 丢失 。 第 2 个 参数 代表 申请 的 磁盘 空间 的 尺寸 ,单位 为 
byte。 第 3 个 参数 值 为 一 个 函数 ,代表 申请 磁盘 配额 成 功 时 执行 的 回调 函数 。 第 4 个 参数 为 一 个 
FileError 对 象 ,存放 申请 磁盘 配额 失败 时 的 各 种 错误 信息 。 

window. webkitStoragelnfo. queryUsageAndQuota( ) 方 法 用 于 查询 当前 应 用 已 经 申请 的 磁盘 配 
额 ,该 方法 也 有 3 个 参数 ,第 1 个 参数 指定 类 型 ,可 能 值 为 TEMPORARY 或 PERSISTENT, 当 参 数 
值 为 TEMPORARY 时 表示 查询 保存 临时 数据 用 的 磁盘 配额 信息 , 当 参 数值 为 PERSISTENT 时 表示 
查询 保存 永久 数据 用 的 磁盘 配额 信息 。 第 2 个 参数 为 一 个 函数 ,代表 查询 磁盘 配额 信息 成 功 时 执行 
的 回调 函数 ,在 回调 函数 中 可 以 使 用 两 个 参数 ,其 中 第 1 个 参数 值 为 磁盘 配额 中 的 已 用 磁盘 空间 尺 
寸 ,第 2 个 参数 值 表示 磁盘 配额 所 指定 的 全 部 磁盘 空间 尺寸 ,单位 为 byte。 第 3 个 参数 为 一 个 函数 ， 
代表 查询 磁盘 配额 信息 失败 时 执行 的 回调 函数 ,参数 值 为 一 个 FileError 对 象 ,存放 查询 磁盘 配额 信 
息 失 败 时 的 各 种 错误 信息 。 

此 实例 的 源 文件 名 是 myHtmlA076. html。 


588 ”在 本 地 计算 机 中 创建 文件 并 读 / 写 文件 内 容 


此 实例 主要 通过 使 用 getFile() 方 法 执行 文件 操作 ,从 而 实现 在 本 地 计算 机 中 创建 文件 并 读 / 写 文 
件 内 容 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 .在 “文件 名 称 :" 文 本 框 中 输入 文件 名 称 , 例 如 
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“newFile. txt”, 在 “文件 大 小 (byte) :" 文 本 框 中 输入 文件 尺寸 ,例如 “1024” 字 节 , 单 击 “ 创 建文 件 " 按 
钮 ,如 果 此 文件 在 本 地 计算 机 的 沙 箱 中 创建 成 功 , 则 将 在 下 面 显 示 “ 写 文件 操作 结束 ”, 如 图 588-1 所 
示 。 在 “文件 名 称 :" 文 本 框 中 输入 文件 名 称 ,例如 “newFile. txt”, 单 击 “ 读 取 文件 ”按钮 , 则 将 在 弹出 的 
消息 框 中 显示 newFile. txt 文件 在 创建 时 预 置 的 默认 内 容 “ 这 是 在 创建 文件 时 写 人 的 数据 .”。 如 
图 588-2 所 示 。 在 “文件 名 称 :" 文 本 框 中 输入 文件 名 称 , 例 如 “newFile. txt”, 在 “文件 内 容 : "文本 框 中 
输入 内 容 , 例 如 “这 是 正文 ”, 单 击 “ 追 加 数据 "按钮 , 则 将 在 newFile. txt 文件 中 插入 新 的 内 容 ,再 次 单 
击 “ 读 取 文 件 " 按 钮 , 即 可 在 弹出 的 消息 框 中 看 到 追加 的 数据 。 即 使 关闭 计算 机 ,文件 内 容 也 保存 在 硬 
盘 中 。 有 关 此 实例 的 主要 代码 如 下 。 








面 - 6 x 


国 localhort63342/mywor x 由 
3 © DIocalhost53342/myWorkw/myH 安 | 三 
文件 名 称 ，newFie bat 


文件 大 小 (byte)，[1024 
文件 内 容 ，[ 这 是 正文 














| [创建 文 件 着 加 孝 据 “| [” 奖 取 文件 “| 
国 localhost63342/myWo, x 写 文 件 操作 结束 
所 3 CD Iocalhost63342/myWorky/myH 它 至 ee 
文件 名 称 ，[newFile ba 
文件 大 小 (byte)，[1024 这 是 在 他 村 文件 时 本 入 的 数据 
文件 内 容 ，[ 这 是 正文 基 目 比 丙 再 昌 示 对 放生. 


创建 文件 “| 次 加 故 扫 








写 文件 操作 结束 








图 588-1 图 588-2 


<!doctype html >< html >< head ><meta charset = UIF - 8> 
<script src ="js/jquery — 3.1.1.min. js"></script>< script language = "javascript"> 
function createFile(){ // 创 建文 件 
Var mySize = document.. getElementById("mySize"). value; 
window. webkitRequestFileSystem(PERSISTENT, mySize, 
function(fs){ // 请 求 文件 系统 成 功 时 所 执行 的 回调 函数 
var myName = document. getElementById( "myName" ). value; 
fs. root. getFile(myName, {create: true}, 
function(fileEntry) { 
fileEntry. createWriter(function(fileWriter) { 
fileWriter. onwriteend = function(e) { 
document. getElementById( "myInfo") . innerHTML =' 写 文件 操作 结束 '; 
}; 
fileWriter. onerror = function(e) { 
document. getElementById("myInfo"). innerHTML =' 写 文件 操作 失败 : '; 
}; 
var myData = new Blob([' 这 是 在 创建 文件 时 写 信 的 数据 ."]); 
fileWriter. write(myData); }, errorHandler); 
}, errorHandler); 
}, errorHandler ) 7 
} 
function readFile(){ // 读 取 文 件 
var mySize = document. getElementById("mySize"). value; 
window. webk itRequestFileSystem(PERSISTENT, mySize, 
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function(fs){ 7/ 请求 文件 系统 成 功 时 所 执行 的 回调 函数 
var myName = document. getElementById( "myName" ). value; 
fs. root. getFile(myName, {create:false}, 


function(filegntry) { // 获 取 文件 对 象 成 功 时 所 执行 的 回调 函数 
fileEntry. file( 
function(file) { // 获 取 文件 成 功 时 所 执行 的 回调 函数 


var myReader = new FileReader( ); 
myReader. onloadend = function(e) { 
alert(this. result); 
}; 
myReader. readAsText (file); },errorHandler); 
}, errorHandler); 
},errorHandler); 
} 
function addData(){ // 追 加 数据 
var mySize= document. getElementById("mySize"). value; 
window. webkitRequestFileSystem(PERSISTENT, mySize, 
function(fs){ // 请 求 文件 系统 成 功 时 所 执行 的 回调 函数 
var myName = document. getElementById( "myName" ). value; 
fs. root. getFile(myName, {create:false}, 
function(fileEntry) { 
fileEntry. createWriter(function(fileWriter) { 
fileWriter. onwriteend = function(e) { 
document. getElementById("myInfo" ). innerHTML=' 向 文件 追加 数据 操作 成 功 '; 
}; 
fileWriter. onerror = function(e) { 
document. getElementById("myInfo"). innerHTML = ' 向 文件 追加 数据 操作 失败 : '， 
}; 
fileWriter. seek(fileWriter. length); 
var myData = new Blob([ document. getElementById( "myData" ). value]); 
fileWriter. write(myData); 
}, errorHandler); }, errorHandler); 
},errorHandler); 
} 
function errorHandler( e) 
{// 请 求 文件 系统 失败 时 所 执行 的 回调 函数 
switch(e. code) { 
Case FileError. QUOTA_EXCEEDED ERR: 
msg= "文件 系统 所 使 用 的 存储 空间 的 尺寸 超过 磁盘 限额 控制 中 指定 的 空间 尺寸 '; 
break; 
case FileError. NOT_ FOUND ERR: 
msg=' 未 找到 文件 或 目录 '; 
break; 
case FileError. SECURITY ERR: 
msg= "操作 不 当 引 起 安全 性 错误 '; 
break; 
case FileError. INVALID MODIFICATION_ERR: 
msg=' 对 文件 或 目录 所 指定 的 操作 不 能 被 执行 '; 
break; 
case FileError. INVALID STATE_ ERR: 
msg= "指定 的 状态 无 效 '; 
}; 
document. getElementById("myInfo" ). innerHTML = "当前 操作 引发 错误 : " + msg; 
} 
</script ></head> 
<body > 文件 名 称 : < input type = "text" id = "myName" value = "myFile. txt"><br/> 
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文件 大 小 (byte): < input type = "text" id= "mySize" value="1024"/><br/> 

文件 内 容 : < input type = "text”id = "myData" value = "这 是 正文 "/><br/> 

<p>< input type = "button" value = "创建 文件 " onclick = "createFile()" style= "width: 100px">< input 
type = "button" value = "追加 数据 ”onclick = "addData()" style = "width: 100px">< input type = "button" 
value = " 读 取 文件 " onclick = "readFile()"style= "width: 100px"></p>< output id = "myInfo" ></output > 
</body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,getFile() 方 法 用 于 访问 文件 ,只 有 在 
访问 成 功 后 才能 在 其 回调 函数 中 通过 createWriter() 方 法 创建 文件 和 写 和 人 数据 ,通过 FileReader 读 取 
文件 内 容 。getFile() 方 法 有 4 个 参数 ,第 1 个 参数 是 一 个 字符 串 值 ,代表 需要 创建 或 获取 的 文件 名 ; 
第 2 个 参数 是 一 个 自 定义 对 象 ,在 创建 文件 时 必须 将 该 对 象 的 create 值 设置 为 true, 在 读 取 文件 时 必 
须 将 该 对 象 的 create 值 设置 为 false, 在 创建 文件 时 如 果 文 件 已 经 存在 , 则 覆盖 该 文件 ,如果 该 文件 已 
经 存在 且 被 使 用 排他 方式 打开 , 则 抛 出 错误 ; 第 3 个 参数 是 一 个 函数 ,表示 读 取 文件 或 创建 文件 成 功 
后 执行 的 回调 函数 ,在 回调 函数 中 可 以 使 用 一 个 参数 .参数 值 是 一 个 FileEntry 对 象 ,代表 创建 或 读 取 
成 功 的 文件 ; 第 4 个 参数 是 一 个 函数 ,表示 读 取 文件 或 创建 文件 失败 时 执行 的 回调 函数 ,参数 值 是 一 
个 FileError 对 象 , 其 中 存放 了 读 取 文件 或 创建 文件 失败 时 的 各 种 错误 信息 。 

此 实例 的 源 文件 名 是 myHtmlA077. html。 


589 ”将 本 地 计算 机 中 的 多 个 文件 复制 到 沙 箱 系统 


此 实例 主要 通过 使 用 FileWriter 对 象 的 write( ) 方 法 实现 将 本 地 计算 机 的 多 个 文件 复制 到 沙 箱 
系统 中 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 , 单 击 * 选 择 文件 按钮 ,然后 在 弹出 的 “打开 ”对 
话 框 中 选择 本 地 计算 机 的 多 个 文件 ,如 图 589-1 所 示 , 单 击 “ 打 开 (O) ”按钮 返回 , 则 选择 的 多 个 本 地 计 
算 机 文件 将 被 复制 到 受 浏览 器 保护 的 沙 箱 文件 系统 中 ,如 图 589-2 所 示 ; 在 “文件 名 称 :" 文 本 框 中 输 
和 人 刚才 复制 的 任意 文件 名 称 ,例如 “myHtmlA008. html”, 单 击 “ 读 取 文件 ”按钮 , 则 将 在 弹出 的 消息 框 
中 显示 保存 在 沙 箱 中 的 myHtmlA008. html 文件 的 内 容 。 即 使 关闭 计算 机 ,复制 的 文件 内 容 也 保存 
在 沙 箱 文件 系统 中 。 有 关 此 实例 的 主要 代码 如 下 。 
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图 589-1 


人 HTML5+CSS3 炫 酷 应 用 实例 集锦 
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文件 名 称 ，JmyFile bd 
区 表册 |5 个 文件 读 取 文件 | 


复制 文件 名 为 ，myHtmlA007. html 
复制 文件 名 为 ，myHtmlA008. html 
复制 文件 名 为 ，myHtmlA004. html 
复制 文件 名 为 ，myHtmlA005. html 
复制 文件 名 为 ，myHtmlA006. html 








图 589-2 


<!doctype html ><html ><head><meta charset = UIF -8> 
<script src= "js/jquery -3.1.1.min. js"></script >< script language = "javascript"> 
function copyF ile( ){ // 复 制 文件 
var myFiles = document. getElementById( "myFile"). files; 
window. webkitRequestFileSystem(PERSISTENT, 1024, 
function(fs){ // 请 求 文件 系统 成 功 时 所 执行 的 回调 函数 
for(var i=0, myFile; myFile= myFiles[i]; ++i){ 
(function(f) { 
fs. root. getFile(myFile. name, {create: true}, function(fileEntry) { 
fileEntry. createWriter(function(fileWriter) { 
fileWriter. onwriteend = function(e) { 
document. getElementById( "myInfo"). innerHTML += 
"复制 文件 名 为 : '+ ff. name + '<br/>'; 
}; 
fileWriter. onerror = errorHandler 
fileWriter. write(f); 
}, errorHandler); }, errorHandler); })(myFile); } 


},errorHandler); 
} 
function readFile( ){ // 读 取 文 件 
window. webkitRequestFileSystem(PERSISTENT, 1024, 
function(fs){ // 请 求 文件 系统 成 功 时 所 执行 的 回调 函数 


var myName = document. getElementById( "myName" ) . value; 
fs. root. getFile(myName, {create:false}, 


function(fileEntry) { // 获 取 文件 对 象 成 功 时 所 执行 的 回调 函数 
fileEntry. file( 
function(file) { // 获 取 文件 成 功 时 所 执行 的 回调 函数 


var myReader = new FileReader( ); 
myReader. onloadend = function(e) { 
alert(this. result); 
B; 
myReader. readAsText (file); 
},errorHandler); 
}, errorHandler); 
},errorHandler); 
1 
function errorHandler(e) 
{// 请 求 文件 系统 失败 时 所 执行 的 回调 函数 
switch(e. code) { 
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case FileError. QUOTA_EXCEEDED ERR: 
msg=' 文 件 系统 所 使 用 的 存储 空间 的 尺寸 超过 磁盘 限额 控制 中 指定 的 空间 尺寸 '; 
break; 
case FileError. NOT_FOUND ERR: 
msg=' 示 找到 文件 或 目录 '; 
break; 
case FileError. SECURITY ERR: 
msg=' 操 作 不 当 引 起 安全 性 错误 '; 
break; 
Case FileError. INVALID MODIFICATION ERR: 
msg=' 对 文件 或 目录 所 指定 的 操作 不 能 被 执行 '; 
break; 
case FileError. INVALID STATE ERR: 
msg=' 指 定 的 状态 无 效 '; 
}; 
document. getElementById( "myInfo" ) . innerHTML = "当前 操作 引发 错误 : "+ msg; 
} 
</script ></head> 
<body> 
文件 名 称 : < input type = "text" id = "myName" value = "myFile. txt"><br/> 
<p><input type = "file" id = "myFile" onchange = "copyFile()" multiple /> 
< input type = "button" value = " 读 取 文 件 " onclick = "readFile()" 
style = "width:100px"></p> 
<output id = "myInfo" ></output ></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,FileWriter 对 象 的 write( ) 方 法 执行 
将 复制 的 文件 写 人 沙 箱 系 统 中 的 动作 。 在 FileSystem API 中 , 当 需 要 将 磁盘 上 的 文件 复制 到 受 浏 览 
器 沙 箱 保 护 的 文件 系统 中 时 ,可 以 先 使 用 file 对 象 引用 磁盘 上 的 文件 ,然后 将 其 写 入 文件 系统 中 , 例 
如 fileWriter. write(file) 。FileWriter 对 象 的 write() 方 法 只 有 一 个 参数 ,参数 值 是 一 个 Blob 对 象 , 代 
表 需 要 写 人 的 二 进 制 数据 。 在 HTML5 中 ,file 对 象 继承 Blob 对 象 ,所 以 在 write( ) 方 法 中 可 以 使 用 
file 对 象 作为 参数 ,表示 使 用 某 个 文件 中 的 原始 数据 进行 写 文件 操作 。 

此 实例 的 源 文件 名 是 myHtmlA078. html。 


590 ”删除 受 浏览 器 保护 的 沙 箱 系 统 中 的 指定 文件 


此 实例 主要 通过 使 用 FileEntry 对 象 的 remove() 方 法 实现 删除 本 地 计算 机 中 受 浏览 器 保护 的 沙 
箱 文件 系统 中 的 指定 文件 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,在 “文件 名 称 :" 文 本 框 中 输 
入 任意 的 文件 名 称 ,例如 “myFile. txt”, 单 击 “ 创 建文 件 " 按 钮 . 则 将 在 沙 箱 系统 中 创建 该 文件 ; 在 “ 文 
件 名 称 :" 文 本 框 中 输入 刚才 创建 的 文件 名 称 ,例如 “myFile. txt”, 单 击 * 删 除 文件 "按钮 , 则 将 从 沙 箱 系 
统 中 删除 该 文件 ,如 图 590-1 所 示 。 如 果 在 沙 箱 系统 中 不 存在 指定 的 文件 , 则 单 击 * 删 除 文件 "按钮 将 
报 出 错 信息 ,如 图 590-2 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 





<!doctype html >< html>< head><meta charset = UTF - 8> 
< script src= "js/jquery- 3.1.1.min. js"></script>< script language = "javascript"> 
function createFile(){ // 创 建文 件 
var mySize = document. getElementById("mySize"). value; 
window. webkitRequestFileSystem(PERSISTENT, mySize, 
function(fs){ // 请 求 文件 系统 成 功 时 所 执行 的 回调 函数 
var myName = document. getElementById( "myName"). value; 
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fs. root. getFile(myName, {create: true}, 
function(fileEntry) { 
fileEntry. createWriter(function(fileWriter) { 
fileWriter. onwriteend = function(e) { 
document. getElementById( "myInfo") . innerHTML =' 写 文件 操作 结束 '; 
}; 
fileWriter. onerror = function(e) { 
document. getElementById("myInfo"). innerHTML =' 写 文件 操作 失败 :'; 
}; 
var myData = new Blob([' 这 是 在 创建 文件 时 写 入 的 数据 .']); 
fileWriter. write(myData); 
}, errorHandler); 
}, errorHandler); 
}, errorHandler ); 
} 
function errorHandler(e) 
{// 请 求 文件 系统 失败 时 所 执行 的 回调 函数 
Switch(e. code) { 
case FileError. QUOTA EXCEEDED ERR: 
msg=' 文 件 系 统 所 使 用 的 存储 空间 的 尺寸 超过 磁盘 限额 控制 中 指定 的 空间 尺寸 '; 
break; 
case FileError. NOT_FOUND_ERR: 
msg=' 示 找到 文件 或 目录 '; 
break; 
Case FileError. SECURITY ERR: 
msg=' 操 作 不 当 引 起 安全 性 错误 '; 
break; 
case FileError. INVALID MODIFICATION ERR: 
msg=' 对 文件 或 目录 所 指定 的 操作 不 能 被 执行 '; 
break; 
case FileError. INVALID STATE ERR: 
msg=' 指 定 的 状态 无 效 '; 
用 
document. getElementById("myInfo" ) . innerHTML = "当前 操作 引发 错误 : " + msg; 
} 
function deleteFile(){ // 删 除 文件 
var mySize = document.getElementById("mySize").value; 
window. webkitRequestFileSystem(PERSISTENT, mySize, 
function(fs){ // 请 求 文件 系统 成 功 时 所 执行 的 回调 函数 
Var myName = document. getElementById( "myName" ). value; 
fs. root. getFile(myName, { create: false }, 


function(fileEntry){ // 获 取 文 件 成 功 时 所 执行 的 回调 函数 
fileEntry. remove( // 删 除 文件 成 功 时 所 执行 的 回调 函数 
function() { 


document. getElementById("myInfo"). innerHTML = 
fileEntry.name+ ' 文 件 被 成 功 删除 '; 


}, errorHandler); }, errorHandler);},errorHandler); 
’ 
</script ></head> 
<body > 文件 名 称 : < input type = "text" id = "myName" value = "myFile. txt"><br/> 
文件 大 小 (byte) : < input type= "text" id = "mySize" value= "1024"/><br/> 
<p>< input type ="button” value= "创建 文件 " onclick = "createFile()" 
style = "width:150px"> 
< input type = "button” value = "删除 文件 ” onclick = "deleteFile()" 
style = "width:150px"></p><output id= "myInfo" ></output ></body></html > 
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上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,FileEntry 对 象 (代表 一 个 文件 ) 的 
remove() 方 法 使 用 两 个 参数 ,分 别 为 删除 文件 成 功 时 执行 的 回调 函数 和 删除 文件 失败 时 执行 的 回调 
函数 。 即 : 


fileEntry. remove( 





function(){ // 删 除 文件 成 功 时 执行 的 回调 函数 
// 代 码 略 
},errorHandler // 删 除 文件 失败 时 执行 的 回调 函数 


); 
此 实例 的 源 文件 名 是 myHtmlA079. html。 
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591 在 本 地 沙 箱 文件 系统 中 创建 目录 及 其 文件 


此 实例 主要 通过 使 用 getDirectory() 方 法 实现 在 本 地 沙 箱 文件 系统 中 创建 目录 并 在 该 目录 下 创 
建文 件 及 读 取 文 件 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,在 “目录 名 称 :" 文 本 框 中 输入 目录 
名 称 ,例如 *myDirectory”, 单 击 * 创 建 目 录 ” 按 钮 ,如 果 此 目录 在 本 地 计算 机 的 沙 箱 中 创建 成 功 , 则 将 
在 下 面 显 示 目 录 完 整 路 径 及 目录 名 等 信息 ,如 图 591-1 所 示 。 在 “文件 名 称 :" 文 本 框 中 输入 文件 名 称 ， 
例如 “newFile. txt”, 在 “文件 大 小 (byte): "文本 框 中 输入 文件 尺寸 ,例如 *1024” 字 节 , 单 击 “ 创 建文 件 ” 
按钮 ,如 果 此 文件 在 此 目录 中 创建 成 功 , 则 将 在 下 面 显 示 “ 写 文件 操作 结束 ”。 在 “文件 名 称 : "文本 框 
中 输入 文件 名 称 ,例如 刚才 创建 的 文件 “newFile. txt”. 单 击 * 读 取 文件 ”按钮 , 则 将 在 弹出 的 消息 框 中 
显示 newFile. txt 文件 在 创建 时 预 置 的 默认 内 容 “ 这 是 在 子 目录 创建 文件 时 写 人 的 数据 ,”, 如 图 591-2 
所 示 。 即 使 关闭 计算 机 ,文件 内 容 也 保存 在 硬盘 中 。 有 关 此 实例 的 主要 代码 如 下 。 
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<!doctype html ><html >< head>< meta charset = UIF -8> 
<script src= "js/jquery -3.1.1.min.js"></script >< script language = "javascript"> 
function createDirectory(){ // 创 建 目 录 
var mySize = document.. getElementById("mySize"). value; 
window. webkitRequestFileSystem(PERSISTENT, nySize, 
function(fs){ // 请 求 目录 系统 成 功 时 所 执行 的 回调 函数 
var myDirectory = document. getElementById( "myDirectory") .value; 
fs. root. getDirectory(myDirectory, { create: true }, 
function(dirEntry){ // 创 建 目录 成 功 时 所 执行 的 回调 函数 
var myInfo = "目录 完整 路 径 : " + dirEntry. fullPath+ "<br>"; 
myInfo+= "目录 名 : "+ dirEntry. name + "<br>"; 
document. getElementById("myInfo" ). innerHTML = myInfo; 
}, errorHandler); }, errorHandler); 
} 
function createFile(){ // 创 建文 件 
var mySize= document.getElementById("mySize" ). value; 
var myDirectory = document. getElementById( "myDirectory"). value; 
window. webkitRequestFileSystem(PERSISTENT, mySize, 
function(fs){ // 请 求 文件 系统 成 功 时 所 执行 的 回调 函数 
var myName = document. getElementById("myName" ). value; 
fs. root. getFile(myDirectory + "/" + myName, {create: true}, 
function(filegntry) { 
fileEntry. createWriter(function(fileWriter) { 
fileWriter.onwriteend = function(e) { 
document. getElementById("myInfo"). innerHTML =' 写 文件 操作 结束 '; 
}; 
fileWriter.onerror = function(e) { 
document. getElementById( "myInfo"). innerHTML =' 写 文件 操作 失败 :'; 
}; 
var myData = new Blob([' 这 是 在 子 目 录 创建 文件 时 写 人 的 数据 。"]); 
fileWriter.write(myData) ; 
}, errorHandler); }, errorHandler); }, errorHandler ); 
} 
function readFile(){ // 读 取 文 件 
Var mySize = document. getElementById( "mySize"). value; 
var myDirectory = document. getElementById( "myDirectory").value; 
window. webkitRequestFileSystem(PERSISTENT, mySize, 
function(fs){ // 请 求 文件 系统 成 功 时 所 执行 的 回调 函数 
Var myName = document. getElementById( "myName" ). value; 
fs. root. getFile(myDirectory+ "/" + myName, {create:false}, 


function( fileEntry) { // 获 取 文件 对 象 成 功 时 所 执行 的 回调 函数 
fileEntry. file( 
function(file) { // 获 取 文 件 成 功 时 所 执行 的 回调 函数 


var myReader = new FileReader( ); 
myReader. onloadend = function(e) { 
alert(this. result); 
}; 
myReader. readAsText (file); },errorHandler); }, errorHandler); 
},errorHandler); 
} 
function errorHandler(e) 
{// 请 求 文件 系统 失败 时 所 执行 的 回调 函数 
switch(e.code) { 
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case FileError. QUOTA_ EXCEEDED ERR: 
msg=' 文 件 系 统 所 使 用 的 存储 空间 的 尺寸 超过 磁盘 限额 控制 中 指定 的 空间 尺寸 '; 
break; 
case FileError. NOT_FOUND_ERR: 
msg=' 未 找到 文件 或 目录 '; 
break; 
case FileError. SECURITY_ ERR: 
msg=' 操 作 不 当 引 起 安全 性 错误 '; 
break; 
case FileError. INVALID MODIFICATION ERR: 
msg=' 对 文件 或 目录 所 指定 的 操作 不 能 被 执行 '; 
break; 
case FileError. INVALID_STATE ERR: 
msg=' 指 定 的 状态 无 效 '; 
}; 
document. getElementById("myInfo"). innerHTML = "当前 操作 引发 错误 : " + msg; 
} 
</script ></head> 
<body > 目录 名 称 : < input type = "text" id = "myDirectory" value = "myDirectory"” 
style = "width:300px"><br/> 
文件 名 称 : < input type= "text" id = "myName”value = "myFile.txt” 
style = "width:300px"><br/> 
文件 大 小 (byte) : < input type= "text" id = "mySize" value= "1024" 
style = "width:252px"/>< br/> 
<p>< input type= "button” value= "创建 目录 " onclick = "createDirectory()" 
style= "width:122px"> 
< input type= "button” value= "创建 文件 "onclick = "createFile()" 
style = "width:122px"> 
< input type = "button" value= " 读 取 文件 ” onclick = "readFile()" 
style = "width:122px"></p><output id = "myInfo" ></output ></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,getDirectory() 方 法 用 于 创建 子 目 
录 。 在 FileSystem API 中 ,可 以 使 用 DirectoryEntry 对 象 ( 代 表 文 件 系统 中 的 一 个 目录 ) 的 
getDirectory() 方 法 在 一 个 目录 中 创建 或 获取 子 目录 。getDirectory() 方 法 有 4 个 参数 ,第 1 个 参数 是 
一 个 字符 串 值 ,代表 需要 创建 或 获取 的 子 目 录 名 ; 第 2 个 参数 是 一 个 自 定义 对 象 , 当 创建 目录 时 必须 
将 该 对 象 的 create 属性 值 设 定 为 true, 当 获取 目录 时 必须 将 该 对 象 的 create 属性 值 设 定 为 false; 第 3 
个 参数 是 一 个 函数 ,代表 获取 子 目 录 或 创建 子 目录 成 功 时 执行 的 回调 函数 ,在 回调 函数 中 可 以 使 用 一 
个 参数 ,参数 值 是 一 个 DirectoryEntry 对 象 ,代表 成 功 创建 或 获取 的 子 目 录 ; 第 4 个 参数 值 是 一 个 函 
数 ,代表 获取 子 目录 或 创建 子 目 录 失 败 时 执行 的 回调 函数 ,参数 值 是 一 个 FileError 对 象 ,其 中 存放 了 
获取 子 目 录 或 创建 子 目录 失败 时 的 各 种 错误 信息 。 

此 实例 的 源 文件 名 是 myHtmlA080. html。 


592 在 沙 箱 系统 中 使 用 递归 函数 创建 多 级 目录 


此 实例 主要 使 用 递归 函数 调用 getDirectory() 方 法 ,从 而 实现 在 本 地 沙 箱 文件 系统 中 创建 多 级 目 
录 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 .在 “多 级 目录 名 称 :" 文 本 框 中 输入 多 级 目录 名 称 ， 
例如 “重庆 市 / 渝 北 区 / 宝 圣 湖 街道 ”, 单 击 “ 创 建 多 级 目录 ”按钮 ,如 果 此 多 级 目录 在 本 地 计算 机 的 沙 箱 
文件 系统 中 创建 成 功 , 则 将 在 下 面 显示 目录 完整 路 径 及 目录 名 等 信息 ,如 图 592-1 所 示 。 在 “文件 名 
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称 :" 文 本 框 中 输入 文件 名 称 ,例如 “myFile. txt”, 在 “文件 大 小 (byte) :文本 框 中 输入 文件 尺寸 ,例如 
“1024? 字 节 , 单 击 “创建 文件 ”按钮 ,如 果 此 文件 在 此 多 级 目录 的 最 底层 目录 中 创建 成 功 , 则 将 在 下 面 
显示 “ 写 文 件 操作 结束 ”"。 在 “文件 名 称 : ”文本 框 中 输入 文件 名 称 .例如 刚才 创建 的 文件 “myFile. txt”， 
单 击 “ 读 取 文件 "按钮, 则 将 在 弹出 的 消息 框 中 显示 myFile. txt 文件 在 创建 时 预 置 的 默认 内 容 “ 这 是 在 
子 目 录 创 建文 件 时 写 入 的 数据 .”, 即 使 关闭 计算 机 .文件 内 容 也 保存 在 硬盘 中 。 有 关 此 实例 的 主要 代 
码 如 下 。 





= 到 
国 lecalhost63342/myWor x 
所 3 © Dlocalhost63342/myWork/myHtm 窜 三 








多 级 目录 名 称 ，| 重 庆 市 / 注 北 区 / 宝 圣 湖人 街道 
文件 名 称 :myFile bd 
文件 大 小 (byte): [1024 


| 创 汗 多 织 目 杂 | | 。 创建 文件 “| | 。 次 取 文 件 | 
目录 完整 路 径 ，/ 重 庆 市 











目录 完整 路 径 ，/ 重 庆 市 / 渝 北 区 / 宝 圣 湖 街道 
目录 名 ， 宝 圣 湖 街道 目录 已 创建 








<! doctype html >< html>< head ><meta charset = UTF -8> 
< script src= "js/jquery -3.1.1.min. js"></script>< script language = "javascript"> 
function createDirectory(){ // 创 建 多 级 目录 
Var myPath = document. getElementById("myDirectory"). value; 
window. webkitRequestFileSystem(PERSISTENT, 1024, 
function(fs){ // 请 求 文件 系统 成 功 时 所 执行 的 回调 函数 
// 使 用 递归 函数 创建 每 一 级 子 目录 
createDir(fs. root，myPath. split('/')); 
},errorHandler); 
是 
function createDir(rootDirEntry, folders){ ”// 创 建 多 级 目录 时 使 用 的 递归 函数 
// 将 "/foo/.//bar" 之 类 的 目录 名 中 的 './' 或 '/' 去 除 
证 (folders[0] =='.'|| folders[0] =="') { 
folders = folders. slice(1); 
} 
rootDirEntry. getDirectory(folders[0], {create: true}, 
function(dirEntry) { // 创 建 目录 成 功 时 所 执行 的 回调 函数 
证 (folders. length) { 
var myInfo = "目录 完整 路 径 : "+ dirEntry. fullPath+ "<br>"; 
myInfo+= "目录 名 : "+ dirEntry.name+ "目录 已 创建 < br/>"; 
document. getElementById( "myInfo"). innerHTML += myInfo; 
// 调 用 递归 函数 创建 该 目录 下 的 子 目 录 
createDir(dirEntry, folders. slice(1)); 
} 
}, errorHandler); 
上 
function createFile(){ //( 在 最 底层 的 目录 中 ) 创 建文 件 
1 
function readFile(){ //( 在 最 底层 的 目录 中 ) 读 取 文件 
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1 
function errorHandler(e) 
{// 请 求 文件 系统 失败 时 所 执行 的 回调 函数 
switch(e. code) { 
case FileError. QUOTA_EXCEEDED ERR: 
msg=' 文 件 系 统 所 使 用 的 存储 空间 的 尺寸 超过 磁盘 限额 控制 中 指定 的 空间 尺寸 '; 
break; 
case FileError. NOT_ FOUND ERR: 
msg=' 示 找到 文件 或 目录 '; 
break; 
case FileError. SECURITY ERR: 
msg=' 操 作 不 当 引 起 安全 性 错误 '; 
break; 
case FileError. INVALID MODIFICATION_ERR: 
msg=' 对 文件 或 目录 所 指定 的 操作 不 能 被 执行 '; 
break; 
case FileError. INVALID STATE_ ERR: 
msg=' 指 定 的 状态 无 效 '; 
上 
document. getElementById("myInfo"). innerHTML = "当前 操作 引发 错误 : "+ msg; 
} 
</script ></head > 
<body > 多 级 目录 名 称 : < input type = "text”id= "myDirectory”value = "重庆 市 / 渝 北 区 / 宝 圣 湖 街道 ”style = 
"width:268px">< br/> 
文件 名 称 : < input type = "text" id= "myName" value = "myFile. txt" 
style = "width:300px"><br/> 
文件 大 小 (byte) : < input type= "text" id = "mySize" value= "1024" 
style = "width:252px"/>< br/> 
<p>< input type = "button" value = "创建 多 级 目录 "onclick = "createDirectory()" 
style = "width:155px"> 
< input type= "button” value = "创建 文件 ” onclick = "createFile()" 
style = "width:105px"> 
< input type = "button" value = " 读 取 文 件 " onclick = "readFile()" 
style = "width:105px"></p><output id= "myInfo" ></output></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , 自 定义 递归 函数 function createDir 
(rootDirEntry, folders) 主 要 用 于 实现 分 级 创建 多 级 目录 。 因 为 在 创建 类 似 “ 重 庆 市 / 渝 北 区 / 宝 圣 湖 
街道 ”这 种 多 级 目录 时 ,如 果 文 件 系统 中 不 存在 “ 渝 北 区 "目录. 则 直接 创建 该 日 录 下 的 “ 宝 圣 湖 街道 ” 
目录 ,将 会 抛 出 错误 ,所 以 实例 采用 递归 创建 多 级 目录 的 方式 来 确保 多 级 日 录 的 层级 关系 ,以 避免 发 
生 错 误 。 

此 实例 的 源 文 件 名 是 myHtmlA081. html。 


593 ”获取 沙 箱 根 目录 下 的 子 目录 及 其 文件 


此 实例 主要 通过 使 用 DirectoryEntry 对 象 的 readEntries() 方 法 实现 获取 沙 箱根 目录 下 的 子 目录 
及 其 文件 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,在 “目录 名 称 :" 文 本 框 中 输入 目录 名 称 , 例 
如 “myDirectory”, 单 击 “ 创 建 目 录 ” 按 钮 ,如 果 此 目录 在 本 地 计算 机 的 沙 箱 中 创建 成 功 , 则 将 在 下 面 显 
示 目 录 完 整 路 径 及 目录 名 等 信息 。 在 “文件 名 称 :" 文 本 框 中 输入 文件 名 称 ,例如 "newFile. txt”, 在 “ 文 
件 大 小 (byte) : "文本 框 中 输入 文件 尺寸 ,例如 *1024” 字 节 , 单 击 “ 创 建文 件 " 按 钮 ,如 果 文 件 在 此 目录 
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中 创建 成 功 , 则 将 在 下 面 显示 “ 写 文件 操作 结束 ”。 单 击 “ 读 取 目 录 内 容 " 按 钮 . 则 将 在 下 面 显 示 沙 箱根 
目录 下 的 所 有 文件 和 目录 ,包括 刚才 创建 的 目录 和 文件 ,如 图 593-1 所 示 。 即 使 关闭 计算 机 ,文件 也 保 
存在 硬盘 中 。 有 关 此 实例 的 主要 代码 如 下 。 
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目录 名 称 ，|MyFolder | 


目录 ，MyFolder 

目录 ， 北京 市 

目录 ， 上 海 市 
重庆 市 


目录 ,myDirectory 
文件 ，newfile. txt 
文件 ，myHtmlA008. html 


文件 ，myHitmlA007, html 








图 593-1 


<!doctype html ><html >< head >< meta charset = UIF -8> 
<script src= "js/jquery- 3.1.1.min. js"></script >< script language = "javascript"> 


function readDirectory( ){ // 读 取 目 录 内 容 
window. webkitRequestFileSystem(PERSISTENT, 1024, 
function(fs){ // 请 求 文件 系统 成 功 时 所 执行 的 回调 函数 


var myReader = fs. root. createReader(); 
var myEntries=[]; 
// 多 次 调用 readEntries( ) 方 法 直到 不 再 读 出 目录 或 文件 
var readEntries = function() { 
myReader. readEntries ( 
function(results) { // 读 取 目 录 成 功 时 执行 的 回调 函数 
if (!results. length) { 
listResults(myEntries. sort()); 
} 
else { 
myEntries = myEntries. concat (toArray(results)); 
readEntries( ); 
} },errorHandler); 
}; readEntries(); }, errorHandler); 
} 
function listResults(entries) { 
var type; 
entries. forEach(function(entry, i) { 
if(entry. isFile) 
type= "文件 : "+ entry. name; 
else 
type= "目录 : " + entry. name; 
document. getElementById( "myInfo"). innerHTML += type + "<br/>"; 
D);} 
function toArray(list) { 
return Array. prototype. slice.call(list || [], 0); 
} 
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function errorHandler(e) 
{// 请 求 文件 系统 失败 时 所 执行 的 回调 函数 
switch(e.code) { 
case FileError. QUOTA EXCEEDED ERR: 
msg=' 文 件 系 统 所 使 用 的 存储 空间 的 尺寸 超过 磁盘 限额 控制 中 指定 的 空间 尺寸 '; 
break; 
case FileError. NOT_FOUND ERR: 
msg=' 未 找到 文件 或 目录 '; 
break; 
case FileError. SECURITY ERR: 
msg=' 操 作 不 当 引 起 安全 性 错误 '; 
break; 
case FileError. INVALID MODIFICATION ERR: 
msg=' 对 文件 或 目录 所 指定 的 操作 不 能 被 执行 '; 
break; 
Case FileError. INVALID STATE ERR: 
msg=' 指 定 的 状态 无 效 '; 
}; 
document. getElementById("myInfo" ). innerHTML = "当前 操作 引发 错误 : "+ msg; 
} 


function createDirectory( ){ // 创 建 目录 
} 
function createFile(){ // 创 建文 件 
} 

</script ></head> 


<body > 目录 名 称 : < input type = "text" id = "myDirectory" value = "MyFolder" 
style = "width:300px">< br/> 
文件 名 称 : < input type = "text" id = "myName" value = "myFile. txt" 
style = "width:300px"><br/> 
文件 大 小 (byte) : < input type= "text" id = "mySize" value= "1024" 
style = "width:252px"/>< br/> 
<p>< input type="button”value= "创建 目录 " onclick = "createDirectory()" 
style = "width:155px"> 

< input type = "button” value= "创建 文件 " onclick = "createFile()" 
style = "width:105px"> 

< input type = "button"” value = " 读 取 目录 内 容 ” onclick = "readDirectory()" 
style = "width:105px"></p><output id = "myInfo" ></output></body></html > 


存储 > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,DirectoryEntry 对 象 的 readEntries() 方 


myReader. readEntries( 

function( results){// 读 取 目 录 成 功 时 执行 的 回调 函数 
// 解 析 目录 内 容 

} ,errorHandler// 读 取 目 录 失 败 时 执行 的 回调 函数 

) 


此 实例 的 源 文 件 名 是 myHtmlA082. html。 


法 用 于 读 取 目录 的 内 容 。 在 FileSystem API 中 读 取 目录 的 时 候 首 先 需要 使 用 DirectoryEntry 对 象 的 
createReader() 方 法 创建 DirectoryReader 对 象 ,例如 var myReader 二 fs. root. createReader( ) 。 在 创建 
DirectoryReader 对 象 之 后 就 可 以 使 用 该 对 象 的 readEntries() 方 法 读 取 目录 内 容 。readEntries() 方 法 
有 两 个 参数 ,分别 代 表 读 取 目 录 成 功 时 执行 的 回调 函数 和 读 取 目 录 失 败 时 执行 的 回调 函数 。 
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此 实例 了 


在 沙 箱 文件 系统 中 删除 目录 及 其 文件 


E 要 通过 使 用 DirectoryEntry 对 象 的 removeRecursively() 方 法 实现 在 本 地 沙 箱 文 件 系统 





中 删除 目录 及 该 目录 下 的 所 有 子 目 录 和 文件 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,在 “目录 
名 称 :" 文 本 框 中 输入 目录 名 称 ,例如 *MyFolder”, 单 击 * 创 建 目录 ”按钮 ,如 果 此 目录 在 本 地 计算 机 的 
沙 箱 中 创建 成 功 , 则 将 在 下 面 显示 目录 完整 路 径 及 目录 名 等 信息 。 单 击 * 读 取 目 录 内 容 ?* 按 钮 , 即 可 显 
示 根 目录 下 的 所 有 目录 和 文件 ,包括 刚才 创建 的 目录 ”MyFolder”, 如 图 594-1 所 示 。 在 “目录 名 称 :” 
文本 框 中 输入 目录 名 称 , 例 如 “MyFolder”, 单 击 " 删 除 目录 ”按钮 ,如 果 此 目录 在 本 地 计算 机 的 沙 箱 中 


被 成 功 删 除 ， 
目录 “MyFol 


单 击 * 读 取 目 录 内 容 ” 按 钮 , 即 可 显示 根 目录 下 的 所 有 目录 和 文件 ,但 不 包括 刚才 删除 的 
der”, 如 图 594-2 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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目录 名 称 ，[MyFolder 目录 名 称 ，|MyFolder 
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图 594-1 











目录 : myDirectory 
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文件 : newFile. txt 
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文件 ， 阅 读书 目 . txt 
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<!doctype html >< html >< head >< meta charset = UTF -8> 


< script src= "js/jquery- 3.1.1.min. js"></script>< script language = "javascript"> 
function deleteDirectory(){ // 删 除 目录 
window. webkitRequestFileSystem(PERSISTENT, 1024, 
function(fs){ // 请 求 文件 系统 成 功 时 所 执行 的 回调 函数 
var myDirectory = document. getElementById( "myDirectory").value; 
fs. root. getDirectory(myDirectory, { create: false }, 


function(dirEntry){ // 获 取 目 录 成 功 时 所 执行 的 回调 函数 
dirEntry. removeRecursively( 
function() { // 删 除 目录 成 功 时 所 执行 的 回调 函数 


document. getElementById( "myInfo"). innerHTML = 
dirEntry. name +' 目 录 被 删除 '; 
}, 
// 删 除 目录 失败 时 所 执行 的 回调 函数 
errorHandler); 
},errorHandler); },errorHandler); 
} 
function errorHandler(e) 
{// 请 求 文件 系统 失败 时 所 执行 的 回调 函数 
switch(e. code) { 
case FileError. QUOTA EXCEEDED ERR: 
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msg=' 文 件 系 统 所 使 用 的 存储 空间 的 尺寸 超过 磁盘 限额 控制 中 指定 的 空间 尺寸 '; 
break; 
case FileError. NOT_FOUND ERR: 
msg=' 示 找到 文件 或 目录 '; 
break; 
case FileError. SECURITY ERR: 
msg=' 操 作 不 当 引 起 安全 性 错误 '; 
break; 
Case FileError. INVALID MODIFICATION ERR: 
msg=' 对 文件 或 目录 所 指定 的 操作 不 能 被 执行 '; 
break; 
case FileError. INVALID STATE ERR: 
msg=' 指 定 的 状态 无 效 '; 
}; 
document. getElementById( "myInfo" ) . innerHTML = "当前 操作 引发 错误 : " + msg; 
} 


function createDirectory(){ /人 /创建 目录 
} 
function readDirectory( ){ // 读 取 目 录 内 容 
} 
</script ></head> 


<body > 目录 名 称 : < input type= "text" id = "myDirectory" value = "MyFolder" 
style = "width:300px">< br/> 
<p>< input type= "button” value = "创建 目录 ”onclick = "createDirectory()"” 
style = "width:155px"> 

< input type = "button" value= "删除 目录 ”onclick = "deleteDirectory()" 
style = "width:105px"> 

< input type = "button" value= " 读 取 目录 内 容 " onclick = "readDirectory()" 
style = "width:105px"></p><output id = "myInfo" ></output></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , DirectoryEntry 对 象 的 
removeRecursively() 方 法 用 于 删除 目录 及 其 文件 。removeRecursively() 方 法 包括 两 个 参数 ,分 别 表 
示 删 除 目录 成 功 时 执行 的 回调 函数 和 删除 目录 失败 时 执行 的 回调 函数 。 

dirEntry. removeRecursively( 

function() {// 删 除 目录 成 功 时 所 执行 的 回调 函数 
// 显 示 删 除 结果 
} ,errorHandler// 删 除 目录 失败 时 所 执行 的 回调 函数 

); 

DirectoryEntry 对 象 的 remove() 方 法 具有 与 removeRecursively() 方 法 类 似 的 目录 删除 功能 ,但 
是 remove( ) 方 法 只 适用 于 删除 空 目 录 这 种 情形 ,否则 会 抛 出 错误 。 

此 实例 的 源 文件 名 是 myHtmlA083. html。 


595 ”在 沙 箱 系统 中 实现 目录 之 间 的 文件 复制 


此 实例 主要 通过 使 用 copyTo() 方 法 实现 在 本 地 沙 箱 文件 系统 中 将 文件 从 一 个 目录 复制 到 另 一 
个 目录 。 为 了 达到 更 加 明晰 的 测试 效果 ,首先 在 Google Chrome 浏览 器 中 打开 源 代码 中 的 文件 
“myHtmlA080. html”, 在 “目录 名 称 :" 文 本 框 中 输入 “北京 市 ”, 单 击 “ 创 建 目录 ”按钮 , 则 将 在 本 地 计 
算 机 的 沙 箱 中 创建 “北京 市 "目录 ,如 图 595-1 所 示 。 在 “文件 名 称 :" 文 本 框 中 输入 文件 名 称 ,例如 
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“newFile. txt”, 在 “文件 大 小 (byte) :” 文 本 框 中 输入 文件 尺寸 .例如 “1024” 字 节 , 单 击 “ 创 建文 件 ” 按 
钮 ,如 果 此 文件 在 “北京 市 ”目录 中 创建 成 功 . 则 将 在 下 面 显 示 “ 写 文件 操作 结束 ”。 在 “目录 名 称 ;” 文 
本 框 中 输入 * 上 海 市 ”, 单 击 “ 创 建 目录 ”按钮 . 则 将 在 本 地 计算 机 的 沙 箱 中 创建 “上海 市 "目录 。 然 后 在 
Google Chrome 浏览 器 中 打开 实例 程序 源 代码 文件 "myHtmlA084. html”, 在 * 源 目录 名 称 :" 文 本 框 中 
输入 “北京 市 ”, 在 “目标 目录 名 称 : "文本 框 中 输入 * 上 海 市 ”, 在 “文件 名 称 :" 文 本 框 中 输入 “newFile. 
txt”, 单 击 “ 复 制 文件 "按钮 , 则 “newFile. txt" 文 件 将 从 “北京 市 ”目录 复制 到 “上 海 市 "目录 ,如 图 595-2 
所 示 。 最 后 在 Google Chrome 浏览 器 中 打开 源 代码 中 的 文件 “myHtmlA080. html”, 在 “目录 名 称 :” 
文本 框 中 输入 * 上 海 市 ”, 在 “文件 名 称 :" 文 本 框 中 输入 “newFile. txt”, 单 击 * 读 取 文 件 " 按 钮 , 则 会 显示 
刚才 从 “北京 市 ”目录 复制 到 “上 海 市 ”目录 中 的 文件 “newFile. txt” 的 内 容 ,如 图 595-3 所 示 。 有 关 此 
实例 的 主要 代码 如 下 。 
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图 595-2 图 595-3 


<!doctype html >< html >< head >< meta charset = UIF -8> 
< script src= "js/jquery - 3.1.1.min. js"></script>< script language = "javascript"> 
window. requestFileSystem = 
window. requestFileSystem | | window. webkitRequestFileSystem; 
function copyFile(){ // 复 制 文件 
Var mySource = document. getElementById( "mySource"). value; 
var myTarget = document. getElementById( "myTarget"). value; 
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var myFile = document. getElementById("myFile"). value; 
window. requestFileSystem(window. PERSISTENT, 1024 * 1024, function(fs) { 
copy(fs. root, mySource+'/'+myFile, myTarget +°'/"); 
}, errorHandler); 
} 
function copy(cwd, src, dest) { 
cwd. getFile( src, {create:false}, 
function(fileEntry) { // 获 取 被 复制 文件 成 功 时 执行 的 回调 函数 
cwd. getDirectory(dest, {create:false}, 
function(dirEntry) { // 获 取 复制 目标 目录 成 功 时 执行 的 回调 函数 
fileEntry. copyTo(dirEntry, fileEntry. name, 
// 复 制 文件 操作 成 功 时 执行 的 回调 函数 
function() { 
document. getElementById("myInfo"). innerHTML =' 文 件 复制 成 功 '; 
}, 
// 复 制 文件 操作 失败 时 执行 的 回调 函数 
errorHandler );}, 
// 获 取 复制 目标 目录 失败 时 执行 的 回调 函数 
errorHandler); }, errorHandler); 
} 
function errorHandler(e) 
{// 请 求 文件 系统 失败 时 所 执行 的 回调 函数 
switch(e.code) { 
case FileError. QUOTA_EXCEEDED_ERR: 
msg=' 文 件 系 统 所 使 用 的 存储 空间 的 尺寸 超过 磁盘 限额 控制 中 指定 的 空间 尺寸 '; 
break; 
Case FileError. NOT_FOUND_ERR: 
msg=' 示 找到 文件 或 目录 '; 
break; 
Case FileError. SECURITY ERR: 
msg=' 操 作 不 当 引 起 安全 性 错误 '; 
break; 
case FileError. INVALID MODIFICATION ERR: 
msg=' 对 文件 或 目录 所 指定 的 操作 不 能 被 执行 '; 
break; 
case FileError. INVALID STATE ERR: 
msg=' 指 定 的 状态 无 效 '; 
用 
document. getElementById( "myInfo" ) . innerHTML = "当前 操作 引发 错误 : " + msg; 
} 
</script ></head > 
<body > 源 目录 名 称 : < input type = "text" id="mySource" style = "width:270px">< br/>< br/> 
目标 目录 名 称 : < input type = "text" id = "myTarget" style = "width:254px"><br/>< br/> 
文件 名 称 : < input type = "text" id= "myFile" style= "width:285px">< br/> 
<p>< input type= "button" value= "复制 文件 "onclick = "copyFile()" 
style = "width:370px"></p><output id= "myInfo" ></output ></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,fileEntry 对 象 (代表 一 个 文件 ) 的 
copyTo() 方 法 用 于 将 一 个 目录 中 的 文件 或 子 目录 复制 到 另 一 个 目录 中 。 该 方法 使 用 4 个 参数 ,第 1 
个 参数 是 一 个 DirectoryEntry 对 象 ,用 于 指定 将 文件 或 目录 复制 到 哪个 目标 目录 中 ,DirectoryEntry 
对 象 代表 该 目标 目录 ; 第 2 个 .第 3 个 及 第 4 个 参数 均 为 可 选 参数 ,第 2 个 参数 是 一 个 字符 串 , 用 于 指 
定 复制 后 的 文件 名 或 目录 名 ; 第 3 个 参数 与 第 4 个 参数 均 为 函数 .代表 复制 成 功 后 执行 的 回调 函数 及 
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复制 失败 后 执行 的 回调 函数 。 


此 实例 的 源 文件 名 是 myHtmlA084. html。 


596 ”在 沙 箱 文件 系统 中 重 命名 指定 的 文件 


此 实例 主要 通过 使 用 moveTo( ) 方 法 实现 在 本 地 沙 箱 文件 系统 中 重 命名 指定 的 文件 。 为 了 达到 
更 加 明晰 的 测试 效果 ,首先 在 Google Chrome 浏览 器 中 打开 源 代码 中 的 文件 “myHtmlA080. html”， 
在 “目录 名 称 :" 文 本 框 中 输入 "myDirectory”, 单 击 * 创 建 目录 ”按钮 , 则 将 在 本 地 计算 机 的 沙 箱 中 创建 
1 所 示 。 在 “文件 名 称 :" 文 本 框 中 输入 文件 名 称 , 例 如 “OIldFile. txt”, 在 
“文件 大 小 (byte) : "文本 框 中 输入 文件 尺寸 ,例如 “1024” 字 节 , 单 击 “ 创 建文 件 ” 按 钮 ,如 果 此 文件 在 
“myDirectory” 目 录 中 创建 成 功 , 则 将 在 下 面 显示 “ 写 文件 操作 结束 ”"。 然 后 在 Google Chrome 浏览 器 
中 打开 实例 程序 源 代码 文件 “myHtmlA085. html”, 在 “目录 名 称 :文本 框 中 输入 “myDirectory”, 在 
“原文 件 名 称 : "文本 框 中 输入 *OldFile. txt”, 在 “新 文件 名 称 : "文本 框 中 输入 “NewFile. txt”, 单 击 “ 重 
xt” 文 件 将 被 更 名 为 “NewFile. txt”, 如 图 596-2 所 示 。 最 后 在 Google 
码 中 的 文件 “myHtmlA080. html”, 在 “目录 名 称 :" 文 本 框 中 输入 
"文本 框 中 输入 "NewFile. txt”, 单 击 * 读 取 文 件 ” 按 钮 , 则 会 显示 刚才 更 
名 之 后 的 新 文件 “NewFile. txt? 的 内 容 ,如 图 596-3 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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<! doctype html >< html > 
<head > 
<meta charset = UTEF 一 8> 
<script src= "js/jquery- 3.1.1.min. js"></script> 
< script language = "javascript"> 
window. requestFileSystem= 
window. requestFileSystem || window. webkitRequestFileSystenm; 
function renameFile( ){ // 重 命名 文件 
var myFolder = document. getElementById( "myDirectory"). value; 
var myOldFile = document. getElementById("mySource"). value; 
var myNewFile = document.getElementById("myTarget" ). value; 
window. requestFileSystem(window. PERSISTENT, 1024* 1024, function(fs) { 
rename(fs. root, myFolder +'/'+myOldFile, myNewFile, myFolder + '/'); 
}, errorHandler); 
} 
function rename( cwd, oldFileName, newFileName, folder) { 
cwd. getFile(oldFileName, {create:false}, 
function(fileEntry) { // 获 取 文件 成 功 时 执行 的 回调 函数 
cwd. getDirectory(folder, {create:false}, 
// 获 取 文 件 目录 成 功 时 执行 的 回调 函数 
function(folder) { 
fileEntry. moveTo(folder, newFileName, 
function() { // 文 件 重 命名 操作 成 功 时 执行 的 回调 函数 
document. getElementById( "myInfo"). innerHTML = 
"修改 文件 名 成 功 ,新 文件 名 :' + newFileName; 


},errorHandler // 文 件 重 命名 操作 失败 时 执行 的 回调 函数 
);},errorHandler // 获 取 目 录 失 败 时 执行 的 回调 函数 
); }, errorHandler // 获 取 文件 失败 时 执行 的 回调 函数 


);} 
function errorHandler(e) 
{// 请 求 文件 系统 失败 时 所 执行 的 回调 函数 
Switch(e. code) { 
case FileError. QUOTA_EXCEEDED ERR: 
msg=' 文 件 系 统 所 使 用 的 存储 空间 的 尺寸 超过 磁盘 限额 控制 中 指定 的 空间 尺寸 '; 
break; 
case FileError. NOT_FOUND_ERR: 
msg=' 示 找到 文件 或 目录 '; 
break; 
case FileError. SECURITY ERR: 
msg=' 操 作 不 当 引 起 安全 性 错误 '; 
break; 
case FileError. INVALID MODIFICATION ERR: 
msg=' 对 文件 或 目录 所 指定 的 操作 不 能 被 执行 '; 
break; 
case FileError. INVALID_STATE ERR: 
msg=' 指 定 的 状态 无 效 '; 
}; 
document. getElementById("myInfo"). innerHTML = "当前 操作 引发 错误 : " + msg; 
} 
</script > 
</head> 
<body> 
目录 名 称 : < input type = "text" id= "myDirectory" style= "width:285px">< br/><br/> 
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原文 件 名 称 : < input type = "text" id = "mySource" style="width:270px"><br/><br/> 
新 文件 名 称 : < input type = "text" id = "myTarget" style= "width:270px">< br/> 
<p>< input type= "button" value = " 重 命名 文件 " onclick = "renameFile()" 

style = "width:370px"></p><output id= "myInfo" ></output ></body></htnml > 





上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,DirectoryEntry 对 象 (代表 一 个 目录 ) 
的 moveTo() 方 法 用 于 将 一 个 目录 中 的 文件 或 子 目 录 复 制 到 另 一 个 目录 中 。 但 是 由 于 可 以 在 
moveTo() 方 法 的 第 2 个 可 选 参 数 中 重新 指定 移动 后 的 文件 名 或 目录 名 ,所 以 在 将 移动 源 目 录 与 目标 
目录 指定 为 同一 个 目录 并 且 指 定 一 个 新 的 文件 名 后 即 可 实现 重 命名 文件 。moveTo() 方 法 与 copyTo () 
方法 所 使 用 的 参数 及 其 说 明 完全 相同 ,区 别 仅 在 于 使 用 copyTo( ) 方 法 时 将 把 指定 文件 或 目录 从 复制 
源 目 录 复 制 到 目标 目录 中 ,复制 后 复制 源 目录 中 该 文件 或 目录 依然 存在 ,但 是 在 使 用 moveTo() 方 法 
时 将 把 指定 文件 或 目录 从 移动 源 目 录 移 动 到 目标 目录 中 ,移动 后 源 目 录 中 的 该 文件 或 目录 被 删除 。 

此 实例 的 源 文 件 名 是 myHtmlA085. html。 





其 他 


597 ”使 用 @media 查询 创建 响应 式 页 面 布局 


此 实例 主要 通过 使 用 @media 查询 实现 页 面 根据 当前 浏览 器 窗口 的 大 小 进行 动态 布局 。 当 在 
Google Chrome 浏览 器 中 显示 该 页 面 时 ,如 果 浏 览 器 窗口 的 最 大 宽度 只 有 500px, 则 采用 图 597-1 所 
示 的 布局 ,否则 采用 图 597-2 所 示 的 布局 。 有 关 此 实例 的 主要 代码 如 下 。 











<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<style type= "text/css"> 
.header { padding:1.0121457489878542510121457489879 ; 
background — color: #F1F1F1; border:1px solid #E9E9E9;} 
. menuitem { margin: 4. 310344827586206896551724137931% ; margin - left: 0; margin - top: 0; padding: 
4. 310344827586206896551724137931 % ;border - bottom:1px solid #E9E9E9; cursor:pointer; } 
.main { padding:2.0661157024793388429752066115702 % ;} 
.right { padding:4.310344827586206896551724137931 % ;background - color: # CDFOF6;} 
h2{ border - bottom:1px solid black;} 
. footer {padding: 1. 0121457489878542510121457489879 % ; text - align: center; background - color: 
#F1F1F1; border:1px solid #E9E9E9; font - size:0.625em;} 
.myContainer { width:100%; } 
.myWrapper { overflow:hidden; } 
.myBox { margin - bottom:2. 0242914979757085020242914979757 % ;margin— right: 2.0242914979757085020 
242914979757% ; float :left;} 
.myHeader { width:100%; } 
. myMenu { width:23. 481781376518218623481781376518%; } 
.myMain { width:48.987854251012145748987854251012% ; } 
.myRight {width:23. 481781376518218623481781376518 % ; margin - right:0;} 
.myFooter {width:100% ; margin— bottom:0;} 
@media only screen and (max - width: 500px) { 
.myMenu { width:100% ;} 
.menuitem { margin:1. 0121457489878542510121457489879 % ; 
padding:1.0121457489878542510121457489879% ; } 
.myMain { width:100% ;} 
.main { padding:1.0121457489878542510121457489879 % ;} 
.myRight { width:100% ; } 
.right { padding:1.0121457489878542510121457489879 % ;} 
.myBox { margin - right:0; float :left;} } 
</style></head> 
<body >< div class = "myContainer"> 
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<div class = "myWrapper"> 
<div class = "myBox myHeader"><div class = "header"><hl > 强 东 商城 </hl ></div></div> 
<div class = "myBox myMenu"> 
<div class = "menuitem"> 商 品 介绍 </div><div class = "menuitem"> 规 格 参 数 </div> 
<div class= "menuitem"> 包 装 清单 </div></div> 
<div class= "myBox myMain"><div class = "main">< hl > 西 莫 寇 纳 格 干 红 葡萄 酒 </hl > <p> 干 红 葡萄酒 是 指 
葡萄 酒 酿 造 后 ,酿酒 原料 (葡萄 汁 ) 中 的 糖分 完全 转化 成 酒精 , 残 糖 量 小 于 或 等 于 4. 09/L 的 红 葡 萄 酒 。</p > 
< img src= "img/B105. jpg"></div></div> 
<div class = "myBox myRight"><div class = "right"><h2 > 法 国 葡 葡 酒 </h2 > <p> 法 国 最 古老 的 超 一 级 酒 庄 
是 昌 萨 昌 斯 酒 堡 。 法 国法 律 将 法 国 葡萄 酒 分 为 4 级 :法 定 产 区 葡萄 酒 、 优 良 地 区 餐 酒 . 地 区 餐 酒 .日 常 餐 酒 。</p> 
<h2 > 西班牙 葡萄 酒 </h2 > <p> 西 班 牙 葡萄 酒 是 被 世界 忽略 的 酒 世界 ,更 被 很 多 中 国人 忽略 。 要 知道 ,西班牙 的 
葡萄 酒 产量 居 世 界 第 三 位 ,而 且 有 很 多 质量 非常 优秀 的 葡萄 酒 。</p></div></div> 
<div class = "myBox myFooter"><div class= "footer"> <p> 互 联网 出 版 许可 证 编号 新 出 网 证 字 150 号 | 
出 版 物 经 营 许可 证 | 网 络 文化 经 营 许可 证 京 网 文 348 号 | 违法 和 不 良 信息 举报 电话 : 40065611555 </p> 
</div></div></div></div></body></html > 
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强 东 商城 强 东 商 城 
ee 向 品 介绍 
包装 消音 加 本 孝 西 莫 寇 纳 格 干 红 葡萄 酒 ” 选 国 葡萄 消 
清和 干 红 贡 天 本 是 指 间 太 天 要 寺 乒 ， 了 本 古村 ( 半 
丽人 的 本 二 本， 和 
西 莫 寇 纳 格 干 红 葡萄 酒 
干 红 贡 芭 是 指 前 区 汪 及 计 后 ， 也 原料 (和 本寺) 中 的 要 分 
完全 转化 成 十 情 ， 残 粮 便 小 于 或 等 于 4 0g/L 的 红 戎 葡 湘 。 
图 597-1 图 597-2 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , @media only screen and (max- 





width: 500px) 用 于 定义 屏幕 最 大 宽度 为 500px 时 的 CSS 样式 。 在 CSS3 中 ,使 用 @media 查询 能 够 
轻松 实现 针对 不 同 的 媒体 类 型 定义 不 同 的 样式 。 特 别 是 如 果 需 要 设置 响应 式 的 页 面 ,@media 是 非常 
有 用 的 。 在 重 置 浏览 器 大 小 的 过 程 中 页 面 也 会 根据 浏览 器 的 宽度 和 高 度 重新 浑 染 页 面 。@media 查 
询 的 语法 格式 如 下 。 


@media mediatype and| not|only (media feature) { CSS— Code;} 


mediatype 媒体 类 型 值 的 相关 说 明 如 表 597-1 所 示 。 
表 597-1 mediatype 值 的 相关 说 明 








值 说 明 

all 用 于 所 有 设备 

print 用 于 打印 机 和 打印 预览 

Screen 用 于 计算 机 屏幕 平板 计算 机 、 智 能 手机 等 


speech 应 用 于 屏幕 阅读 器 等 发 声 设备 
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mediafeature 媒体 功能 值 的 相关 说 明 如 表 597-2 所 示 。 


表 597-2 ”mediafeature 值 的 相关 说 明 





值 


说 明 





aspect-ratio 

color 

color-index 
device-aspect-ratio 
device-height 
device-width 

grid 

height 
max-aspect-ratio 
max-color 
max-color-index 
max-device-aspect-ratio 
max-device-height 
max-device-width 
max-height 
max-monochrome 
max-resolution 
max-width 
min-aspect-ratio 
min-color 
min-color-index 
min-device-aspect-ratio 
min-device-width 
min-device-height 
min-height 
min-monochrome 
min-resolution 
min-width 


monochrome 


orientation 
resolution 
Scan 


width 


定义 输出 设备 中 的 页 面 可 见 区 域 宽度 与 高 度 的 比率 

定义 输出 设备 每 一 组 彩色 原件 的 个 数 。 如 果 不 是 彩色 设备 , 则 值 等 于 0 
定义 在 输出 设备 的 彩色 查询 表 中 的 条 目 数 。 如 果 没 有 使 用 彩色 查询 表 , 则 值 等 于 0 
定义 输出 设备 的 屏幕 可 见 宽度 与 高 度 的 比率 

定义 输出 设备 的 屏幕 可 见 高 度 

定义 输出 设备 的 屏幕 可 见 宽度 

用 来 查询 输出 设备 是 否 使 用 栅 格 或 点 阵 

定义 输出 设备 中 的 页 面 可 见 区 域 高 度 

定义 输出 设备 的 屏幕 可 见 宽度 与 高 度 的 最 大 比率 

定义 输出 设备 每 一 组 彩色 原件 的 最 大 个 数 

定义 在 输出 设备 的 彩色 查询 表 中 的 最 大 条 目 数 

定义 输出 设备 的 屏幕 可 见 宽度 与 高 度 的 最 大 比率 

定义 输出 设备 的 屏幕 可 见 的 最 大 高 度 

定义 输出 设备 的 屏幕 最 大 可 见 宽度 

定义 输出 设备 中 的 页 面 最 大 可 见 区 域 高 度 

定义 在 一 个 单 色 框 架 缓冲 区 中 每 像素 包含 的 最 大 单 色 原件 个 数 
定义 设备 的 最 大 分 辩 率 

定义 输出 设备 中 的 页 面 最 大 可 见 区 域 宽度 

定义 输出 设备 中 的 页 面 可 见 区 域 宽度 与 高 度 的 最 小 比率 

定义 输出 设备 每 一 组 彩色 原件 的 最 小 个 数 

定义 在 输出 设备 的 彩色 查询 表 中 的 最 小 条 目 数 

定义 输出 设备 的 屏幕 可 见 宽度 与 高 度 的 最 小 比率 

定义 输出 设备 的 屏幕 最 小 可 见 宽度 

定义 输出 设备 的 屏幕 的 最 小 可 见 高 度 

定义 输出 设备 中 的 页 面 最 小 可 见 区 域 高 度 

定义 在 一 个 单 色 框 架 缓冲 区 中 每 像素 包含 的 最 小 单 色 原 件 个 数 
定义 设备 的 最 小 分 辩 率 

定义 输出 设备 中 的 页 面 最 小 可 见 区 域 宽度 

定义 在 一 个 单 色 框架 缓冲 区 中 每 像素 包含 的 单 色 原件 个 数 。 如 果 不 是 单 色 设备 , 则 
值 等 于 0 

定义 输出 设备 中 的 页 面 可 见 区 域 高 度 是 否 大 于 或 等 于 宽度 

定义 设备 的 分 辨 率 。 例 如 96dpi、300dpi 

定义 电视 类 设备 的 扫描 工序 

定义 输出 设备 中 的 页 面 可 见 区 域 宽度 








此 实例 的 源 文 件 名 是 myHtmlB105. html。 


598 ”使 用 @media 查询 创建 响应 式 表格 布局 


此 实例 主要 通过 使 用 @media 查询 实现 表格 根据 当前 浏览 器 窗口 的 大 小 进行 动态 响应 式 布局 。 


当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 .如 果 浏 览 器 窗口 的 宽度 超过 450px' 则 显示 图 598-1 所 
示 的 表格 ; 否则 按照 每 列 的 数据 以 每 行为 组 进行 显示 ,如 图 598-2 所 示 。 有 关 此 实例 的 主要 代码 
如 下 。 
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图 598-2 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
< style type= "text/css"> 
td { background - color: lightseagreen; font - size: 13px; } 
th { background- color: seagreen; } 
table { border: lpx solid white; width: 80%; margin: 0; padding: 0; border - collapse: collapse; 
border - spacing: 0; margin: 0 auto;} 
table tr { border: 1px solid white; padding: 5px; } 
table th, table td { padding: 5px; text - align: center; 
border: 1px solid white; } 
table th { font - size: 14px; letter - spacing: lpx; } 
@media screen and (max — width: 450px) { 
table { border: 0; } 
table thead { display: none; } 
table tr { margin - bottom: 10px; display: block; 
border - bottom: 0px solid #DDD; } 
table td { display: block; text - align: right; font— size: 13px; 
border - bottom: 0px dotted #CCC; } 
table td:last- child { border - bottom: 0; } 
table td:before { content: attr(myHead); float: left; font - weight: bold; } } 
</style></head> 
<body ><table><thead> 
<tr><th> 北 京 市 </th><th> 上 海 市 </th><th> 天 津 市 </th><th> 重 庆 市 </th></tr ></thead> 
<tbody> 
<tr>< td myHead = "北京 市 "> 北京 市 公安 局 </td> 
<td myHead = "上 海 市 "> 上 海 市 审计 局 </td> 
<td myHead = "天 津 市 "> 天 津 市 人 民 检 察 院 </td> 
<td myHead = "重庆 市 "> 重庆 市 环保 局 </td></tr> 
<tr><td myHead = "北京 市 "> 北京 市 人 力 社保 局 </td> 
<td myHead = "上 海 市 "> 上 海 市 国土 房管 局 </td> 
<td myHead = "天 津 市 "> 天 津 市 监察 局 </td> 
<td myHead = "重庆 市 "> 重庆 市 三 峡 水 库 管理 局 </td></tr> 
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<tr><td myHead = "北京 市 "> 北京 市 经 济 信息 委员 会 </td> 
<td myHead = "上 海 市 "> 上 海 市 地 税 局 </td> 
<td myHead = "天 津 市 "> 天 津 市 工商 局 </td> 
<td myHead = "重庆 市 "> 重庆 市 规划 局 </td></tr ></tbody></table></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , @ media screen and (max-width: 
450px){} 表 示 在 屏幕 宽度 大 于 450px 时 使 用 大 括号 内 设置 的 表格 样式 。 在 这 里 screen 表示 媒体 类 型 
是 显示 屏幕 ,and 被 称 为 关键 字 , 与 其 相似 的 还 有 not ,only 等 ,(max-width: 450px) 表 示 媒 体 条 件 是 
屏幕 宽度 大 于 450px, 当 然 还 有 (min-width: 450px) 等 其 他 表现 形式 。 

此 实例 的 源 文件 名 是 myHtmlB215. html。 


599 ”使 用 png 图 像 重 置 默认 的 鼠标 指针 形状 


此 实例 主要 通过 使 用 png 图 像 设 置 cursor 属性 实现 重 置 默认 的 鼠标 箭头 指针 形状 。 当 在 
Google Chrome 浏览 器 中 显示 该 页 面 时 ,如 果 鼠 标 指针 在 图 像 上 任意 滑动 , 则 默认 的 鼠标 箭头 指针 将 
被 左上 角 的 电话 所 代替 , 即 电话 跟随 鼠标 移动 ,如 图 599-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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<!doctype html ><html >< head >< meta charset = "UTF ~- 8"> 
<style type = "text/css"> 
img { border — radius: 10px;} 
/* 当 鼠 标 指针 其 浮 在 图 像 上 时 显示 此 定制 光标 * / 
img:hover { cursor: url('img/B066A. png'), default; } 
</style></head> 
<body >< img src = "img/B152A. jpg"></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,img: hover { cursor: url ('img/ 
B066A. png') ,default; } 表 示 鼠 标 指针 在 图 像 上 悬浮 时 使 用 B066A. png 图 像 代替 默认 的 鼠标 箭头 指 
针 。 在 CSS 中 ,cursor 属性 用 于 设置 或 检索 在 对 象 上 移动 的 鼠标 指针 采用 何 种 系统 预定 义 的 光标 形 
状 , 该 属性 的 语法 格式 如 下 。 
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cursor: [<url> [<x> <y>]?,]*[ auto | default | none | context ~ menu | help | pointer | progress | wa 让 

| cell | crosshair | text | vertical - text | alias | copy | move | no— drop | not ~ allowed | e- resize | n— 

resize | ne- resize | nw— resize | s - resize | se- resize | sw- resize | w- resize | ew - resize | ns — 

resize | nesw - resize | nwse— resize | col - resize | row- resize | all- scroll] 

上 面 的 每 个 属性 值 代表 具体 的 预 置 鼠 标 指针 形状 ,例如 cursor: help 显示 带 问 号 的 鼠标 指针 。 当 
然 也 可 以 像 实例 这 样 使 用 图 像 来 代 蔡 鼠标 指针 ,需要 注意 的 是 ,不 同 的 浏览 器 支持 的 图 像 格式 不 同 。 

此 实例 的 源 文件 名 是 myHtmlB216. html 


600 ”在 全 屏 显示 模式 下 锁定 和 解锁 鼠标 指针 


此 实例 主要 通过 使 用 requestPointerLock() 方 法 实现 在 全 屏 显示 模式 时 锁定 鼠标 指针 和 解锁 鼠 
标 指针 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 , 单 击 “ 锁 定 鼠 标 指针 "按钮 . 则 浏览 器 自动 
提示 信息 “此 网 页 现 处 于 全 屏 模式 隐藏 鼠标 指针 .”, 如 图 600-1 所 示 ; 单 击 “允许 ?按钮 , 则 鼠标 
指针 从 屏幕 上 消失 ,并 显示 提示 信息 * 此 网 页 现 处 于 全 屏 模式 并 已 隐藏 鼠标 指针 。 按 Esc 键 退出 。”， 
如 图 600-2 所 示 ,此 时 在 屏幕 上 看 不 见 鼠 标 指针 ,如 果 按 下 Esc 键 , 则 退出 全 屏 模式 ,解锁 鼠标 指针 , 鼠 
标 指 针 恢 复 正 常 状 态 。 此 技术 主要 适用 于 网 页 游戏 场景 。 有 关 此 实例 的 主要 代码 如 下 。 


















于 全 屏 树 式 并 意图 聊 关 鼠标 指针 , 





图 600-1 


此 网 页 现 处 于 全 屏 模 式 并 已 唤 蕊 鼠标 指针 。 按 Esc 键 退出 。 





图 600-2 


<! doctype html >< html >< head >< meta charset = UTF -8> 
< script src= "js/jquery - 3.1.1.min. js"></script>< script language = "javascript"> 
Var myDiv; 
function lockPointer() { 
myDiv = document. getElementById("myDiv" ); 
// 将 div 块 设 为 全 屏 状态 
// 到 目前 为 止 在 针对 某 个 元 素 锁定 鼠标 指针 之 前 首先 要 将 该 元 素 设 为 全 屏 状态 


myDiv. requestFul lscreen = myDiv. requestFullscreen | | 





myDiv. mozRequestFullscreen ||myDiv. mozRequestFullScreen | | 
myDiv. webkitRequestFullscreen; 
myDiv. requestFullscreen( ); 
} 
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document.addEventListener("mousemove"，function(e) { 
var movementX = e. movementX | | e.mozMovementX | | e. webkitMovementX || 0; 
Var movementY = e. movementY | | e.mozMovementY | | e. webkitMovementY || 0; 
console. log(" 鼠 标 指针 位 置 : movementX = " + movementX + ",movementY= "+ movementY) ; 
}, false); 
document .addEventListener( 'fullscreenchange', fullscreenChange, false); 
document .addEventListener( 'mozfullscreenchange', fullscreenChange, false); 
document .addEventListener( 'webkitfullscreenchange', fullscreenChange, false); 
function fullscreenChange() { 
if (document. webkitFullscreenElement === myDiv || 
document. mozFullscreenElement myDiv || 
document. mozFullScreenElement === myDiv) { 
// 元 素 已 处 于 全 屏 状 态 ,锁定 鼠标 指针 
myDiv. requestPointerLock = myDiv. requestPointerLock || 
myDiv. mozRequestPointerLock | | myDiv. webkitRequestPointerLock; 
myDiv. requestPointerLock( ); 
上 
</script ></head> 
<body >< button onclick = "lockPointer( );" style= "width:350px"> 锁 定 鼠 标 指针 </button > 
<div id= "myDiv"></div></body></html> 





上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,元 素 ( 例 如 div 元 素 ) 的 
requestPointerLock() 方 法 用 于 锁定 鼠标 指针 。 当 鼠标 指针 的 锁定 状态 发 生 改 变 时 ,例如 调用 
requestPointerLock() 方 法 成 功 锁定 鼠标 指针 ,或 调用 exitPointerLock() 方 法 成 功 取 消 鼠 标 指针 锁 
定 , 或 用 户 在 全 屏 状态 下 按 下 Esc 键 ,此 时 将 触发 document 对 象 的 pointerlockchange 事件 ,该 事件 不 
携带 任何 数据 。 当 调用 requestPointerLock( ) 方 法 锁定 鼠标 指针 操作 失败 时 ,或 调用 exitPointerLock() 
方法 取消 鼠标 指针 锁定 操作 失败 时 ,将 触发 document 对 象 的 pointerlockerror 事件 ,该 事件 不 携带 任 
何 数据 。 此 外 ,不 管 鼠 标 指 针 是 否 处 于 锁定 状态 ,都 可 以 使 用 movementX 属性 与 movementY 属性 来 
获取 鼠标 指针 的 位 置信 息 , 即 使 在 鼠标 指针 没有 被 锁定 的 情况 下 。 当 鼠标 指针 没有 被 锁定 时 ,可 以 被 
移动 到 浏览 器 窗口 之 外 后 再 进入 浏览 器 窗口 ,这 时 movementX 属性 值 与 movementY 属性 值 都 将 被 
初始 化 为 0。 

此 实例 的 源 文件 名 是 myHtmlA105. html。 


601 ”全屏 显示 页 面 或 使 页 面 退 出 全 屏 模 式 


此 实例 主要 通过 使 用 RequestFullScreen() 方 法 和 CancelFullScreen( ) 方 法 实现 全 屏 显 示 页 面 或 
使 页 面 退 出 全 屏 显示 模 式 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 , 单 击 * 全 屏 显 示 网 页 "按钮 ， 
如 图 601-1 所 示 , 则 页 面 立 即 切换 到 全 屏 显 示 状 态 ; 在 全 屏 显示 状态 的 页 面 中 单 击 “ 退 出 全 屏 显 示 ” 按 
钮 ,如 图 601-2 所 示 , 则 页 面 立即 退出 全 屏 显 示 模 式 。 有 关 此 实例 的 主要 代码 如 下 。 


<!doctype html ><html >< head><meta charset = UIF - 8> 
<style> 
html { background: url( img/a050A. jpg) no— repeat; 
min— height: 100 % ; background— size: 100% 100%;} 
</style></head> 
<body>< input type = "button”id= "myBtn" value = "全 屏 显 示 网 页 " 
onclick = "toggleFullScreen();" style= "width:250px; "> 
<p style= "width:100% ;color:yellow;i" id= "myInfo"> 当 前 状态 : 网 页 是 非 全 屏 显示 的 </p> 
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< script language = "javascript"> 
var myDocument = document. document Element; 
var myInfo = document.getElementById("myInfo" ); 
var myBtn = document. getElementById( "myBtn"); 
document. addEventListener("webkitfullscreenchange"，function () { 
myInfo. innerHTML = "当前 状态 : "+ (document. webkitIsFullScreen) ? "网 页 是 全 屏 显 示 的 "” : "网 页 是 非 
全 屏 显示 的 "; 
myBtn. value = ( document. webkitIsFullScreen)?" 退 出 全 屏 显示 ":" 全 屏 显示 网 页 ";}, false); 
function toggleFullScreen() { 
if (myBtn. value == "全 屏 显示 网 页 ") { 
if (myDocument. webkitRequestFullScreen) { 
myDocument. webkitRequestFullScreen( ); 
}}else{ if (document.webkitCancelFullScreen) { 
document. webkitCancelFullScreen(); } } } 
</script ></body ></html > 
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图 601-1 图 601-2 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,DOM 对 象 的 根 结 点 对 象 (document. 
documentElement) 或 某 个 元 素 的 RequestFullScreen (谷歌 的 Chrome 浏览 器 是 webkitRequest- 
FullScreen) 属 性 值 用 于 判断 浏览 器 是 否 支持 FullScreen API, 如 果 支 持 , 则 可 以 直接 调用 该 元 素 的 
RequestFullScreen() 方 法 (谷歌 的 Chrome 浏览 器 是 webkitRequestFullScreen() 方 法 ) 实 现 将 页 面 或 
元 素 设置 为 全 屏 显 示 状 态 。 当 然 , 也 可 以 通过 DOM 对 象 的 根 结 点 对 象 (document. documentElement) 或 
某 个 元 素 的 CancelFullScreen (谷歌 的 Chrome 浏览 器 是 webkitCancelFullScreen) 属 性 值 或 
exitFullScreen 属性 值 判断 浏览 器 是 否 支持 FullScreen API, 如 果 支 持 , 则 可 以 直接 调用 该 元 素 的 
CancelFullScreen() 方 法 (谷歌 的 Chrome 浏览 器 是 webkitCancelFullScreen() 方 法 ) 实 现 将 页 面 或 元 
素 设置 为 非 全 屏 显 示 状 态 。 

在 FullScreen API 中 ,可 以 通过 监听 DOM 对 象 (document. documentElement) 或 某 个 元 素 的 
fullscreenchange 事件 ( 当 页 面 或 元 素 从 非 全 屏 状 态 进 入 全 屏 显示 状态 或 者 从 全 屏 显 示 状 态 退出 时 触 
发 ,在 代码 中 需要 根据 不 同 的 浏览 器 添加 前 级 ,谷歌 的 Chrome 浏览 器 是 webkitfullscreenchange) 并 
指定 事件 处 理 函 数 来 指定 当 页 面 或 元 素 变 为 全 屏 显 示 状 态 或 者 非 全 屏 显 示 状 态 时 所 需要 执行 的 代 
码 。 在 事件 处 理 函 数 中 ,可 以 通过 DOM 对 象 的 根 结 点 对 象 (document. documentElement) 或 某 个 元 
素 的 FullScreen 属性 值 (在 代码 中 需要 根据 不 同 的 浏览 器 添加 前 级 ,谷歌 的 Chrome 浏览 器 是 
webkitIsFullScreen, 火 狐 浏览 器 是 mozFullScreen) 来 判断 页 面 或 元 素 是 否 处 于 全 屏 显 示 状 态 ; 如 果 
该 属性 值 为 true, 则 为 全 屏 显示 状态 ,否则 为 非 全 屏 显 示 状 态 。 

此 实例 的 源 文件 名 是 myHtmlA104. html。 
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602 ”创建 自 定 义 右键 菜单 代替 默认 右键 菜单 


此 实例 主要 为 document 的 contextmenu 事件 重新 添加 自 定义 方法 ,从 而 实现 使 用 自 定义 右键 菜 
单 代 蔡 默 认 的 右键 菜单 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,使 用 鼠标 右键 单 击 空白 页 面 
将 弹出 自 定 义 右键 菜单 ,如 图 602-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 


<!doctype html >< html ><head>< meta charset = "UTF — 8"> 
<script src= "js/jquery -3.1.1.min. js"></script >< script type= "text/javascript"> 
document .oncontextmenu = function (e){ // 使 用 鼠标 右键 单 击 页 面 显示 自 定义 右键 菜单 
证 (window. event) e= window. event; 
var myMenu = document. getElement ById( "myMenu" ) ; 
myMenu. style. visibility = "visible"; // 显 示 自 定义 右键 菜单 
myMenu. style. left =e.clientX+5+"px"; ”// 设 置 自 定义 右键 菜单 的 位 置 
myMenu. style. top = e. clientY+ 5+"px"; 
return false; } 
document .onclick = function() { // 使 用 鼠标 单 击 页 面 的 任意 位 置 隐藏 自 定义 右键 菜单 
var myMenu = document.getElementById("myMenu" ) 7 
myMenu. style. visibility= "hidden"; } 
</script> 
< style type = "text/css"> 

img { width: 400px; height: 250px; border - radius: 10px; margin: 2px;} 

* { margin: 0; padding: 0;} 

#myMenu { width: 130px; visibility: hidden; border - bottom - width:0; position: absolute;background: 
lightgrey; padding - left: 5px; padding - right: 5px; box— shadow: 3px 5px 8px #888888; border - radius: 
Spx; } 

#myMenu 1i { list— style: none; text - indent: 10px; } 

.myNormal { display: block; height: 30px; line - height: 30px; border— bottom: 1px solid black; text — 
decoration: none; color: #666; font: 12px/30px tahoma; } 

.myLast { display: block; height: 30px; line - height: 30px; text - decoration: none; 
color: black; font: 12px/30px tahoma;} 

#myMenu 1i a:hover { background: white; color: black;} 

</style></head> 
<body>< div id = "myMenu"> 
<ul><1i><a href ="#"class = "myNormal"> 以 滤 色 模式 显示 图 像 </a></1i> 
<1i><ahref="#"”class= "myNormal"> 以 增 亮 模 式 显示 图 像 </a></1i> 
<1i><ahref="#"class= "myNormal"> 以 差 值 模式 显示 图 像 </a></1i> 
<1li><a href =" 间 " class = "myNormal"> 以 释 加 模式 显示 图 像 </a></1i> 
<1i><a href =" 间 " class = "myNormal"> 以 排除 模式 显示 图 像 </a></1i> 
<1i><a href =" 间 " class = "myNormal"> 以 色相 模式 显示 图 像 </a></1i> 
<1i><a href ="#" class = "myLast"> 以 混合 模式 显示 图 像 </a></1i></ul></div> 
</body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,document oncontextmenu 表示 文档 
contextmenu 事件 对 应 的 方法 ,contextmenu 事件 在 用 户 右 击 鼠 标 时 触发 并 打开 元 素 的 上 下 文 菜单 。 
如 果 没 有 对 该 方法 进行 自 定义 , 则 文档 对 象 将 执行 默认 的 操作 。 如 图 602-2 所 示 的 右键 菜单 即 是 空 
白 页 面 的 默认 右键 菜单 。 

此 实例 的 源 文 件 名 是 myHtmlAl115. html。 
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603 ”通过 上 下 文 菜单 返回 值 禁 止 使 用 右键 菜单 


此 实例 主要 设置 页 面 body 的 oncontextmenu() 方 法 的 返回 值 为 false, 从 而 实现 禁止 在 用 户 使 用 
鼠标 右键 单 击 页 面 上 的 元 素 时 弹出 右键 菜单 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,如 果 使 
用 鼠标 右键 单 击 图 像 , 则 将 弹出 一 个 消息 框 ,提示 “此 页 面 禁止 使 用 右键 菜单 1", 如 图 603-1 所 示 。 有 
关 此 实例 的 主要 代码 如 下 。 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<style type= "text/css"> 
img{ width:400px; height:250px; border - radius: 10px; } 
</style></head> 
<body oncontextmenu = "alert( ' 此 页 面 禁 止 使 用 右键 菜单 ! ') ; return false;"> 
<p>< img src= "img/B315. jpg"></p></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,< body oncontextmenu 一 "alert(' 此 
页 面 禁止 使 用 右键 菜单 1'); return false;"> 表 示 禁 止 在 用 户 使 用 鼠标 右键 单 击 页 面 上 的 元 素 时 弹出 
右键 菜单 ,如 果 将 oncontextmenu() 方 法 的 返回 值 设 置 为 true. 例 如 < body oncontextmenu 王 ”return 
true;">, 则 当 使 用 鼠标 右键 单 击 图 像 时 将 正常 弹出 右键 菜单 ,如 图 603-2 所 示 。 

此 实例 的 源 文件 名 是 myHtmlB315. html。 
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604 ”使 用 字符 编码 解决 中 文字 符 的 对 齐 问题 


此 实例 主要 通过 使 用 字符 编码 &#x2003 和 已 并 x2002 解决 中 文字 符 的 对 齐 问题 。 当 在 Google 
Chrome 浏览 器 中 显示 该 页 面 时 ,“ 姓 名 :” 和 “手机 号 :虽然 与 “电子 邮箱 : "不 等 长 ,但 是 由 于 使 用 了 字 
符 编码 & # x2003 和 &#x2002 代替 空格 ,因而 实现 了 对 齐 , 如 图 604-1 所 示 。 有 关 此 实例 的 主要 代 
码 如 下 。 
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图 604-1 


<! doctype html >< html ><head><meta charset = "UTF - 8"> 
<style> 
ul {list- style— type: none; font - size: 14px;} 
.1i {margin top: 10px; _font - family: ' 宋 体 '; } 
</style></head> 
<body><ul><1li class="1li"> 姓 &#x2003;&#x2003; 名 : < input type= "text"/></1i> 
<1li class = "1in> 手 &#x2002; 机 &#x2002; 号 : < input type= "text"/></1i> 
<1i class= "1i"> 电 子 邮 箱 : < input type = "text"/></1i></ul></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,字符 编码 &# x2003 和 #x2002 代 
表 两 个 空格 符 。 实 际 上 ,所 有 的 中 文字 符 及 特殊 字符 都 有 编码 ,都 可 以 采用 编码 的 方式 来 解决 。 例 
如 ,“< li class 一 "1i"> &# x7535; & # x5B50; & # x90AE; &# x7BB1;: <input type 一 "text"/> 
</i >* 与 “<li class 二 "li"> 电 子 邮 箱 : <input type= "text"/></li>” 的 效果 完全 相同 , 即 “& # x7535， 
中 井 x5B50; 防 #x90AE;& 井 x7BB1;? 是 中 文字 符 “ 电 子 邮 箱 ” 的 编码 。 

此 实例 的 源 文件 名 是 myHtmlA110. html。 


605 ”实现 十 六 进 制 编码 和 中 文字 符 的 相互 转换 


此 实例 主要 通过 使 用 JavaScript 的 replace() 方 法 实现 十 六 进 制 编码 和 中 文字 符 的 相互 转换 。 当 
在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,在 文本 框 中 输入 “中 国 ”, 单 击 “ 将 文本 框 内 容 转 换 成 
UNICODE”, 如 图 605-1 所 示 , 则 将 显示 “中 国 ” 对 应 的 十 六 进 制 编码 *& # x4E2D;&#x56FD;”, 如 图 
605-2 所 示 。 反 之 ,如 果 在 文本 框 中 输入 “&# x4E2D;&# x56FD;”, 单 击 “ 将 文本 框 内 容 还 原 为 中 文 
字符 ”按钮 ,如 图 605-2 所 示 , 则 将 显示 “ &# x4E2D;&# x56FD;” 编 码 对 应 的 汉字 “中 国 ”, 如 图 605-1 
所 示 。 这 主要 用 于 在 国际 化 的 网 页 中 采用 十 六 进 制 编码 解决 汉字 的 乱码 问题 。 有 关 此 实例 的 主要 代 
码 如 下 。 
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在 下 列 文本 框 中 输入 中 文 文 宇 ， 单 击 “ 将 文本 框 内容 转 换 成 
UNICODE ”按钮 ， 即 将 其 转化 为 UNICDODE 编 码 。 再 单 击 “ 将 文 


在 Po 中 的 入 音 击 “ 本 
本 框 内 容 还 原 为 中 文字 符 ” 按钮， 即将 其 还 原 为 简体 中 文 。 


UNIOODE ”按钮 ， 即 将 其 转化 为 UNICODE 编 码 
本 框 内 容 还 原 为 中 文字 符 ”按钮 ， 即 将 其 还 原 为 简体 中 文 。 


[stdE2D br56PD 


中 国 


交 文 本 框 内 硅 转 执 成 UNICODE 将 文本 竹内 奉 于 原 为 中 文字 行 








图 605-1 图 605-2 


<! doctype html >< html >< head ><meta charset = "UTF - 8"></head> 


<body><div align = center ><p style= " width: 420px"> 在 下 列 文本 框 中 输入 中 文 文字 , 单 击 "将 文本 框 内 容 转 
换 成 UNICODE" 按 钮 , 即将 其 转化 为 UNICODE 编码 。 再 单 击 "将 文本 框 内 容 还 原 为 中 文字 符 " 按 钮 ,即将 其 还 原 为 简 
体 中 文 。</p></div> 


<p align= center >< textarea cols= 55 rows= 5 id = code> 这 是 测试 文字 </textarea ></p> 
<Pp align = center > 


< input type = button onclick = encode(code, this) value =" 将 文本 框 内 容 转 换 成 UNICODE" style = "width: 
410px;"> 
< script language = "javascript"> 
Var mode = "zhuan" ; 
function encode(obj, btn) { 
if (mode == "zhuan") { 
obj. value = obj. value. replace(/[^\u0000— \u00FF]/g，function ($0) { 
return escape( $0). replace(/( %u)(\w{4})/gi, "&#x$2;") 
DD); 
btn. value = "将 文本 框 内 容 还 原 为 中 文字 符 "; 
mode = "huan" ; 
} else { 
obj. value = unescape(obj. value. replace(/&#x/g, '%u').replace(/;/g, '')); 
btn. value = "将 文本 框 内 容 转换 成 UNICODE" ; 
mode = "zhuan"; 
昌 ; 
</script ></p></body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,replace() 方 法 用 于 在 字符 串 中 用 一 


些 字符 替换 另 一 些 字符 ,或 替换 一 个 与 正则 表达 式 匹配 的 子 串 ,该 方 法 的 语法 格式 如 下 。 


stringObject. replace( regexp/substr, replacement) 











串 , 见 


字符 串 值 ,规定 了 替换 文本 或 生成 替换 文本 的 函数 。 


中 ,参数 regexp/substr 规定 子 字符 串 或 要 替换 的 模式 的 RegExp 对 象 ,如 果 该 值 是 一 个 字符 





将 它 作为 要 检索 的 直接 文本 模式 ,而 不 是 首先 被 转换 为 RegExp 对 象 ; 参数 replacement 是 一 个 


replace() 方 法 将 在 字符 串 中 查找 与 regexp 相 匹 配 的 子 字符 串 , 然 后 用 replacement 来 替换 这 些 
子 字 符 串 。 如 果 regexp 具有 全 局 标志 g, 那 么 replace() 方 法 将 替换 所 有 匹配 的 子 字 符 串 ,否则 它 只 替 


换 第 一 


个 匹配 子 字符 串 。replacement 可 以 是 字符 串 ,也 可 以 是 函数 。 如 果 它 是 字符 串 , 那 么 每 个 匹 


配 都 将 由 字符 串 蔡 换 。 











中 国 ” 的 Unicode 字符 编码 是 U 十 4E2D 和 U 十 56FD, 十 六 进 制 (&&#x) 表 示 的 4E2D 和 56FD 





就 是 十 进 制 (&#) 的 20013 和 22269, 所 以 &#x4e2d;&- 并 x56fd; 和 号 并 20013;& 并 22269; 这 两 种 写 
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法 都 会 在 页 面 显示 时 转换 为 “中 国 ” 二 字 ,例如 *< li class 二 "li">&#20013;& #22269;< input type 一 
"text"/></li>” 在 网 页 上 显示 的 就 是 中 国 和 文本 框 。 
此 实例 的 源 文 件 名 是 myHtmlAl11. html。 


606 ”使 用 meta 元 信息 实现 页 面 的 定时 跳 转 与 刷新 


此 实例 主要 通过 设置 meta 元 素 的 元 信息 refresh 实现 页 面 的 定时 跳 转 与 刷新 。 当 在 Google 
Chrome 浏览 器 中 显示 该 页 面 时 将 提示 “有 事 快 干 : 5 秒 后 将 跳 转 到 京东 首页 !”, 如 图 606-1 所 示 , 在 
经 过 5 秒 后 页 面 自动 跳 转 到 京东 首页 。 有 关 此 实例 的 主要 代码 如 下 。 


百 口 x 
D myHemlAT09 html x 
全 3 © Dfile///D/myWork/myHtmlA10933 三 











有 事 快 干 ，5 秒 后 将 跳 转 到 京东 首页 ! 





图 606-1 


<!doctype html >< html >< head >< meta charset = "UTF — 8"> 
<meta http— equiv = "refresh" content = "5; url ='https://www. jd. com'"> 
</head> 
<body><p><strong> 有 事 快 干 : 5 秒 后 将 跳 转 到 京东 首页 !</strong></p></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,< meta http-equiv 一 " refresh" 
content 一 "5; url 一 'https://www. jd. com'"> 表 示 页 面 在 5 秒 后 自动 跳 转 到 *https://www. jd. com”。 
如 果 需 要 使 页 面 5 秒 自动 刷新 一 次 , 则 应 该 为 < meta http-equiv 二 "refresh” content 二 "5; ">; 如 果 需 
要 使 页 面 在 5 秒 后 自动 跳 转 到 首页 , 则 应 该 为 <meta http-equiv 二 "refresh" content 二 "5; url 一 '/”">。 
在 HTML5 中 ,上 述 功能 并 不 是 meta 元 素 的 主要 功能 ,< meta > 元 素 的 主要 功能 是 提供 有 关 页 面 的 元 
信息 Cmeta-information) ,例如 针对 搜索 引擎 和 更 新 频 度 的 描述 和 关键 字 。< meta > 元 素 位 于 文档 的 
头 部 ,不 包含 任何 内 容 。< meta > 标签 的 属性 定义 了 与 文档 相关 联 的 名 称 / 值 对 ,这 些 名 称 / 值 对 的 作 
用 如 表 606-1 所 示 。 

表 606-1 < meta > 标签 的 属性 定义 的 名 称 / 值 对 



































属 性 值 说 明 

charset character encoding 定义 文档 的 字符 编码 

content some_text 定义 与 http-equiv 或 name 属性 相关 的 元 信息 
content-type 

http-equiv 人 把 content 属性 关联 到 HTTP 头 部 
refresh 
set-cookie 
author 
description 
keywords 

name 把 content 属性 关联 到 一 个 名 称 
generator 
revised 





others 
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例如 ,使 用 < meta > 元 素 定 义 针 对 搜索 引擎 的 关键 字 。 


<meta name = "keywords”content = "HIML，CSS，XML，XHTML，JavaScript"” />, 使 用 < meta > 元 素 定义 对 页 面 的 描 
述 < meta name = "description”content = "免费 的 Web 技术 教程 .”/> 


此 实例 的 源 文件 名 是 myHtmlA109. html。 


607 ”实现 单 击 网 页 的 任意 位 置 立即 触发 广告 


此 实例 主要 通过 创建 透明 层 实现 单 击 网 页 的 任意 位 置 即 可 立即 触发 广告 。 当 在 Google Chrome 
浏览 器 中 显示 该 页 面 时 ,如 果 试 图 首先 在 文本 框 中 输入 内 容 . 则 会 触发 广 -条 跳 转 到 百度 首页 ; 实际 上 ， 
在 首次 显示 该 页 面 时 单 击 页 面 的 任何 位 置 都 将 跳 转 到 百度 首页 ,如 图 607-1 所 示 。 有 关 此 实例 的 主要 
代码 如 下 。 








百 - oo x 


DD myHtml8199 homl x 
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rg 本 站 需要 广告 支持 维护 ， 每 次 都 会 弹出 广 
单 击 弹出 广告 ， 若 再 侈 回 到 本 页 ， 即 可 正常 操作 ， 





请 输入 搜索 内 容 ， 扫 案 同 鳃 








图 607-1 


<! doctype html >< html >< head >< meta charset = "UTF - 8"> 
< script src= "js/jquery- 3.1.1.min. js"></script> 
< style type = "text/css"> 
/x 广告 图 片 */ 
img{ position: relative; top:50% ; left:20% } 
/* 透明 层 */ 
.layer { text — align: center; position: absolute; top: 0; left: 0; margin: 0; 
z- index: 1000; width: 100 % ; height: 100% ;background— color: transparent; cursor:help;} 
</style></head> 
<body ><div class= "test"> 特别 声明 : 本 站 需要 广告 支持 维护 ,每 次 都 会 弹出 广告 。 单 击 弹出 广告 ,车 再 次 回 
到 本 页 , 即 可 正常 操作 。<br/><br/> 
请 输入 搜索 内 容 : < input type = "text"/> <button type= "submit"> 搜 索 网 盘 </button > 
</div> 
<div class = "layer" onclick = "window. open( 'http://www. baidu. com'); $ (this). remove();">< img src = 
"img/BO67A. png"/></div ></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 .z-index: 1000 表示 透明 层 位 于 页 面 
的 最 顶层 。background-color: transparent 表示 该 层 是 透明 的 .因此 用 户 感觉 不 到 它 的 存在 ,用 户 看 
到 的 是 下 面 底层 的 内 容 , 由 于 透明 层 的 阻隔 ,可 见 的 底层 内 容 是 不 可 操作 的 。onclick 一 "window. 
open('http://www. baidu. com'); $ (this). remove();" 表 示 在 单 击 此 透明 层 之 后 跳 转 到 百度 首页 ， 
然后 移 除 透 明 层 , 因 此 用 户 在 单 击 透 明 层 的 广告 后 跳 转 到 百度 首页 ,然后 返回 此 页 面 即 是 移 除 透 明 层 
之 后 的 页 面 , 故 可 以 在 文本 框 中 输入 内 容 。 

此 实例 的 源 文件 名 是 myHtmlB199. html。 
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608 ”通过 使 用 滤 镜 特效 实现 灰色 主题 的 网 页 


此 实例 主要 设置 -webkitfilter 属性 为 grayscale(100%). 即 大 家 通常 所 说 的 灰色 滤 镜 ,从 而 实现 
以 灰色 主题 显示 网 页 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,无 论 网 易 首 页 显示 的 元 素 和 颜 
色 多 么 复杂 ,在 灰色 滤 镜 的 作用 下 一 切 都 将 变 为 灰色 .如 图 608-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 








DD myHtmlB198 heml x 


© D file///D/myWork/myHtmlB198.html 字 三 





二 图 片 秃 二 体育 卫生 NBA 中 入 
电影 音乐 电 磺 齐 。。 财经 县 村 其 全 商业 











图 608-1 


<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
< style type= "text/css"> 
html{ — webkit— filter:grayscale(100% );} 
</style></head> 
<body >< iframe src = "http://www. 163. com" width= "450" height = "300"></iframe> 
</body></html> 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 , html{ -webkit-filter; grayscale 
(100%);}) 表 示 对 html 元 素 对 应 的 类 中 的 所 有 内 容 使 用 灰色 滤 镜 ,在 此 实例 中 ,iframe{-webkit- 
filter :grayscale(100%) ;) 与 此 具有 相同 的 效果 。 在 CSS3 中 ,filter 属性 可 以 在 元 素 呈 现 之 前 为 元 素 
的 泻 染 提供 一 些 效果 ,例如 模糊 ,颜色 转移 之 类 ,filter 属性 常用 于 调整 图 像 .背景 .边框 的 泻 染 。filter 
属性 的 语法 格式 如 下 。 

— webkit ~ filter:none| blur(px) |brightness() |contrast() |grayscale( ) |hue - rotate(deg) | invert()|opacity() 

|saturate() | sepia() | drop - shadow( radius) |url() 

其 中 ,各 属性 值 的 说 明 如 下 。 

(1) none: 无 SVG 滤 镜 效果 ,此 为 默认 值 。 

(2) blur(< number > px) : 设置 对 象 的 模糊 效果 。 

(3) brightness(< percentage >): 设置 对 象 的 亮度 。 除 了 百分比 外 ,也 可 以 用 非 负 数 表达 。 

(4) contrast(< percentage >): 设置 对 象 的 对 比 度 。 除 了 百分比 外 ,也 可 以 用 0 一 1 的 数字 表达 。 
(5) grayscale(< percentage >): 设置 对 象 的 灰 度 。 除 了 百分比 外 ,也 可 以 用 0 一 1 的 数字 表达 。 

(6) hue-rotate(< number > deg) : 设置 对 象 的 色相 旋转 。 用 0 一 360 数字 表达 。 

(7) invert(< percentage >): 设置 对 象 的 反 色 。 除 了 百分比 外 ,也 可 以 用 0 一 1 的 数字 表达 。 

(8) opacity(< percentage >): 设置 对 象 的 透明 度 。 除 了 百分比 外 .也 可 以 用 0 一 1 的 数字 表达 。 
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(9) saturate(< percentage >): 设置 对 象 的 饱和 度 。 除 了 百分比 外 ,也 可 以 用 非 负 数 表达 。 

(10) sepia(< percentage>): 设置 对 象 的 褐色 程度 。 除 了 百分比 外 ,也 可 以 用 0 一 !1 的 数字 表达 。 

(11) drop-shadow(< length ><length > radius <color>) : 设置 对 象 的 阴影 。 第 1 个 长 度 是 向 右 
偏 移 距 离 ; 第 2 个 长 度 是 向 下 偏 移 距 离 , 皆 可 为 负 值 , 皆 为 必 传 参数 ; 第 3 个 参数 是 阴影 圆 角 , 可 选 ; 
第 4 个 参数 是 阴影 颜色 ,可 选 。 

(12) url(path. svg#a) : 设置 对 象 滤 镜 效果 。 

通过 SVG 可 实现 以 上 所 有 效果 。SVG 可 写 在 页 面 里 ,也 可 在 外 部 引用 ,可 增加 锚 点 。 

此 实例 的 源 文件 名 是 myHtmlB198. html。 


609 ”使 用 MutationObserver 监视 DOM 变化 


此 实例 主要 通过 使 用 MutationObserver( 突 变 监 视 器 ) 监 视 DOM 变化 。 当 在 Google Chrome 浏 
览 器 中 显示 该 页 面 时 , 单 击 * 插 和 人 一 幅 图 像 来 测试 DOM 变化 ”按钮 , 则 MutationObserver( 突 变 监视 
器 ) 将 立即 在 上 面 显示 监测 的 DOM 变化 信息 ,如 图 609-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
| 
口 myHemlAlo8html x 
= 3 CDfiley/DVmyWorwmyHtmlA 安 三 





Jutation type: childList 
Nutation target: [object HINLDivElement] 


插入 一 自 图 像 来 到 试 DOM 愉 化 








图 609-1 


<!doctype html >< html >< head >< meta charset = "UTF - 8"></head> 
<body><p id= "myInfo"></p> 
<p>< input type = "button”value = " 择 入 一 幅 图 像 来 测试 DOM 变化 ”onclick = "changeDiv();" style=" 
width:375px"></p>< div id= "myDiv"></div> 
<script > 
var onChange = function(myRecords) { 
myRecords. map(function(myRecord) {// 输 出 检测 到 的 变化 信息 
document. getElementById('myInfo'). innerText = 'Mutation type: '+ 
myRecord. type + '\n Mutat ion target: '+ myRecord. target; 
Di}; 
var myDiv = document. getElementById( 'myDiv'); 
var myMutationObserver = new window. MutationObserver(onChange); 
var myOptions = {'childList': true, 'subtree': true}; 
myMutationObserver. observe(myDiv, myOptions); 
function changeDiv() { 
var mySpan = document. createElement ("span" ) ; 
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mySpan. innerHTML = "< img src = 'img/al08. jpg'>"; 
myDiv. appendChild(mySpan) ; } 
</script ></body ></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,var myMutationObserver 二 new 
window. MutationObserver(onChange) 用 于 创建 突变 监视 器 ,myMnutationObserver. observe(myDiv， 
myOptions) 用 于 设置 监视 对 象 和 监视 选项 。 当 DOM 对 象 树 发 生 任何 变动 时 MutationObserver 就 会 
得 到 通知 ,在 概念 上 很 接近 事件 。 当 DOM 发 生变 动 时 会 触发 MutationObserver 事件 。 
MutationObserver 与 事件 有 一 个 本 质 的 不 同 : 事件 是 同步 触发 ,也 就 是 说 DOM 发 生变 动 立 刻 会 触发 
相应 的 事件 ; MutationObserver 则 是 异步 触发 ,DOM 发 生变 动 以 后 并 不 会 马上 和 触发 ,而 是 要 等 到 当 
前 所 有 DOM 操作 都 结束 后 才 触 发 。 这 样 设 计 是 为 了 应 付 DOM 变动 频繁 的 情况 。 举 例 来 说 ,如 果 在 
文档 中 连续 插入 1000 个 段落 (p 元 素 ) 会 连续 触发 1000 个 插入 事件 并 执行 每 个 事件 的 回调 函数 ,这 很 
可 能 造成 浏览 器 的 卡 顿 ; 而 MutationObserver 完全 不 同 , 它 在 1000 个 段落 都 插入 结束 后 才 会 触发 ， 
而 且 只 触发 一 次 。MutationObserver 所 观察 的 DOM 变动 包含 以 下 类 型 。 

(1) childList: 子 元 素 的 变动 。 

(2) attributes: 属性 的 变动 。 

(3) characterData: 结 点 内 容 或 结 点 文本 的 变动 。 

(4) subtree: 所 有 下 属 结 点 (包括 子 结 点 和 子 结 点 的 子 结 点 ) 的 变动 。 

想 要 观察 哪 一 种 变动 类 型 ,就 在 option 对 象 中 指定 它 的 值 为 true。 需 要 注意 的 是 ,不 能 单独 观察 
subtree 变动 ,必须 同时 指定 childList ,attributes 和 characterData 中 的 一 种 或 多 种 。 除 了 变动 类 型 
option 对 象 还 可 以 设 定 以 下 属性 。 

(1) attributeOldValue: 值 为 true 或 者 为 false。 如 果 为 true, 则 表示 需要 记录 变动 前 的 属性 值 。 

(2) characterDataOldValue: 值 为 true 或 者 为 false。 如 果 为 true, 则 表示 需要 记录 变动 前 的 数 
据 值 。 

(3) attributesFilter: 值 为 一 个 数组 ,表示 需要 观察 的 特定 属性 (例如 ['class','str'])。 

DOM 对 象 每 次 发 生变 化 都 会 生成 一 条 记录 ,这 个 记录 对 应 一 个 MutationRecord 对 象 ,该 对 象 包 
含 了 与 变动 相关 的 所 有 信息 。MutationRecord 对 象 包含 了 DOM 的 相关 信息 ,有 如 下 属性 : 

(1) type: 观察 的 变动 类 型 (attribute、characterData 或 者 childList) 。 

(2) target: 发 生变 动 的 DOM 对 象 。 

(3) addedNodes: 新 增 的 DOM 对 象 。 

(4) removeNodes: 删除 的 DOM 对 象 。 

(5) previousSibling: 前 一 个 同 级 的 DOM 对 象 .如果 没有 则 返回 null。 

(6) nextSibling: 下 一 个 同 级 的 DOM 对 象 . 如 果 没 有 就 返回 null。 

(7) attributeName: 发 生变 动 的 属性 。 如 果 设置 了 attributeFilter, 则 只 返回 预先 指定 的 属性 。 

(8) oldValue: 变动 前 的 值 。 这 个 属性 只 对 attribute 和 characterData 变动 有 效 , 如 果 发 生 
childList 变动 , 则 返回 null。 

此 实例 的 源 文件 名 是 myHtmlA108. html。 


610 ”允许 或 禁止 背景 跟随 浏览 器 的 深 动 条 滨 动 


此 实例 主要 通过 设置 background-attachment 属性 的 不 同属 性 值 实现 允许 或 禁止 背景 跟随 浏览 
器 的 滚动 条 滚动 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 . 单 击 * 人 允许 背景 随 着 滚动 条 滚动 " 按 
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钮 后 , 拖 动 浏览 器 的 滚动 条 滑 块 , 则 页 面 背 景 将 跟随 滚动 条 滚动 ; 单 击 * 禁 止 背景 随 着 滚动 条 滚动 " 按 
钮 后 , 拖 动 浏览 器 的 滚动 条 滑 块 , 则 页 面 背 景 将 不 跟随 滚动 条 滚动 ,如 图 610-1 所 示 。 有 关 此 实例 的 主 
要 代码 如 下 。 
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<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<script src= "js/jquery -3.1.1.min. js"></script >< script language = "javascript"> 
$ (document). ready(function() { 
$ ("#myBtnScroll"). click(function() { // 人 允许 背景 随 着 滚动 条 滚动 
$ ("html").css("background - attachment", "scroll"); 
Ds; 





$ ("#myBtnFixed"). click(function() { // 禁 止 背景 随 着 滚动 条 滚动 
$("html").css("background - attachment"，"fixed"); });}); 
</script> 


< style type = "text/css"> 
html { background - image: url('img/B206. jpg'); } 
div { width: 100% ; height: 5000px;} 
button { width: 195px; } 
p { text -align: center;} 
</style></head> 
<body><p><button id= "myBtnScroll"> 人 允许 背景 随 着 滚动 条 滚动 </button > 
<button id = "myBtnFixed"> 禁 止 背景 随 着 滚动 条 滚动 </button ></p> 
<div></div></body ></html > 





上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,background-attachment 属性 用 于 设 
置 背 景 图 像 是 否 固定 或 者 随 着 页 面 的 其 余部 分 滚动 ,该 属性 支持 的 属性 值 的 说 明 如 下 。 

(1) scroll: 默认 值 ,表示 背景 图 像 会 随 着 页 面 中 其 余部 分 的 滚动 而 移动 。 

(2) fixed: 表示 当 页 面 的 其 余部 分 滚动 时 背景 图 像 不 会 移动 。 

(3) inherit: 规定 应 该 从 父 元 素 继承 background-attachment 属性 的 设置 。 

此 实例 的 源 文 件 名 是 myHtmlB206. html。 


611 在 百度 地 图 中 根据 经 度 和 纬度 指示 位 置 


此 实例 主要 实现 了 根据 某 地 区 的 经 度 和 纬度 信息 通过 使 用 百度 地 图 API 显示 该 地 区 在 地 图 上 的 
位 置 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 将 根据 重庆 的 经 度 和 纬度 信息 (经 度 是 106. 54、 纬 
度 是 29. 59) 显 示 重 庆 在 地 图 上 的 位 置 ,如 图 611-1 所 示 。 有 关 此 实例 的 主要 代码 如 下 。 
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/ D myHhtmlA114html x \Oa 








<!doctype html >< html >< head >< meta charset = "UTF - 8"> 

< style type= "text/css"> 

body, html, #myMap { width: 100% ; height: 100% ;overflow: hidden; margin: 0; 

font - family:" 微 软 雅 黑 "; } 

</style> 

< script type = "text/javascript" src= "http://api. map. baidu. com/api?v = 2. 0&ak = 
BY1C3C8g5cZcG4I2pozDCuxFuPjY8FMy"> </script > 
</head> 
<body>< div id = "myMap"></div> 
<script type= "text/javascript"> 


var myMap = new BMap. Map("myMap”) 7 
// 重 庆 的 经 度 是 106. 54 ,纬度 是 29.59 
var myPoint = new BMap. Point (106.54, 29.59); 
//12 表示 缩放 比例 
myMap. centerAndZoom(myPoint, 12); 
var myMarker = new BMap. Marker (myPoint); 
myMap. addOver lay (myMarker) ; 
myMap. panTo( myPoint ) ; 
// 以 下 代码 是 根据 IP 定 位 当前 位 置 
Var myMap = new BMap. Map( "myMap" ) ; 
var myPoint = new BMap. Point (0, 0); 
myMap. centerAndZoom(myPoint, 12); 
Var myGeolocation = new BMap. Geolocation(); 
myGeolocat ion. getCurrentPosition(function(r) { 
if (this. getStatus() == BMAP_STATUS_SUCCESS) { 
var mk = new BMap. Marker(r. point); 
myMap. addOver lay (mk) ; 
myMap. panTo( r. point); 
alert(' 您 的 位 置 : '+r.point. lng+','+r.point. lat); 
E 
else {alert('failed'+ this. getStatus());} 


HTML5+CSS3 炫 酷 应 用 实例 集锦 


// }, {enableHighAccuracy: true }) 
</script ></body ></html > 





上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,src 二 "http://api. map. baidu. com/ 
api? v 二 2. 0&ak 二 8Y1C3C8g5cZcG412pozDCuxFuPjY8FMy" 中 的 ak 号 码 需 要 向 百度 地 图 开发 者 平 
台 申 请 ,在 用 于 商业 开发 时 百度 可 能 会 收取 一 定 的 费用 ,否则 在 运行 时 将 给 出 如 图 611-2 所 示 的 提示 
信息 。 

此 实例 的 源 文件 名 是 myHtmlAl114. html。 





六 myHtmlA114 html X 


全 3 X  Dfile//DVmyWorymyHtmlA114 交 三 





人 eVWDVmyWorkymyHtmlA114.html 上 的 网 页 显示 : 


百度 不 短 权 使 用 地 图 AP ,可 能 旺 因为 区 提供 的 宣 急 不 是 有 效 的 百度 L8B5 


lbsyun baidu com/apiconsole/keys. 
章 止 此 页 两 显示 对 笑 本 。 











图 611-2 


612 在 关闭 页 面前 弹出 消息 框 提 示 用 户 确认 


此 实例 主要 设置 页 面 body 的 onbeforeunload() 方 法 的 返回 值 ,从 而 实现 在 关闭 页 面前 弹出 消息 
框 提 示 用 户 做 最 后 的 关闭 确认 。 当 在 Google Chrome 浏览 器 中 显示 该 页 面 时 ,如 果 使 用 鼠标 单 击 浏 
览 器 右上 角 的 “关闭 (X)"” 按 钮 , 则 将 弹出 一 个 “确认 导航 "消息 框 ,提示 “请 慎重 考虑 一 下 : 确定 要 离开 
此 页 吗 ?”, 如 图 612-1 所 示 ; 单 击 “ 离 开 此 页 ”按钮 , 则 关闭 页 面 , 单 击 “ 留 在 此 页 "按钮, 则 返回 页 面 。 
有 关 此 实例 的 主要 代码 如 下 。 








口 myHtmlB316 html x 
全 3 © Dfile///D/myWork/myHtmlB3163? 三 
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<!doctype html >< html >< head >< meta charset = "UTF - 8"> 
<style type= "text/css"> 
img { width: 400px; height: 250px; border — radius: 10px; } 
</style></head> 
<body onbeforeunload = "return ' 请 慎重 考虑 一 下 : ';"> 
< img src= "img/B316. jpg"></body></html > 


上 面 有 底 纹 的 代码 是 此 实例 的 核心 代码 。 在 该 部 分 代码 中 ,< body onbeforeunload 一 "return ' 请 
慎重 考虑 一 下 : ';"> 用 于 在 关闭 页 面前 给 用 户 一 个 提示 信息 。 
此 实例 的 源 文件 名 是 myHtmlB316. html。 


图 书 资源 支持 











感谢 您 一 直 以 来 对 清华 版 图 书 的 支持 和 爱护 。 为 了 配合 本 书 的 使 用 ,本 书 提供 配套 


























的 资源 ,有 需求 的 读者 请 扫描 下 方 的 “ 书 圈 " 微 信 公 众 号 二 维 码 ,在 图 书 专区 下 载 ,也 可 以 
拨打 电话 或 发 送 电 子 邮件 咨询 。 






































如 果 您 在 使 用 本 书 的 过 程 中 遇 到 了 什么 问题 ,或 者 有 相关 图 书 出 版 计划 ,也 请 您 发 
邮件 告诉 我 们 ,以 便 我 们 更 好 地 为 您 服务 。 








我 们 的 联系 方式 : 

地  ” 址 ; 北京 海淀 区 双 清 路 学 研 大 厦 A 座 707 
邮 ” 编 : 100084 资源 下 载 ， 梓 中 请 
电 ” 话 : 010 一 62770175 一 4604 


资源 下 载 : http://www.tup. com. cn 





电子 邮件 : weijj@tup.tsinghua.edu. cn 
QQ: 883604( 请 写 明 您 的 单位 和 姓名 ) 


用 微 信 扫 一 扫 右 边 的 二 维 码 , 即 可 关注 清华 大 学 出 版 社 公众 号 “ 书 圈 ”。 


